diff --git a/frontend/src/components/export/DataExport.vue b/frontend/src/components/export/DataExport.vue
index 26818e5486e2b66c3ce65f66e33f131b8c90e6e4..cd31f9739f54b1ff48549c64d3852492863aa38b 100644
--- a/frontend/src/components/export/DataExport.vue
+++ b/frontend/src/components/export/DataExport.vue
@@ -81,10 +81,9 @@
 <script lang="ts">
 import Component, { mixins } from 'vue-class-component'
 import { getters } from '@/store/getters'
-import ax, { StudentExportItem, fetchStudentExportData } from '@/api'
+import { StudentExportItem } from '@/api'
 import FileSelect from '@/components/util/FileSelect.vue'
-import { mutations as mut } from '@/store/mutations'
-import { ExportType, exportMixin } from '@/components/mixins/exportMixin.ts'
+import { exportMixin } from '@/components/mixins/exportMixin.ts'
 
 @Component({
   components: { FileSelect }
diff --git a/frontend/src/components/export/InstanceExport.vue b/frontend/src/components/export/InstanceExport.vue
index c6b0f92f0c2d1d1b4382123af623dea8c1edde10..205538b9619c4a3539f27e779ddaf838930ea628 100644
--- a/frontend/src/components/export/InstanceExport.vue
+++ b/frontend/src/components/export/InstanceExport.vue
@@ -58,9 +58,8 @@
 <script lang="ts">
 import Component, { mixins } from 'vue-class-component'
 import { getters } from '@/store/getters'
-import ax, { StudentExportItem, fetchStudentExportData, fetchInstanceExportData, InstanceExportData } from '@/api'
+import { InstanceExportData } from '@/api'
 import FileSelect from '@/components/util/FileSelect.vue'
-import { mutations as mut } from '@/store/mutations'
 import { ExportType, exportMixin } from '@/components/mixins/exportMixin'
 
 @Component({
diff --git a/frontend/src/components/export/README.md b/frontend/src/components/export/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..cd1271d3b09805faf13f67eda03a0a0cce92aefb
--- /dev/null
+++ b/frontend/src/components/export/README.md
@@ -0,0 +1,9 @@
+# Export Components
+
+These components offer functionality to export student scores and instance data.
+
+The `InstanceExport.vue` and `DataExport.vue` contain features to display the corresponding dialogs, upload a mapping file and
+map pseudonymous student data to the actual student data, by using said mapping file. The base functionality that those
+components use can be found in `mixins/exportMixin.ts`.
+
+The `ExportDialog.vue` coordinates the other two dialogs and renders one of them if selected.
diff --git a/frontend/src/components/feedback_labels/FeedbackLabelForm.vue b/frontend/src/components/feedback_labels/FeedbackLabelForm.vue
index 7dbfae9464afceaddbf86fbb64aa39064abe12b7..e8ffef42288e78863fa9ffa88c49d7ae0b215111 100644
--- a/frontend/src/components/feedback_labels/FeedbackLabelForm.vue
+++ b/frontend/src/components/feedback_labels/FeedbackLabelForm.vue
@@ -152,9 +152,8 @@ export default class FeedbackLabelForm extends Vue {
       pk: this.pk,
     }
 
-    let res
     try {
-      res = await api.updateLabel(label)
+      await api.updateLabel(label)
       this.notifySuccess(true)
     } catch (ex) {
       // user will be notified by the interceptor
diff --git a/frontend/src/components/feedback_labels/FeedbackLabelTab.vue b/frontend/src/components/feedback_labels/FeedbackLabelTab.vue
index 2988ff65a0a67d2de8380017ffe32231aa609528..fcb0ddef021db9373cde9990b516ce8ca21c0d72 100644
--- a/frontend/src/components/feedback_labels/FeedbackLabelTab.vue
+++ b/frontend/src/components/feedback_labels/FeedbackLabelTab.vue
@@ -60,7 +60,6 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import { Prop } from 'vue-property-decorator'
-import { getLabels } from '@/api'
 import { FeedbackLabels } from '@/store/modules/feedback-labels'
 import { UI } from '@/store/modules/ui'
 import FeedbackLabelList from './FeedbackLabelList.vue'
diff --git a/frontend/src/components/feedback_labels/FeedbackLabelUpdater.vue b/frontend/src/components/feedback_labels/FeedbackLabelUpdater.vue
index e53c45727d68110d7e8ac9cb7b2e545a4e0bdfd2..32f865f83d4f296b4ff0400d2324bcf99c9a2350 100644
--- a/frontend/src/components/feedback_labels/FeedbackLabelUpdater.vue
+++ b/frontend/src/components/feedback_labels/FeedbackLabelUpdater.vue
@@ -32,7 +32,7 @@ import Vue from 'vue'
 import Component from 'vue-class-component'
 import { FeedbackLabels } from '@/store/modules/feedback-labels'
 import FeedbackLabelForm from './FeedbackLabelForm.vue'
-import { FeedbackLabel } from '../../models'
+import { FeedbackLabel } from '@/models'
 
 @Component({
   components: {
diff --git a/frontend/src/components/feedback_labels/LabelSelector.vue b/frontend/src/components/feedback_labels/LabelSelector.vue
index ff0c47b580bac64b7200cc8833a20da63717540b..118f0648510f51fdd8367b53c2b1eadcdda489d4 100644
--- a/frontend/src/components/feedback_labels/LabelSelector.vue
+++ b/frontend/src/components/feedback_labels/LabelSelector.vue
@@ -70,7 +70,6 @@ import { Prop } from 'vue-property-decorator'
 import { FeedbackLabels } from '@/store/modules/feedback-labels'
 import { SubmissionNotes } from '@/store/modules/submission-notes'
 import FeedbackLabel from '@/components/feedback_labels/FeedbackLabel.vue'
-import { FeedbackComment, SubmissionType } from '../../models'
 
 @Component({
   components: {
@@ -117,7 +116,7 @@ export default class LabelSelector extends Vue {
    */
   unchangedFeedbackLabels() {
     const labelsOrig = SubmissionNotes.state.origFeedback.labels
-    if (labelsOrig === undefined) return new Array()
+    if (!labelsOrig) return []
 
     const labelsDeleted = this.removedFeedbackLabels()
     const labelsAdded = this.addedFeedbackLabels()
@@ -132,12 +131,12 @@ export default class LabelSelector extends Vue {
    * but exist in origFeedback
    */
   removedFeedbackLabels() {
-    if (!SubmissionNotes.state.changedLabels) return new Array()
+    if (!SubmissionNotes.state.changedLabels) return []
 
     const labelsOrig = SubmissionNotes.state.origFeedback.labels
     const labelsUpdated = SubmissionNotes.state.updatedFeedback.labels
 
-    if (labelsOrig === undefined) return new Array()
+    if (!labelsOrig) return []
 
     return labelsOrig.filter((label) => {
       return !labelsUpdated.includes(label)
@@ -148,11 +147,11 @@ export default class LabelSelector extends Vue {
    * Returns an array of label pk's that have been added in updatedFeedback
    * but do not exist in origFeedback
    */
-  addedFeedbackLabels() {
+  addedFeedbackLabels() {
     const labelsOrig = SubmissionNotes.state.origFeedback.labels
     const labelsUpdated = SubmissionNotes.state.updatedFeedback.labels
 
-    if (labelsOrig === undefined) return new Array()
+    if (!labelsOrig) return []
 
     return labelsUpdated.filter((label) => {
       return !labelsOrig.includes(label)
diff --git a/frontend/src/components/feedback_labels/README.md b/frontend/src/components/feedback_labels/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..93b204af90b1b0431f6546fddb35b59dbdffdd9e
--- /dev/null
+++ b/frontend/src/components/feedback_labels/README.md
@@ -0,0 +1,16 @@
+# Feedback Label Components
+
+Components found here offer functionality to organize often-used correction comments into nice, reusable labels.
+
+The base label component is in `FeedbackLabel.vue`.
+
+A form that can be used to create labels is found in `FeedbackLabelForm.vue`.
+
+The `FeedbackLabelList.vue` component simply renders all available labels into a nice list.
+
+Functionality around updating existing labels is kept in the `FeedbackLabelUpdater.vue` component
+
+The `FeedbackLabelTab.vue` contains the list of labels along with the form to create and update labels, organized in
+three tabs.
+
+The `LabelSelector.vue` contains logic to append and remove labels from some context.
diff --git a/frontend/src/components/feedback_list/FeedbackListHelpCard.vue b/frontend/src/components/feedback_list/FeedbackListHelpCard.vue
index 745d7d755d442e760c55ee87879ee947977a684a..0c09c701177be507bbf46765c226b315d4ea8ea8 100644
--- a/frontend/src/components/feedback_list/FeedbackListHelpCard.vue
+++ b/frontend/src/components/feedback_list/FeedbackListHelpCard.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import { Authentication } from '../../store/modules/authentication'
+import { Authentication } from '@/store/modules/authentication'
 
 @Component
 export default class FeedbackListHelpCard extends Vue {
diff --git a/frontend/src/components/feedback_list/FeedbackSearchOptions.vue b/frontend/src/components/feedback_list/FeedbackSearchOptions.vue
index 9caa968d9c6b2d1284899f7c585df033ea793e50..a2d28fc3d983c0ad7c53c616d9dc55a74078d2c4 100644
--- a/frontend/src/components/feedback_list/FeedbackSearchOptions.vue
+++ b/frontend/src/components/feedback_list/FeedbackSearchOptions.vue
@@ -124,14 +124,10 @@
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import { mapState, mapGetters } from 'vuex'
 import { FeedbackSearchOptions as SearchOptions } from '@/store/modules/feedback_list/feedback-search-options'
-import { mapStateToComputedGetterSetter } from '@/util/helpers'
 import { Authentication } from '@/store/modules/authentication'
-import { actions } from '@/store/actions'
-import { getters } from '@/store/getters'
 import { TutorOverview } from '@/store/modules/tutor-overview'
-import { FeedbackLabels } from '../../store/modules/feedback-labels'
+import { FeedbackLabels } from '@/store/modules/feedback-labels'
 
 @Component
 export default class FeedbackSearchOptions extends Vue {
@@ -157,7 +153,6 @@ export default class FeedbackSearchOptions extends Vue {
   get filterByLabels () { return SearchOptions.state.filterByLabels }
   get filterByExcludingLabels () { return SearchOptions.state.filterByExcludingLabels }
 
-
   set showFinal (val) {
     SearchOptions.SET_SHOW_FINAL(val)
   }
diff --git a/frontend/src/components/feedback_list/FeedbackTable.vue b/frontend/src/components/feedback_list/FeedbackTable.vue
index f750ff97de43967687946c803fac35e1cc2d8c32..b5e5318035225f1d4d53415b65379829b614414e 100644
--- a/frontend/src/components/feedback_list/FeedbackTable.vue
+++ b/frontend/src/components/feedback_list/FeedbackTable.vue
@@ -58,7 +58,6 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState, mapGetters } from 'vuex'
 import Component from 'vue-class-component'
 import { getObjectValueByPath } from '@/util/helpers'
 import FeedbackSearchOptions from '@/components/feedback_list/FeedbackSearchOptions.vue'
@@ -67,8 +66,8 @@ import { FeedbackTable as FeedbackModule, FeedbackHistoryItem } from '@/store/mo
 import { FeedbackStageEnum, Feedback } from '@/models'
 import { actions } from '@/store/actions'
 import { getters } from '@/store/getters'
-import { Authentication } from '../../store/modules/authentication'
-import { ConfigModule } from '../../store/modules/config'
+import { Authentication } from '@/store/modules/authentication'
+import { ConfigModule } from '@/store/modules/config'
 
 @Component({
   components: {
@@ -77,11 +76,9 @@ import { ConfigModule } from '../../store/modules/config'
 })
 export default class FeedbackTable extends Vue {
   get showFinal () { return OptionsModule.state.showFinal }
-  get searchOtherUserComments () { return OptionsModule.state.searchOtherUserComments }
   get caseSensitive () { return OptionsModule.state.caseSensitive }
   get useRegex () { return OptionsModule.state.useRegex }
   get filterByTutors () { return OptionsModule.state.filterByTutors }
-  get filterByStage () { return OptionsModule.state.filterByStage }
   get filterByLabels () { return OptionsModule.state.filterByLabels }
   get filterByExcludingLabels () { return OptionsModule.state.filterByExcludingLabels }
   get isTutor () { return Authentication.isTutor }
diff --git a/frontend/src/components/feedback_list/README.md b/frontend/src/components/feedback_list/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..3c024ee7bbafe285a30433fe70dfea9e6903abd9
--- /dev/null
+++ b/frontend/src/components/feedback_list/README.md
@@ -0,0 +1,10 @@
+# Feedback List Components
+
+These components are used to build the feedback history page.
+
+`FeedbackListHelpCard.vue` is some static text component that shall help the user navigate the page.
+
+The `FeedbackSearchOptions.vue` component lets the user configure the search options. Internally, all search options
+will be put into the vuex store and will be read by the `FeedbackTabke.vue`.
+
+The `FeedbackTable.vue` is responsible for rendering the filtered results.
diff --git a/frontend/src/components/instance_config/ConfigDialog.vue b/frontend/src/components/instance_config/ConfigDialog.vue
index 1fb2ad0ccd0cc32a8ee80282006fcf96d8dd9e42..85c6de0d134dd373f54df6e0acae389f0d1a8fb0 100644
--- a/frontend/src/components/instance_config/ConfigDialog.vue
+++ b/frontend/src/components/instance_config/ConfigDialog.vue
@@ -71,8 +71,8 @@ export default {
     ConfigModule.getConfig().then(() => {
       this.loading = false
       this.selected = Object.entries(this.instanceSettings)
-        .filter(([key, value]) => value)
-        .map(([key, value]) => key)
+        .filter(([, value]) => value)
+        .map(([key,]) => key)
     })
   },
   methods: {
diff --git a/frontend/src/components/instance_config/README.md b/frontend/src/components/instance_config/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..de528c7ee694ea669074294163157f7dc90a2381
--- /dev/null
+++ b/frontend/src/components/instance_config/README.md
@@ -0,0 +1,3 @@
+# Instance Configuration Components
+
+The `ConfigDialog.vue` renders all current instance settings and provides functionality to change them.
diff --git a/frontend/src/components/mixins/README.md b/frontend/src/components/mixins/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..56df8f74ce330d4d0d08843bfda064269130fa2a
--- /dev/null
+++ b/frontend/src/components/mixins/README.md
@@ -0,0 +1,10 @@
+# Mixins
+
+These mixins provide reusable functionality for components to use.
+
+The `exportMixin.ts` provides functions that are used then exporting data. Those functions are mainly around getting
+and parsing the mapping file.
+
+The `commentLabelSelector.ts` mixin has functionality to manage feedback labels in different contexts, e.g. on the whole
+submission or just on a single line.
+
diff --git a/frontend/src/components/mixins/commentLabelSelector.ts b/frontend/src/components/mixins/commentLabelSelector.ts
index 7fc8da564672a6ce0013c8ec9cfcb437fdfad0b3..1348d42b12f69c17161083a9ec3f95ecf35d9c71 100644
--- a/frontend/src/components/mixins/commentLabelSelector.ts
+++ b/frontend/src/components/mixins/commentLabelSelector.ts
@@ -1,9 +1,9 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import { Prop } from 'vue-property-decorator'
-import { SubmissionNotes } from '@/store/modules/submission-notes'
-import { FeedbackComment, FeedbackLabel } from '@/models'
-import { FeedbackLabels } from '@/store/modules/feedback-labels'
+import {Prop} from 'vue-property-decorator'
+import {SubmissionNotes} from '@/store/modules/submission-notes'
+import {FeedbackComment, FeedbackLabel} from '@/models'
+import {FeedbackLabels} from '@/store/modules/feedback-labels'
 
 enum FeedbackType {
   original = 'origFeedback',
@@ -35,7 +35,7 @@ export default class commentLabelSelector extends Vue {
    * Gets the latest feedback line object for the current lineNo and the given feedbackType
    * @param feedbackType  The type to get the latest line from
    */
-  getFeedbackLine (feedbackType: FeedbackType): FeedbackComment | undefined {
+  getFeedbackLine (feedbackType: FeedbackType): FeedbackComment | undefined {
 
     // helper used to determine the correct type to reduce redundancy
     function isArray(val: FeedbackComment | FeedbackComment[]): val is FeedbackComment[] {
@@ -60,7 +60,7 @@ export default class commentLabelSelector extends Vue {
   getUnchangedLabels() {
     const labelsOrig = this.copyStateLabels(FeedbackType.original)
     if (labelsOrig === null || labelsOrig.length === 0) {
-      return new Array ()
+      return []
     }
     const removedLabels = this.getRemovedLabels()
     const addedLabels = this.getAddedLabels()
@@ -72,13 +72,13 @@ export default class commentLabelSelector extends Vue {
 
   getRemovedLabels() {
     const currentLine = this.getFeedbackLine(FeedbackType.updated)
-    if (currentLine === undefined) return new Array()
+    if (currentLine === undefined) return []
 
     const labelsOrig = this.copyStateLabels(FeedbackType.original)
     const labelsUpdated = this.copyStateLabels(FeedbackType.updated)
 
     if (labelsOrig === null || labelsUpdated === null) {
-      return new Array()
+      return []
     }
 
     return labelsOrig.filter((val) => {
@@ -91,11 +91,11 @@ export default class commentLabelSelector extends Vue {
     const labelsUpdated = this.copyStateLabels(FeedbackType.updated)
 
     if (labelsUpdated === null) {
-      return new Array()
+      return []
     }
 
     if (labelsOrig === null) {
-      return labelsUpdated ? labelsUpdated : new Array()
+      return labelsUpdated ? labelsUpdated : []
     }
 
     return labelsUpdated.filter((val) => {
@@ -107,7 +107,7 @@ export default class commentLabelSelector extends Vue {
    * Maps label pk's to the objects stored in vuex store
    */
   mapPksToLabelObj(pkArr: number[]): FeedbackLabel[] {
-    const mappedLabels = pkArr.map((val) => {
+    return pkArr.map((val) => {
       const label = FeedbackLabels.availableLabels.find((label) => {
         return label.pk === val
       })
@@ -127,7 +127,5 @@ export default class commentLabelSelector extends Vue {
 
       return true
     })
-
-    return mappedLabels
   }
 }
diff --git a/frontend/src/components/mixins/exportMixin.ts b/frontend/src/components/mixins/exportMixin.ts
index 042245133386fe9ff249cfa0aa3d1bfedbf799bd..d8ff153dca18ce45aab7b80a088f92b02fb10fb8 100644
--- a/frontend/src/components/mixins/exportMixin.ts
+++ b/frontend/src/components/mixins/exportMixin.ts
@@ -40,7 +40,7 @@ export class exportMixin extends Vue {
     }
 
     if (this.mapFile || this.mapFileLoaded) {
-      this.getMappedExportFile(studentData)
+      await this.getMappedExportFile(studentData)
     } else {
       this.optionalConvertAndCreatePopup(studentData)
     }
diff --git a/frontend/src/components/student/README.md b/frontend/src/components/student/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..f839d57d2166d03c85e083660de647810297c8a5
--- /dev/null
+++ b/frontend/src/components/student/README.md
@@ -0,0 +1,4 @@
+# Student Page Components
+
+These components are used in the student page. That's the view a student will see if they log in and want to see their
+corrected submissions.
diff --git a/frontend/src/components/student_list/README.md b/frontend/src/components/student_list/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..112f4ce54ce9ffcd4dcc91d9c5682ab6ba3a40a3
--- /dev/null
+++ b/frontend/src/components/student_list/README.md
@@ -0,0 +1,12 @@
+# Student List Components
+
+These components build the base for the student list page, also known as participants overview.
+
+The `StudentList.vue` component contains the table that will render all students.
+
+Just as with the other help cards in this project, `StudentListHelpCard.vue` has some help text to teach the user
+how to use this overview.
+
+The `StudentListMenu.vue` has functionality to grand and revoke access to all students in bulk.
+
+The `StudentListReverseMapper.vue` reads the map file and applies the mapping to reverse the pseudonyms.
diff --git a/frontend/src/components/student_list/StudentList.vue b/frontend/src/components/student_list/StudentList.vue
index c4290dada16b321060f6df43f33892e7bf35d84a..75bfa827f7775d0137ac54e7e52354e9eb815b29 100644
--- a/frontend/src/components/student_list/StudentList.vue
+++ b/frontend/src/components/student_list/StudentList.vue
@@ -125,7 +125,7 @@
         <v-card flat>
           <v-card-text>
             <v-btn
-              v-if="isReviever"
+              v-if="isReviewer"
               @click="changeActiveStatus(props.item)"
             >
               {{ props.item.isActive ? 'Revoke access' : 'Grant access' }}
@@ -179,7 +179,7 @@ export default {
     ...mapState([
       'students'
     ]),
-    isReviever() {
+    isReviewer() {
       return Authentication.isReviewer
     },
     submissionTypeHeaders () {
diff --git a/frontend/src/components/submission_notes/README.md b/frontend/src/components/submission_notes/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..8a79d47b0c13539271bc72b0088862ad1261f8bf
--- /dev/null
+++ b/frontend/src/components/submission_notes/README.md
@@ -0,0 +1,15 @@
+# Submission Notes Components
+
+Components in this subdirectory are organized around correcting student submissions.
+The components found in the `toolbars` subdirectory make the top and bottom toolbar of the correction overview.
+
+The components in the `base` subdirectory are used to build the center overview. The `CommentForm.vue` and `FeedbackComment.vue`
+components are responsible for submitting and rendering comments. Each line of code is represented by one instance of
+`SubmissionLine.vue`, which is responsible for rendering code lines.
+
+The `CorrectionHelpCard.vue` will have some static text to guid the user through the correction.
+
+The `RouteChangeConfirmation.vue` component listens on route changes and displays a warning if there are any unsaved
+changes.
+
+The `SubmissionCorrection.vue` will put everything together.
diff --git a/frontend/src/components/submission_notes/base/CommentForm.vue b/frontend/src/components/submission_notes/base/CommentForm.vue
index b705419a6954e4df08d64da7bd2056cbdb5ed8ce..803dede69af88f188fedfef2b7e8476826ccde75 100644
--- a/frontend/src/components/submission_notes/base/CommentForm.vue
+++ b/frontend/src/components/submission_notes/base/CommentForm.vue
@@ -60,12 +60,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
 import Component, { mixins } from 'vue-class-component'
-import { Prop, Watch } from 'vue-property-decorator'
+import { Prop } from 'vue-property-decorator'
 import { SubmissionNotes, subNotesEventBus } from '@/store/modules/submission-notes'
 import LabelSelector from '@/components/feedback_labels/LabelSelector.vue'
-import { FeedbackComment, SubmissionType } from '@/models'
 import commentLabelSelector from '@/components/mixins/commentLabelSelector'
 
 @Component({
@@ -83,7 +81,7 @@ export default class CommentForm extends mixins(commentLabelSelector) {
   labelsRemoved: number[] = this.getRemovedLabels()
 
   selectInput (event: Event) {
-    if (event !== null) {
+    if (event) {
       const target = event.target as HTMLTextAreaElement
       target.select()
     }
@@ -157,6 +155,6 @@ export default class CommentForm extends mixins(commentLabelSelector) {
 
 <style scoped>
   v-text-field {
-    padding-top: 0px;
+    padding-top: 0;
   }
 </style>
diff --git a/frontend/src/components/submission_type/README.md b/frontend/src/components/submission_type/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..4762ee528e420af5ec2871ba51d2cd702d4e0d44
--- /dev/null
+++ b/frontend/src/components/submission_type/README.md
@@ -0,0 +1,9 @@
+# Submission-Type Components
+
+These components provide functionality around submission types, their description and their displayed solutions.
+
+The components in the `solutuion` subdirectory have functionality for displaying and commenting on submission solutions.
+
+The `SubmissionType.vue` component renders a single submission time along with its description, solution, full score, etc.
+
+The `SubmissionTypesOverview.vue` component renders a list of all currently available submission types
diff --git a/frontend/src/components/subscriptions/README.md b/frontend/src/components/subscriptions/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ef08adaf81902cf6ca379ceec73c3f4b6e3391b
--- /dev/null
+++ b/frontend/src/components/subscriptions/README.md
@@ -0,0 +1,16 @@
+# Subscription Components
+
+These components organize around the subscription logic. A subscription allows the corrector to filter for available
+submissions. In the current state, subscriptions are only used to distinguish between the three different submission
+states, which are `Initial`, `Validate` and `Conflict`.
+
+The `SubscriptionEnded.vue` component has a simple dialog that notices the user that there are no submissions left for
+the currently selected subscription.
+
+The `SubscriptionsForStage.vue` component renders a list of all available subscriptions for a given stage.
+
+The `SubscriptionList.vue` renders a tabbed list that puts the available stages and the `SubscriptionForStage.vue`
+components together
+
+The `SubscriptionForList.vue` component is used to render a single entry in the whole subscription list.
+__