diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 7618e5b57..dbde61ac6 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,9 +1,14 @@
 <template>
-  <div class="group-list">
-    <ds-space margin-bottom="small" v-for="group in groups" :key="group.id">
+  <ds-flex class="group-list">
+    <ds-flex-item
+      v-for="group in groups"
+      :key="group.id"
+      :width="{ base: '98%', sm: '98%', md: '48%' }"
+      class="group-item"
+    >
       <group-teaser :group="group" />
-    </ds-space>
-  </div>
+    </ds-flex-item>
+  </ds-flex>
 </template>
 
 <script>
@@ -19,3 +24,8 @@ export default {
   },
 }
 </script>
+<style lang="scss" scoped>
+.group-item {
+  margin: 0 1% 2% 1%;
+}
+</style>
diff --git a/webapp/pages/groups.vue b/webapp/pages/groups.vue
index 386905c5b..6b895de72 100644
--- a/webapp/pages/groups.vue
+++ b/webapp/pages/groups.vue
@@ -4,7 +4,7 @@
       <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
     </ds-space>
     <ds-space margin="large" />
-    <ds-container>
+    <ds-space>
       <!-- create group -->
       <ds-space centered>
         <nuxt-link :to="{ name: 'group-create' }">
@@ -49,7 +49,7 @@
           @next="nextResults"
         />
       </ds-space>
-    </ds-container>
+    </ds-space>
   </div>
 </template>
 
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index bb6eff0f4..0094f5706 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -346,7 +346,7 @@ export default {
   position: fixed;
   z-index: 6;
   margin-top: -35px;
-  padding: 20px 10px 5px 10px;
+  padding: 20px 10px 20px 10px;
   background-color: #f5f4f6;
 }
 @media screen and (max-width: 656px) {