diff --git a/client/src/components/CollectQuotes.vue b/client/src/components/CollectQuotes.vue
index 2489820..38c87bf 100644
--- a/client/src/components/CollectQuotes.vue
+++ b/client/src/components/CollectQuotes.vue
@@ -1,18 +1,6 @@
 <template>
   <div class="collect-quotes">
-    <div class="collect-quotes__explain">
-      <p>collecting ...</p>
-    </div>
-    <div class="collect-quotes__example-title">
-      Beispiel:
-    </div>
-    <div class="collect-quotes__example-container">
-      <transition name="collect-quotes-fade" mode="out-in">
-        <div class="collect-quotes__example-text" :key="quoteNr">
-          {{ exampleQuotes[quoteNr] }}
-        </div>
-      </transition>
-    </div>
+    <CollectQuotesExplain />
     <div class="collect-quotes__list" v-for="quote in quotes" :key="quote.id">
       <div class="collect-quotes__quote">
         {{ quote.quote }}
@@ -28,19 +16,6 @@
 <script>
 
 export default {
-  data() {
-    return {
-      quoteNr: 0,
-      exampleQuotes: [
-        'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.',
-        'Ich mag jede Nudelsorte ausser Spaghetti, die kann ich nicht ausstehen.',
-        'Zuerst wollte ich Baugestaltung und Architekturgeschichte studieren. Der Studiengang war aber so voll, dass ich mich nach nur 3 Vorlesungen umentschieden und statt dessen Informatik studiert habe.',
-        'Nach dem Abi habe ich fast ein Jahr lang in einer Tierarztpraxis gejobbt.',
-        'Ich habe drei Mal meinem/meiner Partner:in zuliebe angefangen, "Herr der Ringe" zu schauen und bin jedes Mal dabei dabei eingeschlafen.',
-        'Ich habe vier Meerschweinchen: Tick, Trick, Track und Alfred.',
-      ],
-    }
-  },
   computed: {
     quotes() {
       return this.$store.state.myQuotes.quotes
@@ -49,61 +24,11 @@ export default {
   async fetch() {
     await this.$engine.getMyQuotes()
   },
-  beforeMount() {
-    this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
-    this.timer = window.setInterval(function() {
-      this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
-    }.bind(this), 15000)
-  },
-  beforeDestroy() {
-    window.clearInterval(this.timer)
-  },
 }
 </script>
 
 <style lang="scss">
 .collect-quotes {
-
-  &__example {
-
-    &-title {
-      margin: 20px 80px;
-      font-family: 'Wendy One';
-      color: #ffffff;
-    }
-
-    &-container {
-      display: flex;
-      margin: 20px 80px;
-      height: 120px;
-      padding: 0 20px;
-      border: 1px solid white;
-      border-radius: 20px;
-      background-color: #6040c0;
-      align-items: center;
-    }
-    &-text {
-      text-align: justify;
-      font-family: Dosis;
-      font-size: 24px;
-      color: #ffffff;
-
-      &:before {
-        content: '„';
-      }
-      &:after {
-        content: '“';
-      }
-    }
-  }
+  color: #ffc0c0;
 }
-.collect-quotes-fade-enter-active,
-.collect-quotes-fade-leave-active {
-  transition: all 0.4s ease;
-}
-.collect-quotes-fade-enter,
-.collect-quotes-fade-leave-to {
-  opacity: 0;
-}
-
 </style>
diff --git a/client/src/components/CollectQuotesExplain.vue b/client/src/components/CollectQuotesExplain.vue
new file mode 100644
index 0000000..46f7c57
--- /dev/null
+++ b/client/src/components/CollectQuotesExplain.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="collect-quotes-explain">
+    <div class="collect-quotes-explain__container">
+      <div class="collect-quotes-explain__explain">
+        <p>
+          Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
+          Mitspielenden Statements gesammelt. In der zweiten Phase versucht
+          man, die Statements den richtigen Personen zuzuordnen. Wir befinden
+          uns in der ersten Phase.
+        </p>
+        <p>
+          Schreibe in 3-5 einzelnen Statements etwas über dich.
+        </p>
+      </div>
+      <div class="collect-quotes-explain__example-title">
+        Beispiel:
+      </div>
+      <div class="collect-quotes-explain__example-container">
+        <transition name="collect-quotes-explain-fade" mode="out-in">
+          <div class="collect-quotes-explain__example-text" :key="quoteNr">
+            {{ exampleQuotes[quoteNr] }}
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      quoteNr: 0,
+      exampleQuotes: [
+        'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.',
+        'Ich mag jede Nudelsorte ausser Spaghetti, die kann ich nicht ausstehen.',
+        'Etwa 5 Jahre lang habe ich Kontrabass im Jugendorchester gespielt.',
+        'Zuerst wollte ich Baugestaltung und Architekturgeschichte studieren. Der Studiengang war aber so voll, dass ich mich nach nur 3 Vorlesungen umentschieden und statt dessen Informatik studiert habe.',
+        'Nach dem Abi habe ich fast ein Jahr lang in einer Tierarztpraxis gejobbt.',
+        'Ich habe drei Mal meinem/meiner Partner:in zuliebe angefangen, "Herr der Ringe" zu schauen und bin jedes Mal dabei dabei eingeschlafen.',
+        'Ich habe vier Meerschweinchen: Tick, Trick, Track und Alfred.',
+      ],
+    }
+  },
+  beforeMount() {
+    this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
+    this.timer = window.setInterval(function() {
+      this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
+    }.bind(this), 15000)
+  },
+  beforeDestroy() {
+    window.clearInterval(this.timer)
+  },
+}
+</script>
+
+<style lang="scss">
+.collect-quotes-explain {
+
+  &__container {
+    margin: 20px 80px;
+    padding: 0 20px;
+    border: 1px solid white;
+    border-radius: 20px;
+    background-color: #6040c0;
+  }
+
+  &__explain {
+    font-size: 24px;
+    font-family: "Wendy One";
+    color: #ffffff;
+  }
+
+  &__example {
+    &-title {
+      font-family: "Wendy One";
+      color: #ffffff;
+    }
+
+    &-container {
+      height: 120px;
+    }
+    &-text {
+      font-family: Dosis;
+      font-size: 24px;
+      color: #ffffff;
+
+      &:before {
+        content: '„';
+      }
+      &:after {
+        content: '“';
+      }
+    }
+  }
+}
+.collect-quotes-explain-fade-enter-active,
+.collect-quotes-explain-fade-leave-active {
+  transition: all 0.4s ease;
+}
+.collect-quotes-explain-fade-enter,
+.collect-quotes-explain-fade-leave-to {
+  opacity: 0;
+}
+
+</style>