diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index 1bd4455d7..703adc45c 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -1,32 +1,31 @@
 <template>
   <div>
     <ds-container>
-      <ds-form v-model="formData" @submit="submit" :schema="formSchema">
-          <ds-input v-model="name" label="Gruppenname" placeholder="Your name ..."></ds-input>
+      <ds-form @submit="submit">
+        <ds-input v-model="name" label="Gruppenname" placeholder="Your name ..."></ds-input>
 
-          <ds-select
-            icon="user"
-            v-model="status"
-            label="Status"
-            :options="['offen', 'geschlossen', 'geheim']"
-            placeholder="Status ..."
-          ></ds-select>
+        <ds-select
+          icon="user"
+          v-model="status"
+          label="Status"
+          :options="['offen', 'geschlossen', 'geheim']"
+          placeholder="Status ..."
+        ></ds-select>
 
-          <ds-input v-model="description" label="Beschreibung" type="textarea" rows="3"></ds-input>
+        <ds-input v-model="description" label="Beschreibung" type="textarea" rows="3"></ds-input>
 
-           <div>{{name}}</div>
-      <div>{{status}}</div>
-      <div>{{description}}</div>
+        <div>{{ name }}</div>
+        <div>{{ status }}</div>
+        <div>{{ description }}</div>
 
-          <ds-space margin-top="large">
-            <ds-button @click.prevent="reset()">Reset form</ds-button>
-            <ds-button :disabled="disabled" icon="save" primary>Save group</ds-button>
-          </ds-space>
-    
+        <ds-space margin-top="large">
+          <ds-button @click.prevent="reset()">Reset form</ds-button>
+          <ds-button :disabled="disabled" icon="save" primary>Save group</ds-button>
+        </ds-space>
       </ds-form>
       <ds-space centered>
-      <nuxt-link to="/my-groups">zurück</nuxt-link>
-    </ds-space>
+        <nuxt-link to="/my-groups">zurück</nuxt-link>
+      </ds-space>
     </ds-container>
   </div>
 </template>
@@ -44,19 +43,20 @@ export default {
       name: '',
       status: '',
       description: '',
+      disable: false,
     }
   },
- 
+
   methods: {
-  submit() {
-    console.log('handleSubmit')
+    submit() {
+      console.log('handleSubmit')
+    },
+    handleSubmit() {
+      console.log('handleSubmit')
+    },
+    reset() {
+      console.log('handleSubmit')
+    },
   },
-  handleSubmit() {
-    console.log('handleSubmit')
-  },
-  reset() {
-    console.log('handleSubmit')
-  },
- },
 }
 </script>
diff --git a/webapp/components/GroupList/GroupCard.vue b/webapp/components/GroupList/GroupCard.vue
new file mode 100644
index 000000000..4ae9f807f
--- /dev/null
+++ b/webapp/components/GroupList/GroupCard.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <ds-container class="group-card">
+      <ds-space><h2>Group Card</h2></ds-space>
+      <ds-grid>
+        <ds-grid-item v-for="item in items" :key="item.id" :row-span="8">
+        <ds-placeholder>
+        <base-button
+            v-if="item.owner"
+            icon="trash"
+            @click="deleteGroup(item)"
+          ></base-button>
+          <nuxt-link to="/group/g1/testgruppe"> {{ item.name }}</nuxt-link> 
+          <base-button
+            v-if="!item.owner"
+            icon="close"
+            @click="unfollowGroup(item.row)"
+          ></base-button>
+          <nuxt-link :to="{ name: 'group-create' }">
+            <ds-icon v-show="item.owner" name="ellipsis-v"></ds-icon>
+          </nuxt-link>
+          </ds-placeholder>
+        </ds-grid-item>
+      </ds-grid>
+    </ds-container>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'GroupList',
+  props: {
+    items: { type: Array, default: () => [] },
+  },
+  methods: {
+    deleteGroup() {
+      alert('delete group')
+    },
+    unfollowGroup() {
+      alert('unfollow group')
+    },
+  },
+  computed: {
+    status(state) {
+      console.log(state)
+      // if (scope === 'hidden') return 'danger'
+      return 'inverse'
+    },
+  },
+}
+</script>
diff --git a/webapp/components/GroupList/GroupList.vue b/webapp/components/GroupList/GroupList.vue
index bfaceed21..69df8acb7 100644
--- a/webapp/components/GroupList/GroupList.vue
+++ b/webapp/components/GroupList/GroupList.vue
@@ -1,27 +1,58 @@
 <template>
-<div>
-     <ds-container class="group-list">
-         <ds-space><h2>Group List</h2></ds-space>
-           <ds-table :data="items" :fields="fields">
-      <template slot="loves" slot-scope="scope">
-        {{ scope.row.name }} loves {{ scope.row.loves }}
-      </template>
-      <template slot="edit" slot-scope="scope">
-        <ds-button
-          size="small"
-          @click="deleteRow(scope.row)">delete</ds-button>
-      </template>
-    </ds-table>
-     </ds-container>
-</div>
+  <div>
+    <ds-container class="group-list">
+      <ds-space><h2>Group List</h2></ds-space>
+      <ds-table :data="items" :fields="fields">
+        <template slot="delete" slot-scope="scope">
+          <base-button
+            v-if="scope.row.owner"
+            icon="trash"
+            @click="deleteGroup(scope.row)"
+          ></base-button>
+        </template>
+         <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>
+        <template slot="edit" slot-scope="scope">
+          <base-button
+            v-if="!scope.row.owner"
+            icon="close"
+            @click="unfollowGroup(scope.row)"
+          ></base-button>
+
+          <nuxt-link :to="{ name: 'group-create' }">
+            <ds-icon v-show="scope.row.owner" name="ellipsis-v"></ds-icon>
+          </nuxt-link>
+         
+        </template>
+      </ds-table>
+    </ds-container>
+  </div>
 </template>
 <script lang="ts">
-
 export default {
-    name: 'GroupList',
-    props: {
-        items: { type: Array, default: () => [] },
-        fields: { type: Array, default: () => [] }
-    }
+  name: 'GroupList',
+  props: {
+    items: { type: Array, default: () => [] },
+    fields: { type: Array, default: () => [] },
+  },
+  methods: {
+    deleteGroup() {
+      alert('delete group')
+    },
+    unfollowGroup() {
+      alert('unfollow group')
+    },
+  },
+  computed: {
+    status(state) {
+      console.log(state)
+      // if (scope === 'hidden') return 'danger'
+      return 'inverse'
+    },
+  },
 }
 </script>
diff --git a/webapp/components/GroupMember/GroupMember.vue b/webapp/components/GroupMember/GroupMember.vue
new file mode 100644
index 000000000..f83b00685
--- /dev/null
+++ b/webapp/components/GroupMember/GroupMember.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+         <div><ds-space><h3>Link zur Gruppe</h3></ds-space>
+             <ds-space>
+    <ds-copy-field>Copy Link for Invite Member please!</ds-copy-field>
+    </ds-space>
+  </div>
+  <br />
+  <hr />
+  <br />
+  <ds-space><h3>Members</h3></ds-space>
+        <ds-table :data="tableData" :fields="tableFields">
+        <template slot="avatar" >
+        <ds-avatar online size="small" name="Hans Peter"></ds-avatar>
+      </template>
+      <template slot="loves" slot-scope="scope">
+        {{ scope.row.name }} loves {{ scope.row.loves }}
+      </template>
+      <template slot="edit" slot-scope="scope">
+        <ds-button
+          size="small"
+          @click="deleteRow(scope.row)">delete</ds-button>
+      </template>
+    </ds-table>
+    </div>
+</template>
+<script>
+export default {
+   name: 'GroupMember',
+    data() {
+      return {
+        tableFields: ['avatar', 'name', 'type', 'loves', 'edit'],
+        tableData: [
+          {
+            name: 'Rengar',
+            type: 'Jungler',
+            loves: 'Hide and seek'
+          },
+          {
+            name: 'Renekton',
+            type: 'Toplaner',
+            loves: 'Slice and dice'
+          },
+          {
+            name: 'Twitch',
+            type: 'ADC',
+            loves: 'Spray and pray'
+          },
+          {
+            name: 'Blitz',
+            type: 'Support',
+            loves: 'Hook you up'
+          }
+        ]
+      }
+    },
+    methods: {
+      deleteRow(row) {
+        const index = this.tableData.indexOf(row)
+        if (index > -1) {
+          this.tableData.splice(index, 1)
+        }
+      }
+    }  
+    
+}
+</script>
diff --git a/webapp/components/GroupTeaser/GroupTeaser.vue b/webapp/components/GroupTeaser/GroupTeaser.vue
index 22df641e9..33a50dca7 100644
--- a/webapp/components/GroupTeaser/GroupTeaser.vue
+++ b/webapp/components/GroupTeaser/GroupTeaser.vue
@@ -21,9 +21,7 @@
   </div>
 </template>
 <script>
- 
-export default  {
-    name: 'GroupTeaser',
+export default {
+  name: 'GroupTeaser',
 }
 </script>
-
diff --git a/webapp/pages/group/_id.vue b/webapp/pages/group/_id.vue
new file mode 100644
index 000000000..7ce25e827
--- /dev/null
+++ b/webapp/pages/group/_id.vue
@@ -0,0 +1,9 @@
+<template>
+    <div>_id groupe page 
+        <div>{{$route.params}}</div>
+         <nuxt-link :to="{ name: 'group-create' }">
+         bearbeiten
+            <ds-icon name="ellipsis-v"></ds-icon>
+          </nuxt-link>
+    </div>
+</template>
\ No newline at end of file
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
new file mode 100644
index 000000000..36f2ccb2b
--- /dev/null
+++ b/webapp/pages/group/_id/_slug.vue
@@ -0,0 +1,6 @@
+<template>
+<div>
+    <ds-space />
+    Group Page 
+</div>    
+</template>
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 9463083f1..e82fadd6e 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,19 +1,24 @@
 <template>
+  <div>
   <ds-flex :width="{ base: '100%' }" gutter="base">
     <ds-flex-item :width="{ base: '100%', md: 5 }">
       <new-group-form />
     </ds-flex-item>
     <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
   </ds-flex>
+  <hr />
+  <group-member />
+</div>
 </template>
 
-
 <script>
 import NewGroupForm from '~/components/GroupForm/GroupForm'
+import GroupMember from '~/components/GroupMember/GroupMember.vue'
 
 export default {
   components: {
     NewGroupForm,
+    GroupMember,
   },
 }
 </script>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index a861403ed..81843f5d2 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -2,45 +2,65 @@
   <div>
     <div>my groups</div>
     <group-teaser />
-    <group-list :items="items" :fields="fields"/>
+    <group-list :items="items" :fields="fields" />
+    <br />
+    <br />
+    <group-card :items="items" />
   </div>
 </template>
 <script>
 import GroupTeaser from '~/components/GroupTeaser/GroupTeaser.vue'
-import GroupList from  '~/components/GroupList/GroupList.vue'
+import GroupList from '~/components/GroupList/GroupList.vue'
+import GroupCard from '~/components/GroupList/GroupCard.vue'
 
+/*
+ *
+ * gruppen status: { open, close, hidden }
+ *
+ *
+ */
 export default {
   name: 'MyGroups',
   components: {
     GroupTeaser,
-    GroupList
+    GroupList,
+    GroupCard,
   },
   data() {
-      return {
-         fields: ['name', 'type', 'loves', 'edit'],
-        items: [
-          {
-            name: 'Rengar',
-            type: 'Jungler',
-            loves: 'Hide and seek'
-          },
-          {
-            name: 'Renekton',
-            type: 'Toplaner',
-            loves: 'Slice and dice'
-          },
-          {
-            name: 'Twitch',
-            type: 'ADC',
-            loves: 'Spray and pray'
-          },
-          {
-            name: 'Blitz',
-            type: 'Support',
-            loves: 'Hook you up'
-          }
-        ]
-      }
+    return {
+      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,
+        },
+      ],
     }
+  },
 }
 </script>