diff --git a/admin/src/ContributionLinks.json b/admin/src/ContributionLinks.json
deleted file mode 100644
index 55cac89bf..000000000
--- a/admin/src/ContributionLinks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "fields": ["Name", "Text", "GDD", "startDate", "endDate", "delete", "edit", "show"],
-  "ContributionLinks":[
-    {"Name":"John1", "Text":"Doe1 ", "GDD":"200", "startDate":"", "endDate":""},
-    {"Name":"John2", "Text":"Doe2", "GDD":"300", "startDate":"", "endDate":""},
-    {"Name":"John3", "Text":"Doe3", "GDD":"400", "startDate":"", "endDate":""}
-  ]
-}
\ No newline at end of file
diff --git a/admin/src/components/AutomaticCreation.vue b/admin/src/components/AutomaticCreation.vue
new file mode 100644
index 000000000..0d087c233
--- /dev/null
+++ b/admin/src/components/AutomaticCreation.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <b-card
+      v-show="items.length > 1"
+      border-variant="success"
+      header="open Contribution"
+      header-bg-variant="success"
+      header-text-variant="white"
+      class="mt-5"
+    >
+      <b-button v-b-toggle.newContribution class="my-3">+ New Contribution</b-button>
+
+      <b-collapse id="newContribution" class="mt-2">
+        <b-card>
+          <p class="h2 ml-5">New Contribution</p>
+          <automatic-creation-form />
+        </b-card>
+      </b-collapse>
+
+      <b-card-text>
+        <automatic-creation-list :items="items" />
+      </b-card-text>
+    </b-card>
+  </div>
+</template>
+<script>
+import AutomaticCreationForm from './AutomaticCreationForm.vue'
+import AutomaticCreationList from './AutomaticCreationList.vue'
+
+export default {
+  name: 'AutomaticCreation',
+  props: {
+    items: { type: Array },
+  },
+  components: {
+    AutomaticCreationForm,
+    AutomaticCreationList,
+  },
+}
+</script>
diff --git a/admin/src/components/AutomaticCreationForm.vue b/admin/src/components/AutomaticCreationForm.vue
new file mode 100644
index 000000000..543995ea9
--- /dev/null
+++ b/admin/src/components/AutomaticCreationForm.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <b-form class="m-5" @submit="onSubmit">
+      <b-form-group id="input-group-1" label="Name:">
+        <b-form-input
+          v-model="form.name"
+          type="text"
+          placeholder="Name Contribution"
+          required
+        ></b-form-input>
+      </b-form-group>
+      <b-form-group id="input-group-2" label="Beschreibung:">
+        <b-form-textarea
+          v-model="form.text"
+          placeholder="Text Contribution"
+          required
+        ></b-form-textarea>
+      </b-form-group>
+      <b-form-group id="input-group-3" label="Betrag:">
+        <b-form-input v-model="form.amount" type="number" placeholder="0" required></b-form-input>
+      </b-form-group>
+      <div>
+        <b-form-group id="input-group-4" label="Start-Datum:">
+          <b-form-datepicker
+            v-model="form.startDate"
+            :min="min"
+            class="mb-4"
+            required
+          ></b-form-datepicker>
+        </b-form-group>
+
+        <label for="datepicker-invalid">End-Datum</label>
+        <b-form-datepicker
+          v-model="form.endDate"
+          :min="form.startDate ? form.startDate : min"
+          class="mb-4"
+          required
+        ></b-form-datepicker>
+      </div>
+      <div class="mt-6">
+        <b-button type="submit" variant="primary">Anlegen</b-button>
+        <b-button type="reset" variant="danger">Reset</b-button>
+      </div>
+    </b-form>
+  </div>
+</template>
+<script>
+export default {
+  name: 'AutomaticCreationForm',
+  data() {
+    return {
+      form: {
+        name: null,
+        text: null,
+        amount: null,
+        startDate: null,
+        endDate: null,
+      },
+      min: new Date(),
+    }
+  },
+  methods: {
+    onSubmit(event) {
+      event.preventDefault()
+      if (this.form.name === null || this.form.text === null) return
+      alert(JSON.stringify(this.form))
+    },
+  },
+}
+</script>
diff --git a/admin/src/components/AutomaticCreationList.vue b/admin/src/components/AutomaticCreationList.vue
new file mode 100644
index 000000000..7094f1b68
--- /dev/null
+++ b/admin/src/components/AutomaticCreationList.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <b-table striped hover :items="items" :fields="fields">
+      <template #cell(delete)>
+        <b-button variant="danger" size="md" class="mr-2">
+          <b-icon icon="trash" variant="light"></b-icon>
+        </b-button>
+      </template>
+      <template #cell(edit)>
+        <b-button variant="success" size="md" class="mr-2">
+          <b-icon icon="pencil" variant="light"></b-icon>
+        </b-button>
+      </template>
+      <template #cell(show)>
+        <b-button variant="info" size="md" class="mr-2">
+          <b-icon icon="eye" variant="light"></b-icon>
+        </b-button>
+      </template>
+    </b-table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'AutomaticCreationList',
+  props: {
+    items: { type: Array },
+  },
+  data() {
+    return {
+      fields: ['Name', 'Text', 'GDD', 'startDate', 'endDate', 'delete', 'edit', 'show'],
+    }
+  },
+}
+</script>
diff --git a/admin/src/components/ContributionsForm.vue b/admin/src/components/ContributionsForm.vue
new file mode 100644
index 000000000..ec59f8a78
--- /dev/null
+++ b/admin/src/components/ContributionsForm.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <b-form class="m-5" @submit="onSubmit">
+      <validation-provider name="Name" :rules="{ required: true, min: 3 }">
+        <b-form-group id="input-group-1" label="Name:">
+          <b-form-input
+            v-model="form.name"
+            type="text"
+            placeholder="Name Contribution"
+            required
+          ></b-form-input>
+        </b-form-group>
+      </validation-provider>
+      <b-form-group id="input-group-2" label="Beschreibung:">
+        <b-form-textarea
+          v-model="form.text"
+          placeholder="Text Contribution"
+          required
+        ></b-form-textarea>
+      </b-form-group>
+      <b-form-group id="input-group-3" label="Betrag:">
+        <b-form-input v-model="form.amount" type="number" placeholder="0" required></b-form-input>
+      </b-form-group>
+      <div>
+        <b-form-group id="input-group-4" label="Start-Datum:">
+          <b-form-datepicker
+            v-model="form.startDate"
+            :min="min"
+            class="mb-4"
+            required
+          ></b-form-datepicker>
+        </b-form-group>
+
+        <label for="datepicker-invalid">End-Datum</label>
+        <b-form-datepicker
+          v-model="form.endDate"
+          :min="form.startDate ? form.startDate : min"
+          class="mb-4"
+          required
+        ></b-form-datepicker>
+      </div>
+      <div class="mt-6">
+        <b-button type="submit" variant="primary">Anlegen</b-button>
+        <b-button type="reset" variant="danger">Reset</b-button>
+      </div>
+    </b-form>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ContributionsForm',
+}
+</script>
diff --git a/admin/src/pages/Overview.vue b/admin/src/pages/Overview.vue
index 590089e54..edfd12686 100644
--- a/admin/src/pages/Overview.vue
+++ b/admin/src/pages/Overview.vue
@@ -28,121 +28,28 @@
         </b-link>
       </b-card-text>
     </b-card>
-    <div>{{ ContributionLinks }}</div>
-
-    <b-card
-      v-show="items.length > 1"
-      border-variant="success"
-      header="open Contribution"
-      header-bg-variant="success"
-      header-text-variant="white"
-      class="mt-5"
-    >
-      <b-button v-b-toggle.newContribution class="my-3">+ New Contribution</b-button>
-
-      <b-collapse id="newContribution" class="mt-2">
-        <b-card>
-          <p class="h2 ml-5">New Contribution</p>
-          <b-form class="m-5" @submit="onSubmit">
-            <validation-provider name="Name" :rules="{ required: true, min: 3 }">
-              <b-form-group id="input-group-1" label="Name:">
-                <b-form-input
-                  v-model="form.name"
-                  type="text"
-                  placeholder="Name Contribution"
-                  required
-                ></b-form-input>
-              </b-form-group>
-            </validation-provider>
-            <b-form-group id="input-group-2" label="Beschreibung:">
-              <b-form-textarea
-                v-model="form.text"
-                placeholder="Text Contribution"
-                required
-              ></b-form-textarea>
-            </b-form-group>
-            <b-form-group id="input-group-3" label="Betrag:">
-              <b-form-input
-                v-model="form.amount"
-                type="number"
-                placeholder="0"
-                required
-              ></b-form-input>
-            </b-form-group>
-            <div>
-              <b-form-group id="input-group-4" label="Start-Datum:">
-                <b-form-datepicker
-                  v-model="form.startDate"
-                  :min="min"
-                  class="mb-4"
-                  required
-                ></b-form-datepicker>
-              </b-form-group>
-
-              <label for="datepicker-invalid">End-Datum</label>
-              <b-form-datepicker
-                v-model="form.endDate"
-                :min="form.startDate ? form.startDate : min"
-                class="mb-4"
-                required
-              ></b-form-datepicker>
-            </div>
-            <div class="mt-6">
-              <b-button type="submit" variant="primary">Anlegen</b-button>
-              <b-button type="reset" variant="danger">Reset</b-button>
-            </div>
-          </b-form>
-        </b-card>
-      </b-collapse>
-
-      <b-card-text>
-        <b-table striped hover :items="items" :fields="fields">
-          <template #cell(delete)>
-            <b-button variant="danger" size="md" class="mr-2">
-              <b-icon icon="trash" variant="light"></b-icon>
-            </b-button>
-          </template>
-          <template #cell(edit)>
-            <b-button variant="success" size="md" class="mr-2">
-              <b-icon icon="pencil" variant="light"></b-icon>
-            </b-button>
-          </template>
-          <template #cell(show)>
-            <b-button variant="info" size="md" class="mr-2">
-              <b-icon icon="eye" variant="light"></b-icon>
-            </b-button>
-          </template>
-        </b-table>
-      </b-card-text>
-    </b-card>
+    <automatic-creation :items="items" />
   </div>
 </template>
 <script>
 import { getPendingCreations } from '../graphql/getPendingCreations'
-import { fields, ContributionLinks } from '../ContributionLinks.json'
+import AutomaticCreation from '../components/AutomaticCreation.vue'
 
 export default {
   name: 'overview',
+  components: {
+    AutomaticCreation,
+  },
   data() {
     return {
-      fields: fields,
-      items: ContributionLinks,
-      form: {
-        name: null,
-        text: null,
-        amount: null,
-        startDate: null,
-        endDate: null,
-      },
-      min: new Date(),
+      items: [
+        { Name: 'John1', Text: 'Doe1 ', GDD: '200', startDate: '', endDate: '' },
+        { Name: 'John2', Text: 'Doe2', GDD: '300', startDate: '', endDate: '' },
+        { Name: 'John3', Text: 'Doe3', GDD: '400', startDate: '', endDate: '' },
+      ],
     }
   },
   methods: {
-    onSubmit(event) {
-      event.preventDefault()
-      if (this.form.name === null || this.form.text === null) return
-      alert(JSON.stringify(this.form))
-    },
     async getPendingCreations() {
       this.$apollo
         .query({