diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index d52fea0c4..41348278e 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -17,7 +17,7 @@
         <ds-select
           icon="user"
           v-model="formData.status"
-          label="Status"
+          label="Sichtbarkeit"
           :options="['offen', 'geschlossen', 'geheim']"
           placeholder="Status ..."
         ></ds-select>
diff --git a/webapp/components/GroupList/GroupList.vue b/webapp/components/GroupList/GroupList.vue
index d16b208de..5d98ed182 100644
--- a/webapp/components/GroupList/GroupList.vue
+++ b/webapp/components/GroupList/GroupList.vue
@@ -2,6 +2,7 @@
   <div>
     <ds-container class="group-list">
       <ds-space><h2>Group List</h2></ds-space>
+      {{items}}
       <ds-table :data="items" :fields="fields">
         <template slot="delete" slot-scope="scope">
           <base-button
@@ -13,8 +14,8 @@
         <template slot="name" slot-scope="scope">
           <nuxt-link to="/group/g1/testgruppe">{{ scope.row.name }}</nuxt-link>
         </template>
-        <template slot="status" slot-scope="scope">
-          <ds-tag :color="status">{{ scope.row.status }}</ds-tag>
+        <template slot="categories" slot-scope="scope">
+          <ds-tag v-for="categorie in categories" :key="categorie.id" :color="status">{{ categorie.name }}</ds-tag>
         </template>
         <template slot="edit" slot-scope="scope">
           <base-button
@@ -46,12 +47,6 @@ export default {
       alert('unfollow group')
     },
   },
-  computed: {
-    status(state) {
-      console.log(state)
-      // if (scope === 'hidden') return 'danger'
-      return 'inverse'
-    },
-  },
+  computed: {},
 }
 </script>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 7095289fd..22b8df4e2 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -2,10 +2,10 @@
   <div>
     <div>my groups</div>
     <group-teaser />
-    <group-list :items="items" :fields="fields" />
+    <group-list :items="responseGroupListQuery" :fields="fields" />
     <br />
     <br />
-    <group-card :items="items" :responseGroupListQuery="responseGroupListQuery" />
+    <group-card :items="responseGroupListQuery" />
   </div>
 </template>
 <script>
@@ -30,38 +30,7 @@ export default {
   data() {
     return {
       responseGroupListQuery: [],
-      fields: ['delete', 'name', 'desc', 'status', 'edit'],
-      items: [
-        {
-          id: 0,
-          name: 'Rengar',
-          desc: 'Rengar Jungler Rengar Jungler Rengar Jungler Rengar Jungler Rengar Jungler ',
-          status: 'open',
-          owner: true,
-        },
-        {
-          id: 1,
-          name: 'Renekton',
-          desc:
-            'Renekton Toplaner Renekton Toplaner Renekton Toplaner Renekton Toplaner Renekton Toplaner ',
-          status: 'open',
-          owner: false,
-        },
-        {
-          id: 2,
-          name: 'Twitch',
-          desc: 'Twitch ADC',
-          status: 'close',
-          owner: true,
-        },
-        {
-          id: 3,
-          name: 'Blitz',
-          desc: 'Blitz Support',
-          status: 'hidden',
-          owner: true,
-        },
-      ],
+      fields: ['delete', 'name', 'about', 'categories', 'edit'],
     }
   },
   methods: {
@@ -70,7 +39,7 @@ export default {
         const response = await this.$apollo.query({
           query: groupQuery,
         })
-        this.responseGroupListQuery = response.data
+        this.responseGroupListQuery = response.data.Group
       } catch (error) {
         this.responseGroupListQuery = []
       } finally {