diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 733258372..2be4b51dd 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,3 +1,5 @@
+<!-- You can find the latest issue templates here https://github.com/ulfgebhardt/issue-templates -->
+
 <!--
 Please take a look at the issue templates at https://github.com/Ocelot-Social-Community/Ocelot-Social/issues/new/choose
 before submitting a new issue. Following one of the issue templates will ensure maintainers can route your request efficiently.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 595c9d584..bd02cfe22 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,9 +1,10 @@
 ---
-name: 🐛 Bug Report
-about: Create a report to help us to improve.
+name: 🐛 Bug report
+about: Create a report to help us improve
 labels: bug
 title: 🐛 [Bug] 
 ---
+<!-- You can find the latest issue templates here https://github.com/ulfgebhardt/issue-templates -->
 
-## :bug: Bug Report
+## 🐛 Bugreport
 <!-- Describe your issue in detail. Include screenshots if needed. Give us as much information as possible. Use a clear and concise description of what the bug is.-->
diff --git a/.github/ISSUE_TEMPLATE/devops_ticket.md b/.github/ISSUE_TEMPLATE/devops_ticket.md
index 115664911..981d0fdd6 100644
--- a/.github/ISSUE_TEMPLATE/devops_ticket.md
+++ b/.github/ISSUE_TEMPLATE/devops_ticket.md
@@ -1,9 +1,10 @@
 ---
-name: 💥 DevOps Ticket
-about: Help us manage our deployed app.
+name: 💥 DevOps ticket
+about: Help us manage our deployed Software.
 labels: devops
 title: 💥 [DevOps]
 ---
+<!-- You can find the latest issue templates here https://github.com/ulfgebhardt/issue-templates -->
 
-## 💥 DevOps Ticket
+## 💥 DevOps ticket
 <!-- Describe your issue in detail. Include screenshots if needed. Give us as much information as possible. Use a clear and concise description of what the problem is.-->
diff --git a/.github/ISSUE_TEMPLATE/epic.md b/.github/ISSUE_TEMPLATE/epic.md
index cf72cd673..af511e6e2 100644
--- a/.github/ISSUE_TEMPLATE/epic.md
+++ b/.github/ISSUE_TEMPLATE/epic.md
@@ -1,12 +1,13 @@
 ---
 name: 🌟 Epic
-about: Define a big development step.
+about: Define a big development Step
 labels: epic
 title: 🌟 [EPIC] 
 ---
+<!-- You can find the latest issue templates here https://github.com/ulfgebhardt/issue-templates -->
+
 <!-- THIS ISSUE-TYPE IS NOT FOR YOU! -->
-<!-- If you need an answer right away, visit the ocelot.social Discord:
-https://discord.gg/AJSX9DCSUA -->
+<!-- Proceed only if you know what you are doing - have a chat with Project's Team first -->
 
 ## 🌟 EPIC
 <!-- Describe your Epic in detail. Include screenshots and drawings -->
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index beae80901..f313740a5 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,9 +1,10 @@
 ---
-name: 🚀 Feature Request
-about: Suggest an idea for this project.
+name: 🚀 Feature request
+about: Suggest an idea for this project
 labels: feature
 title: 🚀 [Feature] 
 ---
+<!-- You can find the latest issue templates here https://github.com/ulfgebhardt/issue-templates -->
 
-## :rocket: Feature Request
+## 🚀 Feature
 <!-- Give a short summary of the Feature. Use Screenshots if you want. -->
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
index 40e6e381b..b57adcd06 100644
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@@ -1,12 +1,13 @@
 ---
 name: 💬 Question
-about: If you need help understanding ocelot.social.
+about: If you need help understanding our Software.
 labels: question
 title: 💬 [Question] 
 ---
-<!-- Chat with ocelot.social team -->
-<!-- If you need an answer right away, visit the ocelot.social Discord:
-https://discord.gg/AJSX9DCSUA -->
+<!-- You can find the latest issue templates here https://github.com/ulfgebhardt/issue-templates -->
+
+<!-- Question the project's team -->
+<!-- If you need an answer right away, consider to take other means of communication with the project's team -->
 
 ## 💬 Question
 <!-- Describe your Question in detail. Include screenshots and drawings if needed. -->
diff --git a/.github/ISSUE_TEMPLATE/refactor_tickets.md b/.github/ISSUE_TEMPLATE/refactor_ticket.md
similarity index 64%
rename from .github/ISSUE_TEMPLATE/refactor_tickets.md
rename to .github/ISSUE_TEMPLATE/refactor_ticket.md
index d1841e35e..b75f7b5fc 100644
--- a/.github/ISSUE_TEMPLATE/refactor_tickets.md
+++ b/.github/ISSUE_TEMPLATE/refactor_ticket.md
@@ -1,10 +1,10 @@
 ---
-name: 🔧 Refactor
+name: 🔧 Refactor ticket
 about: Help us improve our code by refactoring it.
 labels: refactor
 title: 🔧 [Refactor]
 ---
+<!-- You can find the latest issue templates here https://github.com/ulfgebhardt/issue-templates -->
 
-## 🔧 Refactor
+## 🔧 Refactor ticket
 <!-- Describe your issue in detail. Include screenshots if needed. Give us as much information as possible. Use a clear and concise description of what the problem is.-->
-
diff --git a/.github/ISSUE_TEMPLATE/release.md b/.github/ISSUE_TEMPLATE/release.md
new file mode 100644
index 000000000..c9f4b787d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/release.md
@@ -0,0 +1,13 @@
+---
+name: 🎂 Release
+about: Define a Release
+labels: release
+title: 🎂 [RELEASE] 
+---
+<!-- You can find the latest issue templates here https://github.com/ulfgebhardt/issue-templates -->
+
+<!-- THIS ISSUE-TYPE IS NOT FOR YOU! -->
+<!-- Proceed only if you know what you are doing - have a chat with Project's Team first -->
+
+## 🎂 RELEASE
+<!-- Describe your Release in detail. Include screenshots and drawings -->
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 6cfe4c30c..d40a2770a 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,3 +1,5 @@
+<!-- You can find the latest issue templates here https://github.com/ulfgebhardt/issue-templates -->
+
 ## 🍰 Pullrequest
 <!-- Describe the Pullrequest. Use Screenshots if possible. -->
 
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 1c7927665..2a2e73dc6 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -4,7 +4,9 @@ on:
   push:
     branches:
       - master
-      # - 4451-new-deployment-with-base-and-code # for testing while developing
+      # - 5059-epic-groups # for testing while developing
+      # template branches in repo
+      # - template--separate-branch-auto-deployment--5059-epic-groups
 
 jobs:
   ##############################################################################
@@ -56,9 +58,9 @@ jobs:
       # NEO4J ##################################################################
       ##########################################################################
       - name: Neo4J | Build `community` image
-        run: docker build --target community -t "ocelotsocialnetwork/neo4j:latest" -t "ocelotsocialnetwork/neo4j:community" -t "ocelotsocialnetwork/neo4j:${VERSION}" -t "ocelotsocialnetwork/neo4j:${BUILD_VERSION}" --build-arg BBUILD_DATE=$BUILD_DATE --build-arg BBUILD_VERSION=$BUILD_VERSION --build-arg BBUILD_COMMIT=$BUILD_COMMIT neo4j/
+        run: docker build --target community -t "ocelotsocialnetwork/neo4j-community:latest" -t "ocelotsocialnetwork/neo4j-community:${VERSION}" -t "ocelotsocialnetwork/neo4j-community:${BUILD_VERSION}" --build-arg BBUILD_DATE=$BUILD_DATE --build-arg BBUILD_VERSION=$BUILD_VERSION --build-arg BBUILD_COMMIT=$BUILD_COMMIT neo4j/
       - name: Neo4J | Save docker image 
-        run: docker save "ocelotsocialnetwork/neo4j" > /tmp/neo4j.tar
+        run: docker save "ocelotsocialnetwork/neo4j-community" > /tmp/neo4j.tar
       - name: Upload Artifact
         uses: actions/upload-artifact@v2
         with:
@@ -238,7 +240,7 @@ jobs:
       - name: login to dockerhub
         run: echo "${DOCKERHUB_TOKEN}" | docker login -u "${DOCKERHUB_USERNAME}" --password-stdin
       - name: Push neo4j
-        run: docker push --all-tags ocelotsocialnetwork/neo4j
+        run: docker push --all-tags ocelotsocialnetwork/neo4j-community
       - name: Push backend
         run: docker push --all-tags ocelotsocialnetwork/backend
       - name: Push webapp
@@ -246,6 +248,81 @@ jobs:
       - name: Push maintenance
         run: docker push --all-tags ocelotsocialnetwork/maintenance
 
+  ##############################################################################
+  # JOB: KUBERNETES DEPLOY ACTUAL/LATEST VERSION ######################################
+  ##############################################################################
+  kubernetes_deploy:
+    # see example https://github.com/do-community/example-doctl-action
+    # see example https://github.com/do-community/example-doctl-action/blob/main/.github/workflows/workflow.yaml
+    name: Kubernetes deploy of latest version to stage.ocelot.social cluster at DigitalOcean
+    runs-on: ubuntu-latest
+    needs: [upload_to_dockerhub]
+    steps:
+      ##########################################################################
+      # CHECKOUT CODE ##########################################################
+      ##########################################################################
+      - name: Checkout code
+        uses: actions/checkout@v2
+      ##########################################################################
+      # SET ENVS ###############################################################
+      ##########################################################################
+      - name: ENV - VERSION
+        run: echo "VERSION=$(node -p -e "require('./package.json').version")" >> $GITHUB_ENV
+      - name: ENV - BUILD_VERSION
+        run: echo "BUILD_VERSION=${VERSION}-${GITHUB_RUN_NUMBER}" >> $GITHUB_ENV
+      ##########################################################################
+      # Install DigitalOceans doctl and set kubeconfig #########################
+      ##########################################################################
+      - name: Install doctl
+        uses: digitalocean/action-doctl@v2
+        with:
+          token: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}
+      - name: Save DigitalOcean kubeconfig with short-lived credentials
+        run: doctl kubernetes cluster kubeconfig save --expiry-seconds 600 cluster-stage-ocelot-social
+      ##########################################################################
+      # Deploy new Docker images to DigitalOcean Kubernetes cluster ############
+      ##########################################################################
+      # - name: Deploy 'latest' to DigitalOcean Kubernetes
+      #   run: |
+      #     kubectl -n default set image deployment/ocelot-webapp container-ocelot-webapp=ocelotsocialnetwork/webapp:latest
+      #     kubectl -n default rollout restart deployment/ocelot-webapp
+      #     kubectl -n default set image deployment/ocelot-backend container-ocelot-backend=ocelotsocialnetwork/backend:latest
+      #     kubectl -n default rollout restart deployment/ocelot-backend
+      #     kubectl -n default set image deployment/ocelot-maintenance container-ocelot-maintenance=ocelotsocialnetwork/maintenance:latest
+      #     kubectl -n default rollout restart deployment/ocelot-maintenance
+      #     kubectl -n default set image deployment/ocelot-neo4j container-ocelot-neo4j=ocelotsocialnetwork/neo4j-community:latest
+      #     kubectl -n default rollout restart deployment/ocelot-neo4j
+      - name: Deploy actual version '$BUILD_VERSION' to DigitalOcean Kubernetes
+        run: |
+          kubectl -n default set image deployment/ocelot-webapp container-ocelot-webapp=ocelotsocialnetwork/webapp:$BUILD_VERSION
+          kubectl -n default rollout restart deployment/ocelot-webapp
+          kubectl -n default set image deployment/ocelot-backend container-ocelot-backend=ocelotsocialnetwork/backend:$BUILD_VERSION
+          kubectl -n default rollout restart deployment/ocelot-backend
+          kubectl -n default set image deployment/ocelot-maintenance container-ocelot-maintenance=ocelotsocialnetwork/maintenance:$BUILD_VERSION
+          kubectl -n default rollout restart deployment/ocelot-maintenance
+          kubectl -n default set image deployment/ocelot-neo4j container-ocelot-neo4j=ocelotsocialnetwork/neo4j-community:$BUILD_VERSION
+          kubectl -n default rollout restart deployment/ocelot-neo4j
+      # because this step 'kubectl -n default rollout status deployment/* --timeout=600s' does not work as expected
+      #   and we need the pods to be up again for cleaning and seeding the Neo4j database and the backend.
+      #   !!! this is not a perfect solution !!!
+      # deployments are regularly up again after 3 minutes and 10 seconds
+      - name: Sleep for 4 minutes, means 240 seconds
+        run: sleep 240s
+        shell: bash
+      - name: Verify deployment and wait for the pods of each deployment to get ready for cleaning and seeding of the database
+        run: |
+          kubectl -n default rollout status deployment/ocelot-backend --timeout=600s
+          kubectl -n default rollout status deployment/ocelot-neo4j --timeout=600s
+          kubectl -n default rollout status deployment/ocelot-maintenance --timeout=600s
+          kubectl -n default rollout status deployment/ocelot-webapp --timeout=600s
+      - name: Run migrations for Neo4j database via backend for staging
+        run: |
+          kubectl -n default exec -it $(kubectl -n default get pods | grep ocelot-backend | awk '{ print $1 }') -- /bin/sh -c "yarn prod:migrate up"
+      - name: Reset and seed Neo4j database via backend for staging
+        # db cleaning and seeding is only possible in production if env 'PRODUCTION_DB_CLEAN_ALLOW=true' is set in deployment
+        run: |
+          kubectl -n default exec -it $(kubectl -n default get pods | grep ocelot-backend | awk '{ print $1 }') -- /bin/sh -c "node --experimental-repl-await dist/db/clean.js && node --experimental-repl-await dist/db/seed.js"
+
   ##############################################################################
   # JOB: GITHUB TAG LATEST VERSION #############################################
   ##############################################################################
@@ -313,4 +390,4 @@ jobs:
           release_name: ${{ env.VERSION }}
           body_path: ./CHANGELOG.md
           draft: false
-          prerelease: false
\ No newline at end of file
+          prerelease: false
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 5dd385ad8..4b310a20b 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -43,8 +43,8 @@ jobs:
       ##########################################################################
       - name: Neo4J | Build `community` image
         run: |
-          docker build --target community -t "ocelotsocialnetwork/neo4j:community" neo4j/
-          docker save "ocelotsocialnetwork/neo4j:community" > /tmp/neo4j.tar
+          docker build --target community -t "ocelotsocialnetwork/neo4j-community:test" neo4j/
+          docker save "ocelotsocialnetwork/neo4j-community:test" > /tmp/neo4j.tar
       - name: Upload Artifact
         uses: actions/upload-artifact@v2
         with:
@@ -202,6 +202,8 @@ jobs:
         run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps neo4j backend
       - name: backend | Initialize Database
         run: docker-compose exec -T backend yarn db:migrate init
+      - name: backend | Migrate Database Up
+        run: docker-compose exec -T backend yarn db:migrate up
       - name: backend | Unit test
         run: docker-compose exec -T backend yarn test
       ##########################################################################
@@ -267,7 +269,7 @@ jobs:
           report_name: Coverage Webapp
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 65
+          min_coverage: 63
           token: ${{ github.token }}
 
   ##############################################################################
diff --git a/CHANGELOG.md b/CHANGELOG.md
index acc917e13..e029abcf3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,130 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [2.2.0](https://github.com/Ocelot-Social-Community/Ocelot-Social/compare/1.1.0...2.2.0)
+
+- refactor: 🍰 Refactor Design Of Category Filter In Filter Menu [`#5597`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5597)
+- feat: 🍰 Footer And Header Links Configurable To Have External Link Target [`#5590`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5590)
+- feat: 🍰 Header Menu To Component And Other Refinements [`#5546`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5546)
+- fix: 🍰 Comments On Posts In Groups In Webapp [`#5607`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5607)
+- docs: 🍰 Add Live Demo To Main Readme [`#5600`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5600)
+- feat: Restrict Comments on Posts in Groups [`#5599`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5599)
+- fix: 🍰 Add Space In Register Box [`#5591`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5591)
+- fix: 🍰 Update Group Avatar After Upload [`#5583`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5583)
+- feat: 🍰 Make Donation Progress Bar Color Configurable [`#5593`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5593)
+- fix: 🍰 Bug In Edit Slug Of Group [`#5596`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5596)
+- fix: 🍰 Fix Group Teaser [`#5584`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5584)
+- feat: 🍰 List All Groups [`#5582`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5582)
+- feat: 🍰 Header Logo Routing Update [`#5579`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5579)
+- chore: 🍰 Release v2.1.0 [`#5574`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5574)
+- feat: 🍰  EPIC Groups [`#5132`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5132)
+- chore: 🍰 Remove Group Branchs `5059-epic-groups` Separate Auto-Deployment [`#5552`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5552)
+- fix: [WIP] 🍰 Long Words Are Being Wrapped Now [`#5559`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5559)
+- feat: 🍰 Search For Groups [`#5543`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5543)
+- feat: 🍰 Mobile Footer Menu To Header Menu [`#5524`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5524)
+- feat: 🍰 Implement `LOGO_HEADER_CLICK` As Configuration [`#5525`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5525)
+- refactor: 🍰 Category Filter In Filter Menu [`#5527`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5527)
+- feat: 🍰 Group Invitation         [`#5512`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5512)
+- feat: 🍰 Implement Post In Group In Webapp [`#5468`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5468)
+- feat:  :cake: Update Issue Templates [`#5508`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5508)
+- refactor: 🍰 Disable Submit Button On group Update Changed Error [`#5489`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5489)
+- feat: 🍰 Seed Posts In Groups [`#5503`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5503)
+- feat: 🍰 Make Configurable Header Menu Translatable [`#5491`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5491)
+- feat: 🍰 Post In Groups [`#5380`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5380)
+- feat: 🍰 Refine Group Creation And Group Edit [`#5418`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5418)
+- feat: 🍰 Implement Content Menu On Group Profile [`#5419`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5419)
+- feat: 🍰 Group Members Management [`#5345`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5345)
+- feat: 🍰  Have My Groups In The User Menu And Configure Groups Button In Header [`#5411`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5411)
+- chore: 🍰 Implement Automatic Deployment For Groups Branch '5059-epic-groups' [`#5408`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5408)
+- Chore: 🍰 Release v1.1.1 – Refactor Rebranding [`#5392`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5392)
+- chore: 🍰 Refactor Rebranding [`#5390`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5390)
+- feat: 🍰 Group Profile Description Etc [`#5368`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5368)
+- feat: 🍰 Tooltips For Topics [`#5350`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5350)
+- feat: 🍰 Group Profile Members List Etc [`#5335`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5335)
+- feat: 🍰 Implement Group Profile – Visibility [`#5332`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5332)
+- feat: 🍰 Save Categories In Frontend [`#5284`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5284)
+- feat: 🍰 Add New Yunite Icons [`#5319`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5319)
+- chore: 🍰 Update Neode From v^0.4.7 To v^0.4.8 In Backend [`#5334`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5334)
+- feat: 🍰 My Groups Page [`#5148`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5148)
+-  feat: 🍰 Hidden Groups Shall Not Be Visible For None Or Pending Members In Backend [`#5317`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5317)
+- feat: 🍰 Implement Group Profile [`#5197`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5197)
+- fix: Category Filter Menu Client Only [`#5301`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5301)
+- feat: Save Category Settings [`#5261`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5261)
+- feat: 🍰 Implement `UpdateGroup` Resolver [`#5224`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5224)
+- feat: Topics Menu [`#5248`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5248)
+- docs: 🍰 Document GraqhQL Playground [`#5253`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5253)
+- feat: Categories Filter Menu [`#5198`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5198)
+- feat: 🍰 Implement `JoinGroup`, `GroupMember`, `SwitchGroupMemberRole` Resolvers [`#5199`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5199)
+- fix: 🍰 Fix Test Description From `enter-nonce.vue` To `change-password` [`#5217`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5217)
+- Bump cookie-universal-nuxt from 2.1.5 to 2.2.2 in /webapp [`#5218`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5218)
+- Bump prettier from 2.2.1 to 2.7.1 in /webapp [`#5170`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5170)
+- Bump eslint-plugin-prettier from 3.1.2 to 3.4.1 in /backend [`#5211`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5211)
+- Bump slug from 4.0.2 to 6.0.0 in /backend [`#5193`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5193)
+- chore: 🍰 Fix typo in PULL_REQUEST_TEMPLATE.md file [`#5208`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5208)
+- Bump slug from 5.1.0 to 6.0.0 [`#5191`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5191)
+- Bump vue-sweetalert-icons from 4.3.0 to 4.3.1 in /webapp [`#5174`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5174)
+- feat: 🍰 Change Error Message With `Authorised` To `Authorized` All Over The Place To Have American English [`#5206`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5206)
+- Bump cross-env from 7.0.2 to 7.0.3 in /webapp [`#5168`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5168)
+- chore: 🍰 Add `--logHeapUsage` To Jest Test Call [`#5182`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5182)
+- chore: 🍰 Add Groups To Seeding [`#5185`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5185)
+- feat: 🍰 Implement Group GQL Model And CRUD Resolvers – First Step [`#5139`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5139)
+- refactor: 🍰 Rename `UserGroup` To `UserRole` [`#5143`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5143)
+- improved code and tests as suggested by @tirokk, thanks for the great review! [`631f34a`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/631f34a2e5224d68279337a92e7535794b670d70)
+- implement and test post visibilty when leaving or changing the role in a group [`76bfe48`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/76bfe484768cf9b20b2dced865d5d3e3eb999235)
+- comment out LanguagesFilter, EmotionsFilter, fix tests, fix lint [`52dcd77`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/52dcd772fa81e02a0d95e89a9fc8232e70a09d28)
+
+#### [1.1.0](https://github.com/Ocelot-Social-Community/Ocelot-Social/compare/1.0.9...1.1.0)
+
+> 4 August 2022
+
+- chore: 🍰 Release v1.1.0 - Implement Categories Again [`#5145`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5145)
+- feat: Make Categories Optional [`#5102`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5102)
+- Update issue templates [`#5101`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5101)
+- chore: 🍰 Betters Automatic Deployment To `stage.ocelot.social` On Push To `master` Branch [`#5097`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5097)
+- add optional categories to teaser and post [`bc95500`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/bc955003f7c33aabe592bee782aca973b4f00cba)
+- env vatiable for CATEGORIES_ACTIVE and switch for categories in contribution form [`e31f250`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/e31f250ea5e1949f4f08e72fe82622d41ecd85f1)
+- fix some tests [`5393c2a`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/5393c2aeaaf070a637390c430d5f03057030ff52)
+
+#### [1.0.9](https://github.com/Ocelot-Social-Community/Ocelot-Social/compare/1.0.8...1.0.9)
+
+> 20 July 2022
+
+- chore: 🍰 Release v1.0.9 [`#5095`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5095)
+- chore: 🍰 Automatic Deployment To `stage.ocelot.social` On Push To `master` Branch [`#5080`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5080)
+- change footer version-link [`#5091`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5091)
+- docs: 🍰 Add Neo4j Docu For Important Commands [`#5090`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5090)
+- 5079 legends for search field [`#5088`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5088)
+- chore: 🍰 Change `image` Entries In Docker Compose Files And Fix Apple M1 Problem [`#5073`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5073)
+- chore: 🍰 Rename Neo4j Docker Image In General To `neo4j-community:*` [`#5078`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5078)
+- chore: 🍰 Fix `ocelotsocialnetwork/webapp:latest` And `ocelotsocialnetwork/backend:latest` On Start In Cluster [`#5076`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5076)
+- Add documentation for Apple M1 Docker Compose override files [`2f3f37c`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/2f3f37c158cfc9b300540d3c8f016548b15a5277)
+- Add documentation for Docker build analyzes [`fbbcc5b`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/fbbcc5bb854d53b5fa658b83d56d381a3cbc2b1a)
+- Implement DigitalOcean Kubernetes deployment on publishing [`485e698`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/485e6986b88a14db5ab75ed12bab5cdc73592ca6)
+
+#### [1.0.8](https://github.com/Ocelot-Social-Community/Ocelot-Social/compare/1.0.7...1.0.8)
+
+> 1 July 2022
+
+- chore: 🍰 Release v1.0.8 [`#5058`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5058)
+- chore: 🍰 Log E-Mail If Not Sending It [`#5038`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5038)
+- test: 🍰 Test And Refactor E-Mail Templates [`#4787`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4787)
+- fix: 🍰 Replace Hashtag In d.tube Url [`#4980`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4980)
+- Fix location backend test [`#5034`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5034)
+- fix: 🍰 Add Expiration Date To Cookies Etc. [`#4882`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4882)
+- feat: 🍰 Refactor Social Media List With Slots [`#4773`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4773)
+- bug: 🍰 Replace Deleted Faker Package – Change To Import Again [`#4975`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4975)
+- bug: 🍰 Replace Deleted Faker Package [`#4973`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4973)
+- fix: 🍰 Change Tip Tap Editor Legend  Hover To Click [`#4911`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4911)
+- fix: 🍰 Fix Embed iframe Width And Height CSS [`#4897`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4897)
+- Implement MySomethingList for social media, use list item slot [`d3cc49d`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/d3cc49d37ba260f9a285c078c57e673a32a76732)
+- Split social media page and list component [`b740033`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/b7400339aba22d5fb5506dc3b25f082d7f09edfc)
+- Remove input addSocialMedia [`58464fd`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/58464fd53ef6aab52af1c2477c2615648ad889e3)
+
 #### [1.0.7](https://github.com/Ocelot-Social-Community/Ocelot-Social/compare/1.0.6...1.0.7)
 
+> 2 December 2021
+
+- fix: 🍰 Fix Migration 'add donations node‘ And Release V1.0.7 [`#4821`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4821)
 - Bump rosie from 2.0.1 to 2.1.0 [`#4520`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4520)
 - fix: 🍰 Renew JWT In Decode Test [`#4798`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4798)
 - docs: 🍰 Refine Main README.md With Test Tech Stack And Video Link [`#4772`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4772)
diff --git a/DOCKER_MORE_CLOSELY.md b/DOCKER_MORE_CLOSELY.md
new file mode 100644
index 000000000..03e6417ec
--- /dev/null
+++ b/DOCKER_MORE_CLOSELY.md
@@ -0,0 +1,86 @@
+# Docker More Closely
+
+## Apple M1 Platform
+
+***Attention:** For using Docker commands in Apple M1 environments!*
+
+### Enviroment Variable For Apple M1 Platform
+
+To set the Docker platform environment variable in your terminal tab, run:
+
+```bash
+# set env variable for your shell
+$ export DOCKER_DEFAULT_PLATFORM=linux/amd64
+```
+
+### Docker Compose Override File For Apple M1 Platform
+
+For Docker compose `up` or `build` commands, you can use our Apple M1 override file that specifies the M1 platform:
+
+```bash
+# in main folder
+
+# for development
+$ docker compose -f docker-compose.yml -f docker-compose.override.yml -f docker-compose.apple-m1.override.yml up
+# only once: init admin user and create indexes and contraints in Neo4j database
+$ docker compose exec backend yarn prod:migrate init
+# clean db
+$ docker compose exec backend yarn db:reset
+# seed db
+$ docker compose exec backend yarn db:seed
+
+# for production
+$ docker compose -f docker-compose.yml -f docker-compose.apple-m1.override.yml up
+# only once: init admin user and create indexes and contraints in Neo4j database
+$ docker compose exec backend /bin/sh -c "yarn prod:migrate init"
+```
+
+## Analysing Docker Builds
+
+To analyze a Docker build, there is a wonderful tool called [dive](https://github.com/wagoodman/dive). Please sponsor if you're using it!
+
+The `dive build` command is exactly the right one to fulfill what we are looking for.
+We can use it just like the `docker build` command and get an analysis afterwards.
+
+So, in our main folder, we use it in the following way:
+
+```bash
+# in main folder
+$ dive build --target <layer-name> -t "ocelotsocialnetwork/<app-name>:local-<layer-name>" --build-arg BBUILD_DATE="<build-date>" --build-arg BBUILD_VERSION="<build-version>" --build-arg BBUILD_COMMIT="<build-commit>" <app-folder-name-or-dot>/
+```
+
+The build arguments are optional.
+
+For the specific applications, we use them as follows.
+
+### Backend
+
+#### Production For Backend
+
+```bash
+# in main folder
+$ dive build --target production -t "ocelotsocialnetwork/backend:local-production" backend/
+```
+
+#### Development For Backend
+
+```bash
+# in main folder
+$ dive build --target development -t "ocelotsocialnetwork/backend:local-development" backend/
+```
+
+### Webapp
+
+#### Production For Webapp
+
+```bash
+# in main folder
+$ dive build --target production -t "ocelotsocialnetwork/webapp:local-production" webapp/
+```
+
+#### Development For Webapp
+
+```bash
+# in main folder
+$ dive build --target development -t "ocelotsocialnetwork/webapp:local-development" webapp/
+```
diff --git a/README.md b/README.md
index 45006581c..f0688f820 100644
--- a/README.md
+++ b/README.md
@@ -65,11 +65,18 @@ Change into the new folder.
 $ cd Ocelot-Social
 ```
 
+## Live Demo And Developer Logins
+
+**Try out our deployed [development environment](https://stage.ocelot.social).**
+
+Visit our staging networks:
+
+* central staging network: [stage.ocelot.social](https://stage.ocelot.social)
+<!-- - rebranded staging network: [rebrand.ocelot.social](https://stage.ocelot.social). -->
+
 ### Login
 
-<!-- Try out our deployed [development environment](https://develop.human-connection.org/). -->
-
-Logins in the browser after the following installations:
+Logins for the live demos and developers (local developers after the following installations) in the browser:
 
 | email | password | role |
 | :--- | :--- | :--- |
diff --git a/SUMMARY.md b/SUMMARY.md
index 9c74b1974..f848633d5 100644
--- a/SUMMARY.md
+++ b/SUMMARY.md
@@ -15,6 +15,7 @@
   * [End-to-end tests](cypress/README.md)
   * [Frontend tests](webapp/testing.md)
   * [Backend tests](backend/testing.md)
+* [Docker More Closely](DOCKER_MORE_CLOSELY.md)
 * [Deployment](https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/blob/master/deployment/README.md)
 * [Contributing](CONTRIBUTING.md)
 * [Feature Specification](cypress/features.md)
diff --git a/backend/.env.template b/backend/.env.template
index 5858a5d1e..dd46846a9 100644
--- a/backend/.env.template
+++ b/backend/.env.template
@@ -28,3 +28,5 @@ AWS_BUCKET=
 
 EMAIL_DEFAULT_SENDER="devops@ocelot.social"
 EMAIL_SUPPORT="devops@ocelot.social"
+
+CATEGORIES_ACTIVE=false
diff --git a/backend/Dockerfile b/backend/Dockerfile
index 0ebdfb1eb..6c2f72bd3 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -91,6 +91,7 @@ FROM base as production
 
 # Copy "binary"-files from build image
 COPY --from=build ${DOCKER_WORKDIR}/dist ./dist
+COPY --from=build ${DOCKER_WORKDIR}/node_modules ./node_modules
 # Copy static files
 # TODO - externalize the uploads so we can copy the whole folder
 COPY --from=build ${DOCKER_WORKDIR}/public/img/ ./public/img/
diff --git a/backend/README.md b/backend/README.md
index 6d837856c..0af58af48 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -7,8 +7,9 @@ Run the following command to install everything through docker.
 The installation takes a bit longer on the first pass or on rebuild ...
 
 ```bash
+# in main folder
 $ docker-compose up
-
+# or
 # rebuild the containers for a cleanup
 $ docker-compose up --build
 ```
@@ -28,6 +29,7 @@ between different local node versions.
 Install node dependencies with [yarn](https://yarnpkg.com/en/):
 
 ```bash
+# in main folder
 $ cd backend
 $ yarn install
 ```
@@ -45,12 +47,14 @@ a [local Neo4J](http://localhost:7474) instance is up and running.
 Start the backend for development with:
 
 ```bash
+# in backend/
 $ yarn run dev
 ```
 
 or start the backend in production environment with:
 
 ```bash
+# in backend/
 $ yarn run start
 ```
 
@@ -60,6 +64,7 @@ your `.env` configuration file.
 Your backend is up and running at [http://localhost:4000/](http://localhost:4000/)
 This will start the GraphQL service \(by default on localhost:4000\) where you
 can issue GraphQL requests or access GraphQL Playground in the browser.
+More details about our GraphQL playground and how to use it with ocelot.social can be found [here](./src/graphql/GraphQL-Playground.md).
 
 ![GraphQL Playground](../.gitbook/assets/graphql-playground.png)
 
@@ -72,6 +77,7 @@ backend is running:
 {% tab title="Docker" %}
 
 ```bash
+# in main folder while docker-compose is running
 $ docker-compose exec backend yarn run db:migrate init
 ```
 
@@ -79,7 +85,7 @@ $ docker-compose exec backend yarn run db:migrate init
 {% tab title="Without Docker" %}
 
 ```bash
-# in folder backend/
+# in folder backend/ while database is running
 # make sure your database is running on http://localhost:7474/browser/
 yarn run db:migrate init
 ```
@@ -98,12 +104,14 @@ need to seed your database:
 In another terminal run:
 
 ```bash
+# in main folder while docker-compose is running
 $ docker-compose exec backend yarn run db:seed
 ```
 
 To reset the database run:
 
 ```bash
+# in main folder while docker-compose is running
 $ docker-compose exec backend yarn run db:reset
 # you could also wipe out your neo4j database and delete all volumes with:
 $ docker-compose down -v
@@ -117,12 +125,14 @@ $ docker-compose exec backend yarn run db:migrate init
 Run:
 
 ```bash
+# in backend/ while database is running
 $ yarn run db:seed
 ```
 
 To reset the database run:
 
 ```bash
+# in backend/ while database is running
 $ yarn run db:reset
 ```
 
@@ -140,6 +150,7 @@ you have to migrate your data e.g. because your data modeling has changed.
 Generate a data migration file:
 
 ```bash
+# in main folder while docker-compose is running
 $ docker-compose exec backend yarn run db:migrate:create your_data_migration
 # Edit the file in ./src/db/migrations/
 ```
@@ -147,6 +158,7 @@ $ docker-compose exec backend yarn run db:migrate:create your_data_migration
 To run the migration:
 
 ```bash
+# in main folder while docker-compose is running
 $ docker-compose exec backend yarn run db:migrate up
 ```
 
@@ -156,6 +168,7 @@ $ docker-compose exec backend yarn run db:migrate up
 Generate a data migration file:
 
 ```bash
+# in backend/
 $ yarn run db:migrate:create your_data_migration
 # Edit the file in ./src/db/migrations/
 ```
@@ -163,6 +176,7 @@ $ yarn run db:migrate:create your_data_migration
 To run the migration:
 
 ```bash
+# in backend/ while database is running
 $ yarn run db:migrate up
 ```
 
@@ -180,6 +194,7 @@ database after each test, running the tests will wipe out all your data!
 Run the unit tests:
 
 ```bash
+# in main folder while docker-compose is running
 $ docker-compose exec backend yarn run test
 ```
 
@@ -190,6 +205,7 @@ $ docker-compose exec backend yarn run test
 Run the unit tests:
 
 ```bash
+# in backend/ while database is running
 $ yarn run test
 ```
 
diff --git a/backend/package.json b/backend/package.json
index e0d53b5b9..fd285a3b4 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social-backend",
-  "version": "1.0.7",
+  "version": "2.2.0",
   "description": "GraphQL Backend for ocelot.social",
   "repository": "https://github.com/Ocelot-Social-Community/Ocelot-Social",
   "author": "ocelot.social Community",
@@ -15,7 +15,7 @@
     "dev": "nodemon --exec babel-node src/ -e js,gql",
     "dev:debug": "nodemon --exec babel-node --inspect=0.0.0.0:9229 src/ -e js,gql",
     "lint": "eslint src --config .eslintrc.js",
-    "test": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --runInBand --coverage",
+    "test": "cross-env NODE_ENV=test NODE_OPTIONS=--max-old-space-size=8192 jest --forceExit --detectOpenHandles --runInBand --coverage --logHeapUsage",
     "db:clean": "babel-node src/db/clean.js",
     "db:reset": "yarn run db:clean",
     "db:seed": "babel-node src/db/seed.js",
@@ -103,14 +103,14 @@
     "mustache": "^4.2.0",
     "neo4j-driver": "^4.0.2",
     "neo4j-graphql-js": "^2.11.5",
-    "neode": "^0.4.7",
+    "neode": "^0.4.8",
     "node-fetch": "~2.6.1",
     "nodemailer": "^6.4.4",
     "nodemailer-html-to-text": "^3.2.0",
     "npm-run-all": "~4.1.5",
     "request": "~2.88.2",
     "sanitize-html": "~1.22.0",
-    "slug": "~4.0.2",
+    "slug": "~6.0.0",
     "subscriptions-transport-ws": "^0.9.19",
     "trunc-html": "~1.1.2",
     "uuid": "~8.3.2",
@@ -129,7 +129,7 @@
     "eslint-plugin-import": "~2.20.2",
     "eslint-plugin-jest": "~23.8.2",
     "eslint-plugin-node": "~11.1.0",
-    "eslint-plugin-prettier": "~3.1.2",
+    "eslint-plugin-prettier": "~3.4.1",
     "eslint-plugin-promise": "~4.3.1",
     "eslint-plugin-standard": "~4.0.1",
     "jest": "~25.3.0",
diff --git a/backend/src/config/index.js b/backend/src/config/index.js
index d6d8cc166..7df780cfc 100644
--- a/backend/src/config/index.js
+++ b/backend/src/config/index.js
@@ -22,6 +22,8 @@ const environment = {
   DEBUG: env.NODE_ENV !== 'production' && env.DEBUG,
   TEST: env.NODE_ENV === 'test',
   PRODUCTION: env.NODE_ENV === 'production',
+  // used for staging enviroments if 'PRODUCTION=true' and 'PRODUCTION_DB_CLEAN_ALLOW=true'
+  PRODUCTION_DB_CLEAN_ALLOW: env.PRODUCTION_DB_CLEAN_ALLOW === 'true' || false, // default = false
   DISABLED_MIDDLEWARES: (env.NODE_ENV !== 'production' && env.DISABLED_MIDDLEWARES) || false,
 }
 
@@ -84,6 +86,7 @@ const options = {
   ORGANIZATION_URL: emails.ORGANIZATION_LINK,
   PUBLIC_REGISTRATION: env.PUBLIC_REGISTRATION === 'true' || false,
   INVITE_REGISTRATION: env.INVITE_REGISTRATION !== 'false', // default = true
+  CATEGORIES_ACTIVE: process.env.CATEGORIES_ACTIVE === 'true' || false,
 }
 
 // Check if all required configs are present
diff --git a/backend/src/constants/categories.js b/backend/src/constants/categories.js
new file mode 100644
index 000000000..0d61a041a
--- /dev/null
+++ b/backend/src/constants/categories.js
@@ -0,0 +1,102 @@
+// this file is duplicated in `backend/src/constants/metadata.js` and `webapp/constants/metadata.js`
+export const CATEGORIES_MIN = 1
+export const CATEGORIES_MAX = 3
+
+export const categories = [
+  {
+    icon: 'networking',
+    name: 'networking',
+    description: 'Kooperation, Aktionsbündnisse, Solidarität, Hilfe',
+  },
+  {
+    icon: 'home',
+    name: 'home',
+    description: 'Bauen, Lebensgemeinschaften, Tiny Houses, Gemüsegarten',
+  },
+  {
+    icon: 'energy',
+    name: 'energy',
+    description: 'Öl, Gas, Kohle, Wind, Wasserkraft, Biogas, Atomenergie, ...',
+  },
+  {
+    icon: 'psyche',
+    name: 'psyche',
+    description: 'Seele, Gefühle, Glück',
+  },
+  {
+    icon: 'movement',
+    name: 'body-and-excercise',
+    description: 'Sport, Yoga, Massage, Tanzen, Entspannung',
+  },
+  {
+    icon: 'balance-scale',
+    name: 'law',
+    description: 'Menschenrechte, Gesetze, Verordnungen',
+  },
+  {
+    icon: 'finance',
+    name: 'finance',
+    description: 'Geld, Finanzsystem, Alternativwährungen, ...',
+  },
+  {
+    icon: 'child',
+    name: 'children',
+    description: 'Familie, Pädagogik, Schule, Prägung',
+  },
+  {
+    icon: 'mobility',
+    name: 'mobility',
+    description: 'Reise, Verkehr, Elektromobilität',
+  },
+  {
+    icon: 'shopping-cart',
+    name: 'economy',
+    description: 'Handel, Konsum, Marketing, Lebensmittel, Lieferketten, ...',
+  },
+  {
+    icon: 'peace',
+    name: 'peace',
+    description: 'Krieg, Militär, soziale Verteidigung, Waffen, Cyberattacken',
+  },
+  {
+    icon: 'politics',
+    name: 'politics',
+    description: 'Demokratie, Mitbestimmung, Wahlen, Korruption, Parteien',
+  },
+  {
+    icon: 'nature',
+    name: 'nature',
+    description: 'Tiere, Pflanzen, Landwirtschaft, Ökologie, Artenvielfalt',
+  },
+  {
+    icon: 'science',
+    name: 'science',
+    description: 'Bildung, Hochschule, Publikationen, ...',
+  },
+  {
+    icon: 'health',
+    name: 'health',
+    description: 'Medizin, Ernährung, WHO, Impfungen, Schadstoffe, ...',
+  },
+  {
+    icon: 'media',
+    name: 'it-and-media',
+    description:
+      'Nachrichten, Manipulation, Datenschutz, Überwachung, Datenkraken, AI, Software, Apps',
+  },
+  {
+    icon: 'spirituality',
+    name: 'spirituality',
+    description: 'Religion, Werte, Ethik',
+  },
+  {
+    icon: 'culture',
+    name: 'culture',
+    description: 'Kunst, Theater, Musik, Fotografie, Film',
+  },
+  {
+    icon: 'miscellaneous',
+    name: 'miscellaneous',
+    description: '',
+  },
+]
diff --git a/backend/src/constants/groups.js b/backend/src/constants/groups.js
new file mode 100644
index 000000000..e9c941a89
--- /dev/null
+++ b/backend/src/constants/groups.js
@@ -0,0 +1,3 @@
+// this file is duplicated in `backend/src/constants/group.js` and `webapp/constants/group.js`
+export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 100 // with removed HTML tags
+export const DESCRIPTION_EXCERPT_HTML_LENGTH = 250 // with removed HTML tags
diff --git a/backend/src/db/clean.js b/backend/src/db/clean.js
index db8e8aad6..eac26036c 100644
--- a/backend/src/db/clean.js
+++ b/backend/src/db/clean.js
@@ -1,8 +1,8 @@
-import { cleanDatabase } from '../db/factories'
 import CONFIG from '../config'
+import { cleanDatabase } from '../db/factories'
 
-if (CONFIG.PRODUCTION) {
-  throw new Error(`You cannot clean the database in production environment!`)
+if (CONFIG.PRODUCTION && !CONFIG.PRODUCTION_DB_CLEAN_ALLOW) {
+  throw new Error(`You cannot clean the database in a non-staging and real production environment!`)
 }
 
 ;(async function () {
diff --git a/backend/src/db/graphql/authentications.js b/backend/src/db/graphql/authentications.js
new file mode 100644
index 000000000..91605ec9f
--- /dev/null
+++ b/backend/src/db/graphql/authentications.js
@@ -0,0 +1,30 @@
+import gql from 'graphql-tag'
+
+// ------ mutations
+
+export const signupVerificationMutation = gql`
+  mutation (
+    $password: String!
+    $email: String!
+    $name: String!
+    $slug: String
+    $nonce: String!
+    $termsAndConditionsAgreedVersion: String!
+  ) {
+    SignupVerification(
+      email: $email
+      password: $password
+      name: $name
+      slug: $slug
+      nonce: $nonce
+      termsAndConditionsAgreedVersion: $termsAndConditionsAgreedVersion
+    ) {
+      id
+      slug
+    }
+  }
+`
+
+// ------ queries
+
+// fill queries in here
diff --git a/backend/src/db/graphql/comments.js b/backend/src/db/graphql/comments.js
new file mode 100644
index 000000000..b408c5e95
--- /dev/null
+++ b/backend/src/db/graphql/comments.js
@@ -0,0 +1,15 @@
+import gql from 'graphql-tag'
+
+// ------ mutations
+
+export const createCommentMutation = gql`
+  mutation ($id: ID, $postId: ID!, $content: String!) {
+    CreateComment(id: $id, postId: $postId, content: $content) {
+      id
+    }
+  }
+`
+
+// ------ queries
+
+// fill queries in here
diff --git a/backend/src/db/graphql/groups.js b/backend/src/db/graphql/groups.js
new file mode 100644
index 000000000..e388b2cd9
--- /dev/null
+++ b/backend/src/db/graphql/groups.js
@@ -0,0 +1,203 @@
+import gql from 'graphql-tag'
+
+// ------ mutations
+
+export const createGroupMutation = () => {
+  return gql`
+    mutation (
+      $id: ID
+      $name: String!
+      $slug: String
+      $about: String
+      $description: String!
+      $groupType: GroupType!
+      $actionRadius: GroupActionRadius!
+      $categoryIds: [ID]
+      $locationName: String # empty string '' sets it to null
+    ) {
+      CreateGroup(
+        id: $id
+        name: $name
+        slug: $slug
+        about: $about
+        description: $description
+        groupType: $groupType
+        actionRadius: $actionRadius
+        categoryIds: $categoryIds
+        locationName: $locationName
+      ) {
+        id
+        name
+        slug
+        createdAt
+        updatedAt
+        disabled
+        deleted
+        about
+        description
+        descriptionExcerpt
+        groupType
+        actionRadius
+        categories {
+          id
+          slug
+          name
+          icon
+        }
+        locationName
+        location {
+          name
+          nameDE
+          nameEN
+        }
+        myRole
+      }
+    }
+  `
+}
+
+export const updateGroupMutation = () => {
+  return gql`
+    mutation (
+      $id: ID!
+      $name: String
+      $slug: String
+      $about: String
+      $description: String
+      $actionRadius: GroupActionRadius
+      $categoryIds: [ID]
+      $avatar: ImageInput
+      $locationName: String # empty string '' sets it to null
+    ) {
+      UpdateGroup(
+        id: $id
+        name: $name
+        slug: $slug
+        about: $about
+        description: $description
+        actionRadius: $actionRadius
+        categoryIds: $categoryIds
+        avatar: $avatar
+        locationName: $locationName
+      ) {
+        id
+        name
+        slug
+        createdAt
+        updatedAt
+        disabled
+        deleted
+        about
+        description
+        descriptionExcerpt
+        groupType
+        actionRadius
+        categories {
+          id
+          slug
+          name
+          icon
+        }
+        # avatar # test this as result
+        locationName
+        location {
+          name
+          nameDE
+          nameEN
+        }
+        myRole
+      }
+    }
+  `
+}
+
+export const joinGroupMutation = () => {
+  return gql`
+    mutation ($groupId: ID!, $userId: ID!) {
+      JoinGroup(groupId: $groupId, userId: $userId) {
+        id
+        name
+        slug
+        myRoleInGroup
+      }
+    }
+  `
+}
+
+export const leaveGroupMutation = () => {
+  return gql`
+    mutation ($groupId: ID!, $userId: ID!) {
+      LeaveGroup(groupId: $groupId, userId: $userId) {
+        id
+        name
+        slug
+        myRoleInGroup
+      }
+    }
+  `
+}
+
+export const changeGroupMemberRoleMutation = () => {
+  return gql`
+    mutation ($groupId: ID!, $userId: ID!, $roleInGroup: GroupMemberRole!) {
+      ChangeGroupMemberRole(groupId: $groupId, userId: $userId, roleInGroup: $roleInGroup) {
+        id
+        name
+        slug
+        myRoleInGroup
+      }
+    }
+  `
+}
+
+// ------ queries
+
+export const groupQuery = () => {
+  return gql`
+    query ($isMember: Boolean, $id: ID, $slug: String) {
+      Group(isMember: $isMember, id: $id, slug: $slug) {
+        id
+        name
+        slug
+        createdAt
+        updatedAt
+        disabled
+        deleted
+        about
+        description
+        descriptionExcerpt
+        groupType
+        actionRadius
+        categories {
+          id
+          slug
+          name
+          icon
+        }
+        avatar {
+          url
+        }
+        locationName
+        location {
+          name
+          nameDE
+          nameEN
+        }
+        myRole
+      }
+    }
+  `
+}
+
+export const groupMembersQuery = () => {
+  return gql`
+    query ($id: ID!) {
+      GroupMembers(id: $id) {
+        id
+        name
+        slug
+        myRoleInGroup
+      }
+    }
+  `
+}
diff --git a/backend/src/db/graphql/posts.js b/backend/src/db/graphql/posts.js
new file mode 100644
index 000000000..2669d6f24
--- /dev/null
+++ b/backend/src/db/graphql/posts.js
@@ -0,0 +1,88 @@
+import gql from 'graphql-tag'
+
+// ------ mutations
+
+export const createPostMutation = () => {
+  return gql`
+    mutation (
+      $id: ID
+      $title: String!
+      $slug: String
+      $content: String!
+      $categoryIds: [ID]
+      $groupId: ID
+    ) {
+      CreatePost(
+        id: $id
+        title: $title
+        slug: $slug
+        content: $content
+        categoryIds: $categoryIds
+        groupId: $groupId
+      ) {
+        id
+        slug
+        title
+        content
+      }
+    }
+  `
+}
+
+// ------ queries
+
+export const postQuery = () => {
+  return gql`
+    query Post($id: ID!) {
+      Post(id: $id) {
+        id
+        title
+        content
+      }
+    }
+  `
+}
+
+export const filterPosts = () => {
+  return gql`
+    query Post($filter: _PostFilter, $first: Int, $offset: Int, $orderBy: [_PostOrdering]) {
+      Post(filter: $filter, first: $first, offset: $offset, orderBy: $orderBy) {
+        id
+        title
+        content
+      }
+    }
+  `
+}
+
+export const profilePagePosts = () => {
+  return gql`
+    query profilePagePosts(
+      $filter: _PostFilter
+      $first: Int
+      $offset: Int
+      $orderBy: [_PostOrdering]
+    ) {
+      profilePagePosts(filter: $filter, first: $first, offset: $offset, orderBy: $orderBy) {
+        id
+        title
+        content
+      }
+    }
+  `
+}
+
+export const searchPosts = () => {
+  return gql`
+    query ($query: String!, $firstPosts: Int, $postsOffset: Int) {
+      searchPosts(query: $query, firstPosts: $firstPosts, postsOffset: $postsOffset) {
+        postCount
+        posts {
+          id
+          title
+          content
+        }
+      }
+    }
+  `
+}
diff --git a/backend/src/db/graphql/userManagement.js b/backend/src/db/graphql/userManagement.js
new file mode 100644
index 000000000..3cb8a05f8
--- /dev/null
+++ b/backend/src/db/graphql/userManagement.js
@@ -0,0 +1,13 @@
+import gql from 'graphql-tag'
+
+// ------ mutations
+
+export const loginMutation = gql`
+  mutation ($email: String!, $password: String!) {
+    login(email: $email, password: $password)
+  }
+`
+
+// ------ queries
+
+// fill queries in here
diff --git a/backend/src/db/migrate/store.js b/backend/src/db/migrate/store.js
index 377caf0b0..57a317b47 100644
--- a/backend/src/db/migrate/store.js
+++ b/backend/src/db/migrate/store.js
@@ -1,6 +1,8 @@
 import { getDriver, getNeode } from '../../db/neo4j'
 import { hashSync } from 'bcryptjs'
 import { v4 as uuid } from 'uuid'
+import { categories } from '../../constants/categories'
+import CONFIG from '../../config'
 
 const defaultAdmin = {
   email: 'admin@example.org',
@@ -10,6 +12,29 @@ const defaultAdmin = {
   slug: 'admin',
 }
 
+const createCategories = async (session) => {
+  const createCategoriesTxResultPromise = session.writeTransaction(async (txc) => {
+    categories.forEach(({ icon, name }, index) => {
+      const id = `cat${index + 1}`
+      txc.run(
+        `MERGE (c:Category {
+          icon: "${icon}",
+          slug: "${name}",
+          name: "${name}",
+          id: "${id}",
+          createdAt: toString(datetime())
+        })`,
+      )
+    })
+  })
+  try {
+    await createCategoriesTxResultPromise
+    console.log('Successfully created categories!') // eslint-disable-line no-console
+  } catch (error) {
+    console.log(`Error creating categories: ${error}`) // eslint-disable-line no-console
+  }
+}
+
 const createDefaultAdminUser = async (session) => {
   const readTxResultPromise = session.readTransaction(async (txc) => {
     const result = await txc.run('MATCH (user:User) RETURN count(user) AS userCount')
@@ -45,7 +70,7 @@ const createDefaultAdminUser = async (session) => {
     })
     try {
       await createAdminTxResultPromise
-      console.log('Successfully created default admin user') // eslint-disable-line no-console
+      console.log('Successfully created default admin user!') // eslint-disable-line no-console
     } catch (error) {
       console.log(error) // eslint-disable-line no-console
     }
@@ -58,12 +83,13 @@ class Store {
     const { driver } = neode
     const session = driver.session()
     await createDefaultAdminUser(session)
+    if (CONFIG.CATEGORIES_ACTIVE) await createCategories(session)
     const writeTxResultPromise = session.writeTransaction(async (txc) => {
-      await txc.run('CALL apoc.schema.assert({},{},true)') // drop all indices
+      await txc.run('CALL apoc.schema.assert({},{},true)') // drop all indices and contraints
       return Promise.all(
         [
-          'CALL db.index.fulltext.createNodeIndex("post_fulltext_search",["Post"],["title", "content"])',
           'CALL db.index.fulltext.createNodeIndex("user_fulltext_search",["User"],["name", "slug"])',
+          'CALL db.index.fulltext.createNodeIndex("post_fulltext_search",["Post"],["title", "content"])',
           'CALL db.index.fulltext.createNodeIndex("tag_fulltext_search",["Tag"],["id"])',
         ].map((statement) => txc.run(statement)),
       )
diff --git a/backend/src/db/migrations/20220803060819-create_fulltext_indices_and_unique_keys_for_groups.js b/backend/src/db/migrations/20220803060819-create_fulltext_indices_and_unique_keys_for_groups.js
new file mode 100644
index 000000000..b87e5632a
--- /dev/null
+++ b/backend/src/db/migrations/20220803060819-create_fulltext_indices_and_unique_keys_for_groups.js
@@ -0,0 +1,66 @@
+import { getDriver } from '../../db/neo4j'
+
+export const description = `
+  We introduced a new node label 'Group' and we need two primary keys 'id' and 'slug' for it.
+  Additional we like to have fulltext indices the keys 'name', 'slug', 'about', and 'description'.
+`
+
+export async function up(next) {
+  const driver = getDriver()
+  const session = driver.session()
+  const transaction = session.beginTransaction()
+
+  try {
+    // Implement your migration here.
+    await transaction.run(`
+      CREATE CONSTRAINT ON ( group:Group ) ASSERT group.id IS UNIQUE
+    `)
+    await transaction.run(`
+      CREATE CONSTRAINT ON ( group:Group ) ASSERT group.slug IS UNIQUE
+    `)
+    await transaction.run(`
+      CALL db.index.fulltext.createNodeIndex("group_fulltext_search",["Group"],["name", "slug", "about", "description"])
+    `)
+    await transaction.commit()
+    next()
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+    await transaction.rollback()
+    // eslint-disable-next-line no-console
+    console.log('rolled back')
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+}
+
+export async function down(next) {
+  const driver = getDriver()
+  const session = driver.session()
+  const transaction = session.beginTransaction()
+
+  try {
+    // Implement your migration here.
+    await transaction.run(`
+      DROP CONSTRAINT ON ( group:Group ) ASSERT group.id IS UNIQUE
+    `)
+    await transaction.run(`
+      DROP CONSTRAINT ON ( group:Group ) ASSERT group.slug IS UNIQUE
+    `)
+    await transaction.run(`
+      CALL db.index.fulltext.drop("group_fulltext_search")
+    `)
+    await transaction.commit()
+    next()
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+    await transaction.rollback()
+    // eslint-disable-next-line no-console
+    console.log('rolled back')
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+}
diff --git a/backend/src/db/seed.js b/backend/src/db/seed.js
index 7bfd4f159..dd8bb59cb 100644
--- a/backend/src/db/seed.js
+++ b/backend/src/db/seed.js
@@ -1,10 +1,22 @@
 import sample from 'lodash/sample'
 import { createTestClient } from 'apollo-server-testing'
+import CONFIG from '../config'
 import createServer from '../server'
 import faker from '@faker-js/faker'
 import Factory from '../db/factories'
 import { getNeode, getDriver } from '../db/neo4j'
-import { gql } from '../helpers/jest'
+import {
+  createGroupMutation,
+  joinGroupMutation,
+  changeGroupMemberRoleMutation,
+} from './graphql/groups'
+import { createPostMutation } from './graphql/posts'
+import { createCommentMutation } from './graphql/comments'
+import { categories } from '../constants/categories'
+
+if (CONFIG.PRODUCTION && !CONFIG.PRODUCTION_DB_CLEAN_ALLOW) {
+  throw new Error(`You cannot seed the database in a non-staging and real production environment!`)
+}
 
 const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
 
@@ -262,104 +274,16 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       dagobert.relateTo(louie, 'blocked'),
     ])
 
-    await Promise.all([
-      Factory.build('category', {
-        id: 'cat1',
-        name: 'Just For Fun',
-        slug: 'just-for-fun',
-        icon: 'smile',
+    await Promise.all(
+      categories.map(({ icon, name }, index) => {
+        Factory.build('category', {
+          id: `cat${index + 1}`,
+          slug: name,
+          name,
+          icon,
+        })
       }),
-      Factory.build('category', {
-        id: 'cat2',
-        name: 'Happiness & Values',
-        slug: 'happiness-values',
-        icon: 'heart-o',
-      }),
-      Factory.build('category', {
-        id: 'cat3',
-        name: 'Health & Wellbeing',
-        slug: 'health-wellbeing',
-        icon: 'medkit',
-      }),
-      Factory.build('category', {
-        id: 'cat4',
-        name: 'Environment & Nature',
-        slug: 'environment-nature',
-        icon: 'tree',
-      }),
-      Factory.build('category', {
-        id: 'cat5',
-        name: 'Animal Protection',
-        slug: 'animal-protection',
-        icon: 'paw',
-      }),
-      Factory.build('category', {
-        id: 'cat6',
-        name: 'Human Rights & Justice',
-        slug: 'human-rights-justice',
-        icon: 'balance-scale',
-      }),
-      Factory.build('category', {
-        id: 'cat7',
-        name: 'Education & Sciences',
-        slug: 'education-sciences',
-        icon: 'graduation-cap',
-      }),
-      Factory.build('category', {
-        id: 'cat8',
-        name: 'Cooperation & Development',
-        slug: 'cooperation-development',
-        icon: 'users',
-      }),
-      Factory.build('category', {
-        id: 'cat9',
-        name: 'Democracy & Politics',
-        slug: 'democracy-politics',
-        icon: 'university',
-      }),
-      Factory.build('category', {
-        id: 'cat10',
-        name: 'Economy & Finances',
-        slug: 'economy-finances',
-        icon: 'money',
-      }),
-      Factory.build('category', {
-        id: 'cat11',
-        name: 'Energy & Technology',
-        slug: 'energy-technology',
-        icon: 'flash',
-      }),
-      Factory.build('category', {
-        id: 'cat12',
-        name: 'IT, Internet & Data Privacy',
-        slug: 'it-internet-data-privacy',
-        icon: 'mouse-pointer',
-      }),
-      Factory.build('category', {
-        id: 'cat13',
-        name: 'Art, Culture & Sport',
-        slug: 'art-culture-sport',
-        icon: 'paint-brush',
-      }),
-      Factory.build('category', {
-        id: 'cat14',
-        name: 'Freedom of Speech',
-        slug: 'freedom-of-speech',
-        icon: 'bullhorn',
-      }),
-      Factory.build('category', {
-        id: 'cat15',
-        name: 'Consumption & Sustainability',
-        slug: 'consumption-sustainability',
-        icon: 'shopping-cart',
-      }),
-      Factory.build('category', {
-        id: 'cat16',
-        name: 'Global Peace & Nonviolence',
-        slug: 'global-peace-nonviolence',
-        icon: 'angellist',
-      }),
-    ])
+    )
 
     const [environment, nature, democracy, freedom] = await Promise.all([
       Factory.build('tag', {
@@ -376,6 +300,302 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       }),
     ])
 
+    // Create Groups
+
+    authenticatedUser = await peterLustig.toJson()
+    await Promise.all([
+      mutate({
+        mutation: createGroupMutation(),
+        variables: {
+          id: 'g0',
+          name: 'Investigative Journalism',
+          about: 'Investigative journalists share ideas and insights and can collaborate.',
+          description: `<p class=""><em>English:</em></p><p class="">This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class="">Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class="">Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class="">Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>`,
+          groupType: 'hidden',
+          actionRadius: 'global',
+          categoryIds: ['cat6', 'cat12', 'cat16'],
+          locationName: 'Hamburg, Germany',
+        },
+      }),
+    ])
+    await Promise.all([
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g0',
+          userId: 'u2',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g0',
+          userId: 'u4',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g0',
+          userId: 'u6',
+        },
+      }),
+    ])
+    await Promise.all([
+      mutate({
+        mutation: changeGroupMemberRoleMutation(),
+        variables: {
+          groupId: 'g0',
+          userId: 'u2',
+          roleInGroup: 'usual',
+        },
+      }),
+      mutate({
+        mutation: changeGroupMemberRoleMutation(),
+        variables: {
+          groupId: 'g0',
+          userId: 'u4',
+          roleInGroup: 'admin',
+        },
+      }),
+    ])
+
+    // post into group
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p0-g0',
+          groupId: 'g0',
+          title: `What happend in Shanghai?`,
+          content: 'A sack of rise dropped in Shanghai. Should we further investigate?',
+          categoryIds: ['cat6'],
+        },
+      }),
+    ])
+    authenticatedUser = await bobDerBaumeister.toJson()
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p1-g0',
+          groupId: 'g0',
+          title: `The man on the moon`,
+          content: 'We have to further investigate about the stories of a man living on the moon.',
+          categoryIds: ['cat12', 'cat16'],
+        },
+      }),
+    ])
+
+    authenticatedUser = await jennyRostock.toJson()
+    await Promise.all([
+      mutate({
+        mutation: createGroupMutation(),
+        variables: {
+          id: 'g1',
+          name: 'School For Citizens',
+          about: 'Our children shall receive education for life.',
+          description: `<p class=""><em>English</em></p><h3>Our goal</h3><p>Only those who enjoy learning and do not lose their curiosity can obtain a good education for life and continue to learn with joy throughout their lives.</p><h3>Curiosity</h3><p>For this we need a school that takes up the curiosity of the children, the people, and satisfies it through a lot of experience.</p><p><br></p><p><em>Deutsch</em></p><h3>Unser Ziel</h3><p class="">Nur wer Spaß am Lernen hat und seine Neugier nicht verliert, kann gute Bildung für's Leben erlangen und sein ganzes Leben mit Freude weiter lernen.</p><h3>Neugier</h3><p class="">Dazu benötigen wir eine Schule, die die Neugier der Kinder, der Menschen, aufnimmt und durch viel Erfahrung befriedigt.</p>`,
+          groupType: 'closed',
+          actionRadius: 'national',
+          categoryIds: ['cat8', 'cat14'],
+          locationName: 'France',
+        },
+      }),
+    ])
+    await Promise.all([
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g1',
+          userId: 'u1',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g1',
+          userId: 'u2',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g1',
+          userId: 'u5',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g1',
+          userId: 'u6',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g1',
+          userId: 'u7',
+        },
+      }),
+    ])
+    await Promise.all([
+      mutate({
+        mutation: changeGroupMemberRoleMutation(),
+        variables: {
+          groupId: 'g1',
+          userId: 'u1',
+          roleInGroup: 'usual',
+        },
+      }),
+      mutate({
+        mutation: changeGroupMemberRoleMutation(),
+        variables: {
+          groupId: 'g1',
+          userId: 'u5',
+          roleInGroup: 'admin',
+        },
+      }),
+      mutate({
+        mutation: changeGroupMemberRoleMutation(),
+        variables: {
+          groupId: 'g1',
+          userId: 'u6',
+          roleInGroup: 'owner',
+        },
+      }),
+    ])
+    // post into group
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p0-g1',
+          groupId: 'g1',
+          title: `Can we use ocelot for education?`,
+          content: 'I like the concept of this school. Can we use our software in this?',
+          categoryIds: ['cat8'],
+        },
+      }),
+    ])
+    authenticatedUser = await peterLustig.toJson()
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p1-g1',
+          groupId: 'g1',
+          title: `Can we push this idea out of France?`,
+          content: 'This idea is too inportant to have the scope only on France.',
+          categoryIds: ['cat14'],
+        },
+      }),
+    ])
+
+    authenticatedUser = await bobDerBaumeister.toJson()
+    await Promise.all([
+      mutate({
+        mutation: createGroupMutation(),
+        variables: {
+          id: 'g2',
+          name: 'Yoga Practice',
+          about: 'We do yoga around the clock.',
+          description: `<h3>What Is yoga?</h3><p>Yoga is not just about practicing asanas. It's about how we do it.</p><p class="">And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.</p><h3>What makes practicing asanas yogic?</h3><p class="">The important thing is:</p><ul><li><p>Use the exercises (consciously) for your personal development.</p></li></ul>`,
+          groupType: 'public',
+          actionRadius: 'interplanetary',
+          categoryIds: ['cat4', 'cat5', 'cat17'],
+        },
+      }),
+    ])
+    await Promise.all([
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g2',
+          userId: 'u3',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g2',
+          userId: 'u4',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g2',
+          userId: 'u5',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g2',
+          userId: 'u6',
+        },
+      }),
+      mutate({
+        mutation: joinGroupMutation(),
+        variables: {
+          groupId: 'g2',
+          userId: 'u7',
+        },
+      }),
+    ])
+    await Promise.all([
+      mutate({
+        mutation: changeGroupMemberRoleMutation(),
+        variables: {
+          groupId: 'g2',
+          userId: 'u3',
+          roleInGroup: 'usual',
+        },
+      }),
+      mutate({
+        mutation: changeGroupMemberRoleMutation(),
+        variables: {
+          groupId: 'g2',
+          userId: 'u4',
+          roleInGroup: 'pending',
+        },
+      }),
+      mutate({
+        mutation: changeGroupMemberRoleMutation(),
+        variables: {
+          groupId: 'g2',
+          userId: 'u5',
+          roleInGroup: 'admin',
+        },
+      }),
+      mutate({
+        mutation: changeGroupMemberRoleMutation(),
+        variables: {
+          groupId: 'g2',
+          userId: 'u6',
+          roleInGroup: 'usual',
+        },
+      }),
+    ])
+
+    authenticatedUser = await louie.toJson()
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p0-g2',
+          groupId: 'g2',
+          title: `I am a Noob`,
+          content: 'I am new to Yoga and did not join this group so far.',
+          categoryIds: ['cat4'],
+        },
+      }),
+    ])
+
+    // Create Posts
+
     const [p0, p1, p3, p4, p5, p6, p9, p10, p11, p13, p14, p15] = await Promise.all([
       Factory.build(
         'post',
@@ -553,17 +773,10 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       'See <a class="hashtag" data-hashtag-id="NaturphilosophieYoga" href="/?hashtag=NaturphilosophieYoga">#NaturphilosophieYoga</a>, it can really help you!'
     const hashtagAndMention1 =
       'The new physics of <a class="hashtag" data-hashtag-id="QuantenFlussTheorie" href="/?hashtag=QuantenFlussTheorie">#QuantenFlussTheorie</a> can explain <a class="hashtag" data-hashtag-id="QuantumGravity" href="/?hashtag=QuantumGravity">#QuantumGravity</a>! <a class="mention" data-mention-id="u1" href="/profile/u1">@peter-lustig</a> got that already. ;-)'
-    const createPostMutation = gql`
-      mutation ($id: ID, $title: String!, $content: String!, $categoryIds: [ID]) {
-        CreatePost(id: $id, title: $title, content: $content, categoryIds: $categoryIds) {
-          id
-        }
-      }
-    `
 
     await Promise.all([
       mutate({
-        mutation: createPostMutation,
+        mutation: createPostMutation(),
         variables: {
           id: 'p2',
           title: `Nature Philosophy Yoga`,
@@ -572,7 +785,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         },
       }),
       mutate({
-        mutation: createPostMutation,
+        mutation: createPostMutation(),
         variables: {
           id: 'p7',
           title: 'This is post #7',
@@ -581,7 +794,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         },
       }),
       mutate({
-        mutation: createPostMutation,
+        mutation: createPostMutation(),
         variables: {
           id: 'p8',
           image: faker.image.unsplash.nature(),
@@ -591,7 +804,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         },
       }),
       mutate({
-        mutation: createPostMutation,
+        mutation: createPostMutation(),
         variables: {
           id: 'p12',
           title: 'This is post #12',
@@ -610,13 +823,6 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       'I heard <a class="mention" data-mention-id="u3" href="/profile/u3">@jenny-rostock</a> has practiced it for 3 years now.'
     const mentionInComment2 =
       'Did <a class="mention" data-mention-id="u1" href="/profile/u1">@peter-lustig</a> tell you?'
-    const createCommentMutation = gql`
-      mutation ($id: ID, $postId: ID!, $content: String!) {
-        CreateComment(id: $id, postId: $postId, content: $content) {
-          id
-        }
-      }
-    `
     await Promise.all([
       mutate({
         mutation: createCommentMutation,
diff --git a/backend/src/graphql/GraphQL-Playground.md b/backend/src/graphql/GraphQL-Playground.md
new file mode 100644
index 000000000..af248f112
--- /dev/null
+++ b/backend/src/graphql/GraphQL-Playground.md
@@ -0,0 +1,108 @@
+# GraphQL Playground
+
+To use GraphQL Playground, we need to know some basics:
+
+## How To Login?
+
+First, we need to have a user from ocelot.social to log in as.
+The user can be created by seeding the Neo4j database from the backend or by multiple GraphQL mutations.
+
+### Seed The Neo4j Database
+
+In your browser you can reach the GraphQL Playground under `http://localhost:4000/`, if the database and the backend are running, see [backend](../../README.md).
+There you will also find instructions on how to seed the database.
+
+### Use GraphQL Mutations To Create A User
+
+TODO: Describe how to create a user using GraphQL mutations!
+
+### Login Via GraphQL
+
+You can register a user by sending the query:
+
+```gql
+mutation {
+  login(email: "user@example.org", password: "1234")
+}
+```
+
+Or use `"moderator@example.org"` or `"admin@example.org"` for the roll you need.
+
+If all goes well, you will receive a QGL response like:
+
+```json
+{
+  "data": {
+    "login": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU"
+  }
+}
+```
+
+You can use this response to set an HTTP header when you click `HTTP HEADERS` in the footer.
+Just set it with the login token you received in response:
+
+```json
+{
+  "Authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU"
+}
+```
+
+This token is used for all other queries and mutations you send to the backend.
+
+## Query And Mutate
+
+When you are logged in and open a new playground tab by clicking "+", you can create a new group by sending the following mutation:
+
+```gql
+mutation {
+  CreateGroup(
+    # id: ""
+    name: "My Group"
+    # slug: ""
+    about: "We will save the world"
+    description: "<p class=\"\"><em>English:</em></p><p class=\"\">This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class=\"\">Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class=\"\">Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class=\"\">Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>"
+    groupType: hidden
+    actionRadius: interplanetary
+    categoryIds: ["cat12"]
+  ) {
+    id
+    name
+    slug
+    createdAt
+    updatedAt
+    disabled
+    deleted
+    about
+    description
+    groupType
+    actionRadius
+    myRole
+  }
+}
+```
+
+You will receive the answer:
+
+```json
+{
+  "data": {
+    "CreateGroup": {
+      "id": "2e3bbadb-804b-4ebc-a673-2d7c7f05e827",
+      "name": "My Group",
+      "slug": "my-group",
+      "createdAt": "2022-09-01T09:44:47.969Z",
+      "updatedAt": "2022-09-01T09:44:47.969Z",
+      "disabled": false,
+      "deleted": false,
+      "about": "We will save the world",
+      "description": "<p class=\"\"><em>English:</em></p><p class=\"\">This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class=\"\">Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class=\"\">Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class=\"\">Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>",
+      "groupType": "hidden",
+      "actionRadius": "interplanetary",
+      "myRole": "owner"
+    }
+  }
+}
+```
+
+If you look into the Neo4j database with your browser and search the groups, you will now also find your new group.
+For more details about our Neo4j database read [here](../../../neo4j/README.md).
diff --git a/backend/src/helpers/jest.js b/backend/src/helpers/jest.js
index 201d68c14..e3f6a3c84 100644
--- a/backend/src/helpers/jest.js
+++ b/backend/src/helpers/jest.js
@@ -1,5 +1,18 @@
+// TODO: can be replaced with: (which is no a fake)
+// import gql from 'graphql-tag'
+// See issue: https://github.com/Ocelot-Social-Community/Ocelot-Social/issues/5152
+
 //* This is a fake ES2015 template string, just to benefit of syntax
 // highlighting of `gql` template strings in certain editors.
 export function gql(strings) {
   return strings.join('')
 }
+
+// sometime we have to wait to check a db state by having a look into the db in a certain moment
+// or we wait a bit to check if we missed to set an await somewhere
+// see: https://www.sitepoint.com/delay-sleep-pause-wait/
+export function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+// usage – 4 seconds for example
+// await sleep(4 * 1000)
diff --git a/backend/src/middleware/excerptMiddleware.js b/backend/src/middleware/excerptMiddleware.js
index 40a6a6ae4..28b30fb4f 100644
--- a/backend/src/middleware/excerptMiddleware.js
+++ b/backend/src/middleware/excerptMiddleware.js
@@ -1,26 +1,32 @@
 import trunc from 'trunc-html'
+import { DESCRIPTION_EXCERPT_HTML_LENGTH } from '../constants/groups'
 
 export default {
   Mutation: {
+    CreateGroup: async (resolve, root, args, context, info) => {
+      args.descriptionExcerpt = trunc(args.description, DESCRIPTION_EXCERPT_HTML_LENGTH).html
+      return resolve(root, args, context, info)
+    },
+    UpdateGroup: async (resolve, root, args, context, info) => {
+      if (args.description)
+        args.descriptionExcerpt = trunc(args.description, DESCRIPTION_EXCERPT_HTML_LENGTH).html
+      return resolve(root, args, context, info)
+    },
     CreatePost: async (resolve, root, args, context, info) => {
       args.contentExcerpt = trunc(args.content, 120).html
-      const result = await resolve(root, args, context, info)
-      return result
+      return resolve(root, args, context, info)
     },
     UpdatePost: async (resolve, root, args, context, info) => {
       args.contentExcerpt = trunc(args.content, 120).html
-      const result = await resolve(root, args, context, info)
-      return result
+      return resolve(root, args, context, info)
     },
     CreateComment: async (resolve, root, args, context, info) => {
       args.contentExcerpt = trunc(args.content, 180).html
-      const result = await resolve(root, args, context, info)
-      return result
+      return resolve(root, args, context, info)
     },
     UpdateComment: async (resolve, root, args, context, info) => {
       args.contentExcerpt = trunc(args.content, 180).html
-      const result = await resolve(root, args, context, info)
-      return result
+      return resolve(root, args, context, info)
     },
   },
 }
diff --git a/backend/src/middleware/helpers/cleanHtml.js b/backend/src/middleware/helpers/cleanHtml.js
index 72976b43c..ac71f6bdc 100644
--- a/backend/src/middleware/helpers/cleanHtml.js
+++ b/backend/src/middleware/helpers/cleanHtml.js
@@ -1,6 +1,13 @@
 import sanitizeHtml from 'sanitize-html'
 import linkifyHtml from 'linkifyjs/html'
 
+export const removeHtmlTags = (input) => {
+  return sanitizeHtml(input, {
+    allowedTags: [],
+    allowedAttributes: {},
+  })
+}
+
 const standardSanitizeHtmlOptions = {
   allowedTags: [
     'img',
diff --git a/backend/src/middleware/languages/languages.js b/backend/src/middleware/languages/languages.js
index 3cf760f31..087252975 100644
--- a/backend/src/middleware/languages/languages.js
+++ b/backend/src/middleware/languages/languages.js
@@ -1,12 +1,5 @@
 import LanguageDetect from 'languagedetect'
-import sanitizeHtml from 'sanitize-html'
-
-const removeHtmlTags = (input) => {
-  return sanitizeHtml(input, {
-    allowedTags: [],
-    allowedAttributes: {},
-  })
-}
+import { removeHtmlTags } from '../helpers/cleanHtml.js'
 
 const setPostLanguage = (text) => {
   const lngDetector = new LanguageDetect()
diff --git a/backend/src/middleware/permissionsMiddleware.js b/backend/src/middleware/permissionsMiddleware.js
index b10389f50..906285d12 100644
--- a/backend/src/middleware/permissionsMiddleware.js
+++ b/backend/src/middleware/permissionsMiddleware.js
@@ -1,4 +1,4 @@
-import { rule, shield, deny, allow, or } from 'graphql-shield'
+import { rule, shield, deny, allow, or, and } from 'graphql-shield'
 import { getNeode } from '../db/neo4j'
 import CONFIG from '../config'
 import { validateInviteCode } from '../schema/resolvers/transactions/inviteCodes'
@@ -52,6 +52,237 @@ const isMySocialMedia = rule({
   return socialMedia.ownedBy.node.id === user.id
 })
 
+const isAllowedToChangeGroupSettings = rule({
+  cache: 'no_cache',
+})(async (_parent, args, { user, driver }) => {
+  if (!(user && user.id)) return false
+  const ownerId = user.id
+  const { id: groupId } = args
+  const session = driver.session()
+  const readTxPromise = session.readTransaction(async (transaction) => {
+    const transactionResponse = await transaction.run(
+      `
+        MATCH (owner:User {id: $ownerId})-[membership:MEMBER_OF]->(group:Group {id: $groupId})
+        RETURN group {.*}, owner {.*, myRoleInGroup: membership.role}
+      `,
+      { groupId, ownerId },
+    )
+    return {
+      owner: transactionResponse.records.map((record) => record.get('owner'))[0],
+      group: transactionResponse.records.map((record) => record.get('group'))[0],
+    }
+  })
+  try {
+    const { owner, group } = await readTxPromise
+    return !!group && !!owner && ['owner'].includes(owner.myRoleInGroup)
+  } catch (error) {
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+})
+
+const isAllowedSeeingGroupMembers = rule({
+  cache: 'no_cache',
+})(async (_parent, args, { user, driver }) => {
+  if (!(user && user.id)) return false
+  const { id: groupId } = args
+  const session = driver.session()
+  const readTxPromise = session.readTransaction(async (transaction) => {
+    const transactionResponse = await transaction.run(
+      `
+        MATCH (group:Group {id: $groupId})
+        OPTIONAL MATCH (member:User {id: $userId})-[membership:MEMBER_OF]->(group)
+        RETURN group {.*}, member {.*, myRoleInGroup: membership.role}
+      `,
+      { groupId, userId: user.id },
+    )
+    return {
+      member: transactionResponse.records.map((record) => record.get('member'))[0],
+      group: transactionResponse.records.map((record) => record.get('group'))[0],
+    }
+  })
+  try {
+    const { member, group } = await readTxPromise
+    return (
+      !!group &&
+      (group.groupType === 'public' ||
+        (['closed', 'hidden'].includes(group.groupType) &&
+          !!member &&
+          ['usual', 'admin', 'owner'].includes(member.myRoleInGroup)))
+    )
+  } catch (error) {
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+})
+
+const isAllowedToChangeGroupMemberRole = rule({
+  cache: 'no_cache',
+})(async (_parent, args, { user, driver }) => {
+  if (!(user && user.id)) return false
+  const adminId = user.id
+  const { groupId, userId, roleInGroup } = args
+  if (adminId === userId) return false
+  const session = driver.session()
+  const readTxPromise = session.readTransaction(async (transaction) => {
+    const transactionResponse = await transaction.run(
+      `
+        MATCH (admin:User {id: $adminId})-[adminMembership:MEMBER_OF]->(group:Group {id: $groupId})
+        OPTIONAL MATCH (group)<-[userMembership:MEMBER_OF]-(member:User {id: $userId})
+        RETURN group {.*}, admin {.*, myRoleInGroup: adminMembership.role}, member {.*, myRoleInGroup: userMembership.role}
+      `,
+      { groupId, adminId, userId },
+    )
+    return {
+      admin: transactionResponse.records.map((record) => record.get('admin'))[0],
+      group: transactionResponse.records.map((record) => record.get('group'))[0],
+      member: transactionResponse.records.map((record) => record.get('member'))[0],
+    }
+  })
+  try {
+    const { admin, group, member } = await readTxPromise
+    return (
+      !!group &&
+      !!admin &&
+      (!member ||
+        (!!member &&
+          (member.myRoleInGroup === roleInGroup || !['owner'].includes(member.myRoleInGroup)))) &&
+      ((['admin'].includes(admin.myRoleInGroup) &&
+        ['pending', 'usual', 'admin'].includes(roleInGroup)) ||
+        (['owner'].includes(admin.myRoleInGroup) &&
+          ['pending', 'usual', 'admin', 'owner'].includes(roleInGroup)))
+    )
+  } catch (error) {
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+})
+
+const isAllowedToJoinGroup = rule({
+  cache: 'no_cache',
+})(async (_parent, args, { user, driver }) => {
+  if (!(user && user.id)) return false
+  const { groupId, userId } = args
+  const session = driver.session()
+  const readTxPromise = session.readTransaction(async (transaction) => {
+    const transactionResponse = await transaction.run(
+      `
+        MATCH (group:Group {id: $groupId})
+        OPTIONAL MATCH (group)<-[membership:MEMBER_OF]-(member:User {id: $userId})
+        RETURN group {.*}, member {.*, myRoleInGroup: membership.role}
+      `,
+      { groupId, userId },
+    )
+    return {
+      group: transactionResponse.records.map((record) => record.get('group'))[0],
+      member: transactionResponse.records.map((record) => record.get('member'))[0],
+    }
+  })
+  try {
+    const { group, member } = await readTxPromise
+    return !!group && (group.groupType !== 'hidden' || (!!member && !!member.myRoleInGroup))
+  } catch (error) {
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+})
+
+const isAllowedToLeaveGroup = rule({
+  cache: 'no_cache',
+})(async (_parent, args, { user, driver }) => {
+  if (!(user && user.id)) return false
+  const { groupId, userId } = args
+  if (user.id !== userId) return false
+  const session = driver.session()
+  const readTxPromise = session.readTransaction(async (transaction) => {
+    const transactionResponse = await transaction.run(
+      `
+        MATCH (member:User {id: $userId})-[membership:MEMBER_OF]->(group:Group {id: $groupId})
+        RETURN group {.*}, member {.*, myRoleInGroup: membership.role}
+      `,
+      { groupId, userId },
+    )
+    return {
+      group: transactionResponse.records.map((record) => record.get('group'))[0],
+      member: transactionResponse.records.map((record) => record.get('member'))[0],
+    }
+  })
+  try {
+    const { group, member } = await readTxPromise
+    return !!group && !!member && !!member.myRoleInGroup && member.myRoleInGroup !== 'owner'
+  } catch (error) {
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+})
+
+const isMemberOfGroup = rule({
+  cache: 'no_cache',
+})(async (_parent, args, { user, driver }) => {
+  if (!(user && user.id)) return false
+  const { groupId } = args
+  if (!groupId) return true
+  const userId = user.id
+  const session = driver.session()
+  const readTxPromise = session.readTransaction(async (transaction) => {
+    const transactionResponse = await transaction.run(
+      `
+        MATCH (User {id: $userId})-[membership:MEMBER_OF]->(Group {id: $groupId})
+        RETURN membership.role AS role
+      `,
+      { groupId, userId },
+    )
+    return transactionResponse.records.map((record) => record.get('role'))[0]
+  })
+  try {
+    const role = await readTxPromise
+    return ['usual', 'admin', 'owner'].includes(role)
+  } catch (error) {
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+})
+
+const canCommentPost = rule({
+  cache: 'no_cache',
+})(async (_parent, args, { user, driver }) => {
+  if (!(user && user.id)) return false
+  const { postId } = args
+  const userId = user.id
+  const session = driver.session()
+  const readTxPromise = session.readTransaction(async (transaction) => {
+    const transactionResponse = await transaction.run(
+      `
+        MATCH (post:Post { id: $postId })
+        OPTIONAL MATCH (post)-[:IN]->(group:Group)
+        OPTIONAL MATCH (user:User { id: $userId })-[membership:MEMBER_OF]->(group)
+        RETURN group AS group, membership AS membership
+      `,
+      { postId, userId },
+    )
+    return {
+      group: transactionResponse.records.map((record) => record.get('group'))[0],
+      membership: transactionResponse.records.map((record) => record.get('membership'))[0],
+    }
+  })
+  try {
+    const { group, membership } = await readTxPromise
+    return (
+      !group || (membership && ['usual', 'admin', 'owner'].includes(membership.properties.role))
+    )
+  } catch (error) {
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+})
+
 const isAuthor = rule({
   cache: 'no_cache',
 })(async (_parent, args, { user, driver }) => {
@@ -78,7 +309,7 @@ const isAuthor = rule({
 
 const isDeletingOwnAccount = rule({
   cache: 'no_cache',
-})(async (parent, args, context, info) => {
+})(async (parent, args, context, _info) => {
   return context.user.id === args.id
 })
 
@@ -102,11 +333,10 @@ export default shield(
   {
     Query: {
       '*': deny,
-      findPosts: allow,
-      findUsers: allow,
       searchResults: allow,
       searchPosts: allow,
       searchUsers: allow,
+      searchGroups: allow,
       searchHashtags: allow,
       embed: allow,
       Category: allow,
@@ -114,6 +344,9 @@ export default shield(
       reports: isModerator,
       statistics: allow,
       currentUser: allow,
+      Group: isAuthenticated,
+      GroupMembers: isAllowedSeeingGroupMembers,
+      GroupCount: isAuthenticated,
       Post: allow,
       profilePagePosts: allow,
       Comment: allow,
@@ -140,7 +373,12 @@ export default shield(
       Signup: or(publicRegistration, inviteRegistration, isAdmin),
       SignupVerification: allow,
       UpdateUser: onlyYourself,
-      CreatePost: isAuthenticated,
+      CreateGroup: isAuthenticated,
+      UpdateGroup: isAllowedToChangeGroupSettings,
+      JoinGroup: isAllowedToJoinGroup,
+      LeaveGroup: isAllowedToLeaveGroup,
+      ChangeGroupMemberRole: isAllowedToChangeGroupMemberRole,
+      CreatePost: and(isAuthenticated, isMemberOfGroup),
       UpdatePost: isAuthor,
       DeletePost: isAuthor,
       fileReport: isAuthenticated,
@@ -157,7 +395,7 @@ export default shield(
       unshout: isAuthenticated,
       changePassword: isAuthenticated,
       review: isModerator,
-      CreateComment: isAuthenticated,
+      CreateComment: and(isAuthenticated, canCommentPost),
       UpdateComment: isAuthor,
       DeleteComment: isAuthor,
       DeleteUser: or(isDeletingOwnAccount, isAdmin),
@@ -178,6 +416,7 @@ export default shield(
       GenerateInviteCode: isAuthenticated,
       switchUserRole: isAdmin,
       markTeaserAsViewed: allow,
+      saveCategorySettings: isAuthenticated,
     },
     User: {
       email: or(isMyOwn, isAdmin),
@@ -188,5 +427,6 @@ export default shield(
     debug,
     allowExternalErrors,
     fallbackRule: allow,
+    fallbackError: Error('Not Authorized!'),
   },
 )
diff --git a/backend/src/middleware/permissionsMiddleware.spec.js b/backend/src/middleware/permissionsMiddleware.spec.js
index e29e0a4af..9d71314bb 100644
--- a/backend/src/middleware/permissionsMiddleware.spec.js
+++ b/backend/src/middleware/permissionsMiddleware.spec.js
@@ -102,7 +102,7 @@ describe('authorization', () => {
           await expect(
             query({ query: userQuery, variables: { name: 'Owner' } }),
           ).resolves.toMatchObject({
-            errors: [{ message: 'Not Authorised!' }],
+            errors: [{ message: 'Not Authorized!' }],
             data: { User: [null] },
           })
         })
@@ -132,7 +132,7 @@ describe('authorization', () => {
             await expect(
               query({ query: userQuery, variables: { name: 'Owner' } }),
             ).resolves.toMatchObject({
-              errors: [{ message: 'Not Authorised!' }],
+              errors: [{ message: 'Not Authorized!' }],
               data: { User: [null] },
             })
           })
@@ -147,7 +147,7 @@ describe('authorization', () => {
             await expect(
               query({ query: userQuery, variables: { name: 'Owner' } }),
             ).resolves.toMatchObject({
-              errors: [{ message: 'Not Authorised!' }],
+              errors: [{ message: 'Not Authorized!' }],
               data: { User: [null] },
             })
           })
@@ -198,7 +198,7 @@ describe('authorization', () => {
 
           it('denies permission', async () => {
             await expect(mutate({ mutation: signupMutation, variables })).resolves.toMatchObject({
-              errors: [{ message: 'Not Authorised!' }],
+              errors: [{ message: 'Not Authorized!' }],
               data: { Signup: null },
             })
           })
@@ -288,7 +288,7 @@ describe('authorization', () => {
 
           it('denies permission', async () => {
             await expect(mutate({ mutation: signupMutation, variables })).resolves.toMatchObject({
-              errors: [{ message: 'Not Authorised!' }],
+              errors: [{ message: 'Not Authorized!' }],
               data: { Signup: null },
             })
           })
diff --git a/backend/src/middleware/sluggifyMiddleware.js b/backend/src/middleware/sluggifyMiddleware.js
index 165235be9..bbe47c9aa 100644
--- a/backend/src/middleware/sluggifyMiddleware.js
+++ b/backend/src/middleware/sluggifyMiddleware.js
@@ -26,11 +26,16 @@ export default {
       args.slug = args.slug || (await uniqueSlug(args.name, isUniqueFor(context, 'User')))
       return resolve(root, args, context, info)
     },
+    CreateGroup: async (resolve, root, args, context, info) => {
+      args.slug = args.slug || (await uniqueSlug(args.name, isUniqueFor(context, 'Group')))
+      return resolve(root, args, context, info)
+    },
     CreatePost: async (resolve, root, args, context, info) => {
       args.slug = args.slug || (await uniqueSlug(args.title, isUniqueFor(context, 'Post')))
       return resolve(root, args, context, info)
     },
     UpdatePost: async (resolve, root, args, context, info) => {
+      // TODO: is this absolutely correct? what happens if "args.title" is not defined? may it works accidentally, because "args.title" or "args.slug" is always send?
       args.slug = args.slug || (await uniqueSlug(args.title, isUniqueFor(context, 'Post')))
       return resolve(root, args, context, info)
     },
diff --git a/backend/src/middleware/slugify/uniqueSlug.js b/backend/src/middleware/slugify/uniqueSlug.js
index 7cfb89c19..41d58ece3 100644
--- a/backend/src/middleware/slugify/uniqueSlug.js
+++ b/backend/src/middleware/slugify/uniqueSlug.js
@@ -1,4 +1,5 @@
 import slugify from 'slug'
+
 export default async function uniqueSlug(string, isUnique) {
   const slug = slugify(string || 'anonymous', {
     lower: true,
diff --git a/backend/src/middleware/slugifyMiddleware.spec.js b/backend/src/middleware/slugifyMiddleware.spec.js
index 7c6f18ab1..1fdfb7364 100644
--- a/backend/src/middleware/slugifyMiddleware.spec.js
+++ b/backend/src/middleware/slugifyMiddleware.spec.js
@@ -1,29 +1,34 @@
-import Factory, { cleanDatabase } from '../db/factories'
-import { gql } from '../helpers/jest'
 import { getNeode, getDriver } from '../db/neo4j'
 import createServer from '../server'
 import { createTestClient } from 'apollo-server-testing'
+import Factory, { cleanDatabase } from '../db/factories'
+import { createGroupMutation, updateGroupMutation } from '../db/graphql/groups'
+import { createPostMutation } from '../db/graphql/posts'
+import { signupVerificationMutation } from '../db/graphql/authentications'
 
-let mutate
 let authenticatedUser
 let variables
+const categoryIds = ['cat9']
 
 const driver = getDriver()
 const neode = getNeode()
+const descriptionAdditional100 =
+  ' 123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789'
+
+const { server } = createServer({
+  context: () => {
+    return {
+      driver,
+      neode,
+      user: authenticatedUser,
+    }
+  },
+})
+
+const { mutate } = createTestClient(server)
 
 beforeAll(async () => {
   await cleanDatabase()
-
-  const { server } = createServer({
-    context: () => {
-      return {
-        driver,
-        neode,
-        user: authenticatedUser,
-      }
-    },
-  })
-  mutate = createTestClient(server).mutate
 })
 
 afterAll(async () => {
@@ -46,6 +51,7 @@ beforeEach(async () => {
   await Factory.build('category', {
     id: 'cat9',
     name: 'Democracy & Politics',
+    slug: 'democracy-politics',
     icon: 'university',
   })
   authenticatedUser = await admin.toJson()
@@ -57,16 +63,242 @@ afterEach(async () => {
 })
 
 describe('slugifyMiddleware', () => {
-  describe('CreatePost', () => {
-    const categoryIds = ['cat9']
-    const createPostMutation = gql`
-      mutation ($title: String!, $content: String!, $categoryIds: [ID]!, $slug: String) {
-        CreatePost(title: $title, content: $content, categoryIds: $categoryIds, slug: $slug) {
-          slug
-        }
+  describe('CreateGroup', () => {
+    beforeEach(() => {
+      variables = {
+        ...variables,
+        name: 'The Best Group',
+        about: 'Some about',
+        description: 'Some description' + descriptionAdditional100,
+        groupType: 'closed',
+        actionRadius: 'national',
+        categoryIds,
       }
-    `
+    })
 
+    describe('if slug not exists', () => {
+      it('generates a slug based on name', async () => {
+        await expect(
+          mutate({
+            mutation: createGroupMutation(),
+            variables,
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreateGroup: {
+              name: 'The Best Group',
+              slug: 'the-best-group',
+              about: 'Some about',
+              description: 'Some description' + descriptionAdditional100,
+              groupType: 'closed',
+              actionRadius: 'national',
+            },
+          },
+          errors: undefined,
+        })
+      })
+
+      it('generates a slug based on given slug', async () => {
+        await expect(
+          mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              ...variables,
+              slug: 'the-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreateGroup: {
+              slug: 'the-group',
+            },
+          },
+          errors: undefined,
+        })
+      })
+    })
+
+    describe('if slug exists', () => {
+      beforeEach(async () => {
+        await mutate({
+          mutation: createGroupMutation(),
+          variables: {
+            ...variables,
+            name: 'Pre-Existing Group',
+            slug: 'pre-existing-group',
+            about: 'As an about',
+          },
+        })
+      })
+
+      it('chooses another slug', async () => {
+        await expect(
+          mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              ...variables,
+              name: 'Pre-Existing Group',
+              about: 'As an about',
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreateGroup: {
+              slug: 'pre-existing-group-1',
+            },
+          },
+          errors: undefined,
+        })
+      })
+
+      describe('but if the client specifies a slug', () => {
+        it('rejects CreateGroup', async (done) => {
+          try {
+            await expect(
+              mutate({
+                mutation: createGroupMutation(),
+                variables: {
+                  ...variables,
+                  name: 'Pre-Existing Group',
+                  about: 'As an about',
+                  slug: 'pre-existing-group',
+                },
+              }),
+            ).resolves.toMatchObject({
+              errors: [
+                {
+                  message: 'Group with this slug already exists!',
+                },
+              ],
+            })
+            done()
+          } catch (error) {
+            throw new Error(`
+              ${error}
+
+              Probably your database has no unique constraints!
+
+              To see all constraints go to http://localhost:7474/browser/ and
+              paste the following:
+              \`\`\`
+                CALL db.constraints();
+              \`\`\`
+
+              Learn how to setup the database here:
+              https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/backend/README.md#database-indices-and-constraints
+            `)
+          }
+        })
+      })
+    })
+  })
+
+  describe('UpdateGroup', () => {
+    let createGroupResult
+
+    beforeEach(async () => {
+      createGroupResult = await mutate({
+        mutation: createGroupMutation(),
+        variables: {
+          name: 'The Best Group',
+          slug: 'the-best-group',
+          about: 'Some about',
+          description: 'Some description' + descriptionAdditional100,
+          groupType: 'closed',
+          actionRadius: 'national',
+          categoryIds,
+        },
+      })
+    })
+
+    describe('if group exists', () => {
+      describe('if new slug not(!) exists', () => {
+        describe('setting slug explicitly', () => {
+          it('has the new slug', async () => {
+            await expect(
+              mutate({
+                mutation: updateGroupMutation(),
+                variables: {
+                  id: createGroupResult.data.CreateGroup.id,
+                  slug: 'my-best-group',
+                },
+              }),
+            ).resolves.toMatchObject({
+              data: {
+                UpdateGroup: {
+                  name: 'The Best Group',
+                  slug: 'my-best-group',
+                  about: 'Some about',
+                  description: 'Some description' + descriptionAdditional100,
+                  groupType: 'closed',
+                  actionRadius: 'national',
+                  myRole: 'owner',
+                },
+              },
+              errors: undefined,
+            })
+          })
+        })
+      })
+
+      describe('if new slug exists in another group', () => {
+        beforeEach(async () => {
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              name: 'Pre-Existing Group',
+              slug: 'pre-existing-group',
+              about: 'Some about',
+              description: 'Some description' + descriptionAdditional100,
+              groupType: 'closed',
+              actionRadius: 'national',
+              categoryIds,
+            },
+          })
+        })
+
+        describe('setting slug explicitly', () => {
+          it('rejects UpdateGroup', async (done) => {
+            try {
+              await expect(
+                mutate({
+                  mutation: updateGroupMutation(),
+                  variables: {
+                    id: createGroupResult.data.CreateGroup.id,
+                    slug: 'pre-existing-group',
+                  },
+                }),
+              ).resolves.toMatchObject({
+                errors: [
+                  {
+                    message: 'Group with this slug already exists!',
+                  },
+                ],
+              })
+              done()
+            } catch (error) {
+              throw new Error(`
+                ${error}
+
+                Probably your database has no unique constraints!
+
+                To see all constraints go to http://localhost:7474/browser/ and
+                paste the following:
+                \`\`\`
+                  CALL db.constraints();
+                \`\`\`
+
+                Learn how to setup the database here:
+                https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/backend/README.md#database-indices-and-constraints
+              `)
+            }
+          })
+        })
+      })
+    })
+  })
+
+  describe('CreatePost', () => {
     beforeEach(() => {
       variables = {
         ...variables,
@@ -76,18 +308,40 @@ describe('slugifyMiddleware', () => {
       }
     })
 
-    it('generates a slug based on title', async () => {
-      await expect(
-        mutate({
-          mutation: createPostMutation,
-          variables,
-        }),
-      ).resolves.toMatchObject({
-        data: {
-          CreatePost: {
-            slug: 'i-am-a-brand-new-post',
+    describe('if slug not exists', () => {
+      it('generates a slug based on title', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables,
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreatePost: {
+              slug: 'i-am-a-brand-new-post',
+            },
           },
-        },
+          errors: undefined,
+        })
+      })
+
+      it('generates a slug based on given slug', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              ...variables,
+              slug: 'the-post',
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreatePost: {
+              slug: 'the-post',
+            },
+          },
+          errors: undefined,
+        })
       })
     })
 
@@ -107,16 +361,15 @@ describe('slugifyMiddleware', () => {
       })
 
       it('chooses another slug', async () => {
-        variables = {
-          ...variables,
-          title: 'Pre-existing post',
-          content: 'Some content',
-          categoryIds,
-        }
         await expect(
           mutate({
-            mutation: createPostMutation,
-            variables,
+            mutation: createPostMutation(),
+            variables: {
+              ...variables,
+              title: 'Pre-existing post',
+              content: 'Some content',
+              categoryIds,
+            },
           }),
         ).resolves.toMatchObject({
           data: {
@@ -124,21 +377,24 @@ describe('slugifyMiddleware', () => {
               slug: 'pre-existing-post-1',
             },
           },
+          errors: undefined,
         })
       })
 
       describe('but if the client specifies a slug', () => {
         it('rejects CreatePost', async (done) => {
-          variables = {
-            ...variables,
-            title: 'Pre-existing post',
-            content: 'Some content',
-            slug: 'pre-existing-post',
-            categoryIds,
-          }
           try {
             await expect(
-              mutate({ mutation: createPostMutation, variables }),
+              mutate({
+                mutation: createPostMutation(),
+                variables: {
+                  ...variables,
+                  title: 'Pre-existing post',
+                  content: 'Some content',
+                  slug: 'pre-existing-post',
+                  categoryIds,
+                },
+              }),
             ).resolves.toMatchObject({
               errors: [
                 {
@@ -160,7 +416,7 @@ describe('slugifyMiddleware', () => {
               \`\`\`
 
               Learn how to setup the database here:
-              https://docs.human-connection.org/human-connection/backend#database-indices-and-constraints
+              https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/backend/README.md#database-indices-and-constraints
             `)
           }
         })
@@ -168,29 +424,9 @@ describe('slugifyMiddleware', () => {
     })
   })
 
-  describe('SignupVerification', () => {
-    const mutation = gql`
-      mutation (
-        $password: String!
-        $email: String!
-        $name: String!
-        $slug: String
-        $nonce: String!
-        $termsAndConditionsAgreedVersion: String!
-      ) {
-        SignupVerification(
-          email: $email
-          password: $password
-          name: $name
-          slug: $slug
-          nonce: $nonce
-          termsAndConditionsAgreedVersion: $termsAndConditionsAgreedVersion
-        ) {
-          slug
-        }
-      }
-    `
+  it.todo('UpdatePost')
 
+  describe('SignupVerification', () => {
     beforeEach(() => {
       variables = {
         ...variables,
@@ -211,18 +447,40 @@ describe('slugifyMiddleware', () => {
         })
       })
 
-      it('generates a slug based on name', async () => {
-        await expect(
-          mutate({
-            mutation,
-            variables,
-          }),
-        ).resolves.toMatchObject({
-          data: {
-            SignupVerification: {
-              slug: 'i-am-a-user',
+      describe('if slug not exists', () => {
+        it('generates a slug based on name', async () => {
+          await expect(
+            mutate({
+              mutation: signupVerificationMutation,
+              variables,
+            }),
+          ).resolves.toMatchObject({
+            data: {
+              SignupVerification: {
+                slug: 'i-am-a-user',
+              },
             },
-          },
+            errors: undefined,
+          })
+        })
+
+        it('generates a slug based on given slug', async () => {
+          await expect(
+            mutate({
+              mutation: signupVerificationMutation,
+              variables: {
+                ...variables,
+                slug: 'the-user',
+              },
+            }),
+          ).resolves.toMatchObject({
+            data: {
+              SignupVerification: {
+                slug: 'the-user',
+              },
+            },
+            errors: undefined,
+          })
         })
       })
 
@@ -237,7 +495,7 @@ describe('slugifyMiddleware', () => {
         it('chooses another slug', async () => {
           await expect(
             mutate({
-              mutation,
+              mutation: signupVerificationMutation,
               variables,
             }),
           ).resolves.toMatchObject({
@@ -246,6 +504,7 @@ describe('slugifyMiddleware', () => {
                 slug: 'i-am-a-user-1',
               },
             },
+            errors: undefined,
           })
         })
 
@@ -260,7 +519,7 @@ describe('slugifyMiddleware', () => {
           it('rejects SignupVerification (on FAIL Neo4j constraints may not defined in database)', async () => {
             await expect(
               mutate({
-                mutation,
+                mutation: signupVerificationMutation,
                 variables,
               }),
             ).resolves.toMatchObject({
diff --git a/backend/src/middleware/userInteractions.js b/backend/src/middleware/userInteractions.js
index 553aefe78..62e8e47f7 100644
--- a/backend/src/middleware/userInteractions.js
+++ b/backend/src/middleware/userInteractions.js
@@ -31,7 +31,7 @@ const setPostCounter = async (postId, relation, context) => {
 }
 
 const userClickedPost = async (resolve, root, args, context, info) => {
-  if (args.id) {
+  if (args.id && context.user) {
     await setPostCounter(args.id, 'CLICKED', context)
   }
   return resolve(root, args, context, info)
diff --git a/backend/src/models/Category.js b/backend/src/models/Category.js
index ea617adc8..9a3f47fd0 100644
--- a/backend/src/models/Category.js
+++ b/backend/src/models/Category.js
@@ -9,8 +9,7 @@ export default {
   updatedAt: {
     type: 'string',
     isoDate: true,
-    required: true,
-    default: () => new Date().toISOString(),
+    required: false,
   },
   post: {
     type: 'relationship',
diff --git a/backend/src/models/Group.js b/backend/src/models/Group.js
new file mode 100644
index 000000000..a75ad518f
--- /dev/null
+++ b/backend/src/models/Group.js
@@ -0,0 +1,46 @@
+import { v4 as uuid } from 'uuid'
+
+export default {
+  id: { type: 'string', primary: true, default: uuid }, // TODO: should be type: 'uuid' but simplified for our tests
+  name: { type: 'string', disallow: [null], min: 3 },
+  slug: { type: 'string', unique: 'true', regex: /^[a-z0-9_-]+$/, lowercase: true },
+
+  createdAt: {
+    type: 'string',
+    isoDate: true,
+    required: true,
+    default: () => new Date().toISOString(),
+  },
+  updatedAt: {
+    type: 'string',
+    isoDate: true,
+    required: true,
+    default: () => new Date().toISOString(),
+  },
+  deleted: { type: 'boolean', default: false },
+  disabled: { type: 'boolean', default: false },
+
+  avatar: {
+    type: 'relationship',
+    relationship: 'AVATAR_IMAGE',
+    target: 'Image',
+    direction: 'out',
+  },
+
+  about: { type: 'string', allow: [null, ''] },
+  description: { type: 'string', disallow: [null], min: 100 },
+  descriptionExcerpt: { type: 'string', allow: [null] },
+  groupType: { type: 'string', default: 'public' },
+  actionRadius: { type: 'string', default: 'regional' },
+
+  myRole: { type: 'string', default: 'pending' },
+
+  locationName: { type: 'string', allow: [null] },
+
+  isIn: {
+    type: 'relationship',
+    relationship: 'IS_IN',
+    target: 'Location',
+    direction: 'out',
+  },
+}
diff --git a/backend/src/models/User.spec.js b/backend/src/models/User.spec.js
index 102acde6a..c64d1fd37 100644
--- a/backend/src/models/User.spec.js
+++ b/backend/src/models/User.spec.js
@@ -55,7 +55,7 @@ describe('slug', () => {
         \`\`\`
 
         Learn how to setup the database here:
-        https://docs.human-connection.org/human-connection/backend#database-indices-and-constraints
+        https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/backend/README.md#database-indices-and-constraints
       `)
     }
   })
diff --git a/backend/src/models/index.js b/backend/src/models/index.js
index 8d6a021ab..d476e5f9b 100644
--- a/backend/src/models/index.js
+++ b/backend/src/models/index.js
@@ -4,6 +4,7 @@ export default {
   Image: require('./Image.js').default,
   Badge: require('./Badge.js').default,
   User: require('./User.js').default,
+  Group: require('./Group.js').default,
   EmailAddress: require('./EmailAddress.js').default,
   UnverifiedEmailAddress: require('./UnverifiedEmailAddress.js').default,
   SocialMedia: require('./SocialMedia.js').default,
diff --git a/backend/src/schema/index.js b/backend/src/schema/index.js
index 612487147..06e150c86 100644
--- a/backend/src/schema/index.js
+++ b/backend/src/schema/index.js
@@ -20,6 +20,7 @@ export default makeAugmentedSchema({
         'FILED',
         'REVIEWED',
         'Report',
+        'Group',
       ],
     },
     mutation: false,
diff --git a/backend/src/schema/resolvers/comments.spec.js b/backend/src/schema/resolvers/comments.spec.js
index cbd2b98fc..33b33ed3e 100644
--- a/backend/src/schema/resolvers/comments.spec.js
+++ b/backend/src/schema/resolvers/comments.spec.js
@@ -88,10 +88,10 @@ describe('CreateComment', () => {
       variables = {
         ...variables,
         postId: 'p1',
-        content: "I'm not authorised to comment",
+        content: "I'm not authorized to comment",
       }
       const { errors } = await mutate({ mutation: createCommentMutation, variables })
-      expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+      expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
     })
   })
 
@@ -107,14 +107,14 @@ describe('CreateComment', () => {
         variables = {
           ...variables,
           postId: 'p1',
-          content: "I'm authorised to comment",
+          content: "I'm authorized to comment",
         }
       })
 
       it('creates a comment', async () => {
         await expect(mutate({ mutation: createCommentMutation, variables })).resolves.toMatchObject(
           {
-            data: { CreateComment: { content: "I'm authorised to comment" } },
+            data: { CreateComment: { content: "I'm authorized to comment" } },
             errors: undefined,
           },
         )
@@ -150,7 +150,7 @@ describe('UpdateComment', () => {
     describe('unauthenticated', () => {
       it('throws authorization error', async () => {
         const { errors } = await mutate({ mutation: updateCommentMutation, variables })
-        expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
@@ -162,7 +162,7 @@ describe('UpdateComment', () => {
 
       it('throws authorization error', async () => {
         const { errors } = await mutate({ mutation: updateCommentMutation, variables })
-        expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
@@ -217,7 +217,7 @@ describe('UpdateComment', () => {
         it('returns null', async () => {
           const { data, errors } = await mutate({ mutation: updateCommentMutation, variables })
           expect(data).toMatchObject({ UpdateComment: null })
-          expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+          expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
         })
       })
     })
@@ -242,7 +242,7 @@ describe('DeleteComment', () => {
     describe('unauthenticated', () => {
       it('throws authorization error', async () => {
         const result = await mutate({ mutation: deleteCommentMutation, variables })
-        expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
@@ -254,7 +254,7 @@ describe('DeleteComment', () => {
 
       it('throws authorization error', async () => {
         const { errors } = await mutate({ mutation: deleteCommentMutation, variables })
-        expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
diff --git a/backend/src/schema/resolvers/donations.spec.js b/backend/src/schema/resolvers/donations.spec.js
index a9210f6a5..11df0c67b 100644
--- a/backend/src/schema/resolvers/donations.spec.js
+++ b/backend/src/schema/resolvers/donations.spec.js
@@ -72,7 +72,7 @@ describe('donations', () => {
       it('throws authorization error', async () => {
         authenticatedUser = undefined
         await expect(query({ query: donationsQuery, variables })).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -106,7 +106,7 @@ describe('donations', () => {
         await expect(
           mutate({ mutation: updateDonationsMutation, variables }),
         ).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -126,7 +126,7 @@ describe('donations', () => {
             mutate({ mutation: updateDonationsMutation, variables }),
           ).resolves.toMatchObject({
             data: { UpdateDonations: null },
-            errors: [{ message: 'Not Authorised!' }],
+            errors: [{ message: 'Not Authorized!' }],
           })
         })
       })
@@ -145,7 +145,7 @@ describe('donations', () => {
             mutate({ mutation: updateDonationsMutation, variables }),
           ).resolves.toMatchObject({
             data: { UpdateDonations: null },
-            errors: [{ message: 'Not Authorised!' }],
+            errors: [{ message: 'Not Authorized!' }],
           })
         })
       })
diff --git a/backend/src/schema/resolvers/emails.spec.js b/backend/src/schema/resolvers/emails.spec.js
index 39b70ac0b..b527ca3b0 100644
--- a/backend/src/schema/resolvers/emails.spec.js
+++ b/backend/src/schema/resolvers/emails.spec.js
@@ -63,7 +63,7 @@ describe('AddEmailAddress', () => {
     it('throws AuthorizationError', async () => {
       await expect(mutate({ mutation, variables })).resolves.toMatchObject({
         data: { AddEmailAddress: null },
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
       })
     })
   })
@@ -169,7 +169,7 @@ describe('VerifyEmailAddress', () => {
     it('throws AuthorizationError', async () => {
       await expect(mutate({ mutation, variables })).resolves.toMatchObject({
         data: { VerifyEmailAddress: null },
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
       })
     })
   })
diff --git a/backend/src/schema/resolvers/follow.spec.js b/backend/src/schema/resolvers/follow.spec.js
index 9cc8403e5..e0b2a277a 100644
--- a/backend/src/schema/resolvers/follow.spec.js
+++ b/backend/src/schema/resolvers/follow.spec.js
@@ -117,7 +117,7 @@ describe('follow', () => {
             variables,
           }),
         ).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
           data: { followUser: null },
         })
       })
@@ -191,7 +191,7 @@ describe('follow', () => {
         authenticatedUser = null
         await expect(mutate({ mutation: mutationUnfollowUser, variables })).resolves.toMatchObject({
           data: { unfollowUser: null },
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
diff --git a/backend/src/schema/resolvers/groups.js b/backend/src/schema/resolvers/groups.js
new file mode 100644
index 000000000..c6248c0c6
--- /dev/null
+++ b/backend/src/schema/resolvers/groups.js
@@ -0,0 +1,385 @@
+import { v4 as uuid } from 'uuid'
+import { UserInputError } from 'apollo-server'
+import CONFIG from '../../config'
+import { CATEGORIES_MIN, CATEGORIES_MAX } from '../../constants/categories'
+import { DESCRIPTION_WITHOUT_HTML_LENGTH_MIN } from '../../constants/groups'
+import { removeHtmlTags } from '../../middleware/helpers/cleanHtml.js'
+import Resolver, {
+  removeUndefinedNullValuesFromObject,
+  convertObjectToCypherMapLiteral,
+} from './helpers/Resolver'
+import { mergeImage } from './images/images'
+import { createOrUpdateLocations } from './users/location'
+
+export default {
+  Query: {
+    Group: async (_object, params, context, _resolveInfo) => {
+      const { isMember, id, slug, first, offset } = params
+      let pagination = ''
+      if (first !== undefined && offset !== undefined) pagination = `SKIP ${offset} LIMIT ${first}`
+      const matchParams = { id, slug }
+      removeUndefinedNullValuesFromObject(matchParams)
+      const session = context.driver.session()
+      const readTxResultPromise = session.readTransaction(async (txc) => {
+        const groupMatchParamsCypher = convertObjectToCypherMapLiteral(matchParams, true)
+        let groupCypher
+        if (isMember === true) {
+          groupCypher = `
+            MATCH (:User {id: $userId})-[membership:MEMBER_OF]->(group:Group${groupMatchParamsCypher})
+            WITH group, membership
+            WHERE (group.groupType IN ['public', 'closed']) OR (group.groupType = 'hidden' AND membership.role IN ['usual', 'admin', 'owner'])
+            RETURN group {.*, myRole: membership.role}
+            ${pagination}
+          `
+        } else {
+          if (isMember === false) {
+            groupCypher = `
+              MATCH (group:Group${groupMatchParamsCypher})
+              WHERE (NOT (:User {id: $userId})-[:MEMBER_OF]->(group))
+              WITH group
+              WHERE group.groupType IN ['public', 'closed']
+              RETURN group {.*, myRole: NULL}
+              ${pagination}
+            `
+          } else {
+            groupCypher = `
+              MATCH (group:Group${groupMatchParamsCypher})
+              OPTIONAL MATCH (:User {id: $userId})-[membership:MEMBER_OF]->(group)
+              WITH group, membership
+              WHERE (group.groupType IN ['public', 'closed']) OR (group.groupType = 'hidden' AND membership.role IN ['usual', 'admin', 'owner'])
+              RETURN group {.*, myRole: membership.role}
+              ${pagination}
+            `
+          }
+        }
+        const transactionResponse = await txc.run(groupCypher, {
+          userId: context.user.id,
+        })
+        return transactionResponse.records.map((record) => record.get('group'))
+      })
+      try {
+        return await readTxResultPromise
+      } catch (error) {
+        throw new Error(error)
+      } finally {
+        session.close()
+      }
+    },
+    GroupMembers: async (_object, params, context, _resolveInfo) => {
+      const { id: groupId } = params
+      const session = context.driver.session()
+      const readTxResultPromise = session.readTransaction(async (txc) => {
+        const groupMemberCypher = `
+          MATCH (user:User)-[membership:MEMBER_OF]->(:Group {id: $groupId})
+          RETURN user {.*, myRoleInGroup: membership.role}
+        `
+        const transactionResponse = await txc.run(groupMemberCypher, {
+          groupId,
+        })
+        return transactionResponse.records.map((record) => record.get('user'))
+      })
+      try {
+        return await readTxResultPromise
+      } catch (error) {
+        throw new Error(error)
+      } finally {
+        session.close()
+      }
+    },
+    GroupCount: async (_object, params, context, _resolveInfo) => {
+      const { isMember } = params
+      const {
+        user: { id: userId },
+      } = context
+      const session = context.driver.session()
+      const readTxResultPromise = session.readTransaction(async (txc) => {
+        let cypher
+        if (isMember) {
+          cypher = `MATCH (user:User)-[membership:MEMBER_OF]->(group:Group)
+                    WHERE user.id = $userId
+                    AND membership.role IN ['usual', 'admin', 'owner']
+                    RETURN toString(count(group)) AS count`
+        } else {
+          cypher = `MATCH (group:Group)
+                    OPTIONAL MATCH (user:User)-[membership:MEMBER_OF]->(group)
+                    WHERE user.id = $userId
+                    WITH group, membership
+                    WHERE group.groupType IN ['public', 'closed']
+                    OR membership.role IN ['usual', 'admin', 'owner']
+                    RETURN toString(count(group)) AS count`
+        }
+        const transactionResponse = await txc.run(cypher, { userId })
+        return transactionResponse.records.map((record) => record.get('count'))
+      })
+      try {
+        return parseInt(await readTxResultPromise)
+      } catch (error) {
+        throw new Error(error)
+      } finally {
+        session.close()
+      }
+    },
+  },
+  Mutation: {
+    CreateGroup: async (_parent, params, context, _resolveInfo) => {
+      const { categoryIds } = params
+      delete params.categoryIds
+      params.locationName = params.locationName === '' ? null : params.locationName
+      if (CONFIG.CATEGORIES_ACTIVE && (!categoryIds || categoryIds.length < CATEGORIES_MIN)) {
+        throw new UserInputError('Too view categories!')
+      }
+      if (CONFIG.CATEGORIES_ACTIVE && categoryIds && categoryIds.length > CATEGORIES_MAX) {
+        throw new UserInputError('Too many categories!')
+      }
+      if (
+        params.description === undefined ||
+        params.description === null ||
+        removeHtmlTags(params.description).length < DESCRIPTION_WITHOUT_HTML_LENGTH_MIN
+      ) {
+        throw new UserInputError('Description too short!')
+      }
+      params.id = params.id || uuid()
+      const session = context.driver.session()
+      const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        const categoriesCypher =
+          CONFIG.CATEGORIES_ACTIVE && categoryIds
+            ? `
+                WITH group, membership
+                UNWIND $categoryIds AS categoryId
+                MATCH (category:Category {id: categoryId})
+                MERGE (group)-[:CATEGORIZED]->(category)
+              `
+            : ''
+        const ownerCreateGroupTransactionResponse = await transaction.run(
+          `
+            CREATE (group:Group)
+            SET group += $params
+            SET group.createdAt = toString(datetime())
+            SET group.updatedAt = toString(datetime())
+            WITH group
+            MATCH (owner:User {id: $userId})
+            MERGE (owner)-[:CREATED]->(group)
+            MERGE (owner)-[membership:MEMBER_OF]->(group)
+            SET
+              membership.createdAt = toString(datetime()),
+              membership.updatedAt = null,
+              membership.role = 'owner'
+            ${categoriesCypher}
+            RETURN group {.*, myRole: membership.role}
+          `,
+          { userId: context.user.id, categoryIds, params },
+        )
+        const [group] = await ownerCreateGroupTransactionResponse.records.map((record) =>
+          record.get('group'),
+        )
+        return group
+      })
+      try {
+        const group = await writeTxResultPromise
+        // TODO: put in a middleware, see "UpdateGroup", "UpdateUser"
+        await createOrUpdateLocations('Group', params.id, params.locationName, session)
+        return group
+      } catch (error) {
+        if (error.code === 'Neo.ClientError.Schema.ConstraintValidationFailed')
+          throw new UserInputError('Group with this slug already exists!')
+        throw new Error(error)
+      } finally {
+        session.close()
+      }
+    },
+    UpdateGroup: async (_parent, params, context, _resolveInfo) => {
+      const { categoryIds } = params
+      delete params.categoryIds
+      const { id: groupId, avatar: avatarInput } = params
+      delete params.avatar
+      params.locationName = params.locationName === '' ? null : params.locationName
+
+      if (CONFIG.CATEGORIES_ACTIVE && categoryIds) {
+        if (categoryIds.length < CATEGORIES_MIN) {
+          throw new UserInputError('Too view categories!')
+        }
+        if (categoryIds.length > CATEGORIES_MAX) {
+          throw new UserInputError('Too many categories!')
+        }
+      }
+      if (
+        params.description &&
+        removeHtmlTags(params.description).length < DESCRIPTION_WITHOUT_HTML_LENGTH_MIN
+      ) {
+        throw new UserInputError('Description too short!')
+      }
+      const session = context.driver.session()
+      if (CONFIG.CATEGORIES_ACTIVE && categoryIds && categoryIds.length) {
+        const cypherDeletePreviousRelations = `
+          MATCH (group:Group {id: $groupId})-[previousRelations:CATEGORIZED]->(category:Category)
+          DELETE previousRelations
+          RETURN group, category
+        `
+        await session.writeTransaction((transaction) => {
+          return transaction.run(cypherDeletePreviousRelations, { groupId })
+        })
+      }
+      const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        let updateGroupCypher = `
+          MATCH (group:Group {id: $groupId})
+          SET group += $params
+          SET group.updatedAt = toString(datetime())
+          WITH group
+        `
+        if (CONFIG.CATEGORIES_ACTIVE && categoryIds && categoryIds.length) {
+          updateGroupCypher += `
+            UNWIND $categoryIds AS categoryId
+            MATCH (category:Category {id: categoryId})
+            MERGE (group)-[:CATEGORIZED]->(category)
+            WITH group
+          `
+        }
+        updateGroupCypher += `
+          OPTIONAL MATCH (:User {id: $userId})-[membership:MEMBER_OF]->(group)
+          RETURN group {.*, myRole: membership.role}
+        `
+        const transactionResponse = await transaction.run(updateGroupCypher, {
+          groupId,
+          userId: context.user.id,
+          categoryIds,
+          params,
+        })
+        const [group] = await transactionResponse.records.map((record) => record.get('group'))
+        if (avatarInput) {
+          await mergeImage(group, 'AVATAR_IMAGE', avatarInput, { transaction })
+        }
+        return group
+      })
+      try {
+        const group = await writeTxResultPromise
+        // TODO: put in a middleware, see "CreateGroup", "UpdateUser"
+        await createOrUpdateLocations('Group', params.id, params.locationName, session)
+        return group
+      } catch (error) {
+        if (error.code === 'Neo.ClientError.Schema.ConstraintValidationFailed')
+          throw new UserInputError('Group with this slug already exists!')
+        throw new Error(error)
+      } finally {
+        session.close()
+      }
+    },
+    JoinGroup: async (_parent, params, context, _resolveInfo) => {
+      const { groupId, userId } = params
+      const session = context.driver.session()
+      const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        const joinGroupCypher = `
+          MATCH (member:User {id: $userId}), (group:Group {id: $groupId})
+          MERGE (member)-[membership:MEMBER_OF]->(group)
+          ON CREATE SET
+            membership.createdAt = toString(datetime()),
+            membership.updatedAt = null,
+            membership.role =
+              CASE WHEN group.groupType = 'public'
+                THEN 'usual'
+                ELSE 'pending'
+                END
+          RETURN member {.*, myRoleInGroup: membership.role}
+        `
+        const transactionResponse = await transaction.run(joinGroupCypher, { groupId, userId })
+        const [member] = await transactionResponse.records.map((record) => record.get('member'))
+        return member
+      })
+      try {
+        return await writeTxResultPromise
+      } catch (error) {
+        throw new Error(error)
+      } finally {
+        session.close()
+      }
+    },
+    LeaveGroup: async (_parent, params, context, _resolveInfo) => {
+      const { groupId, userId } = params
+      const session = context.driver.session()
+      const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        const leaveGroupCypher = `
+          MATCH (member:User {id: $userId})-[membership:MEMBER_OF]->(group:Group {id: $groupId})
+          DELETE membership
+          WITH member, group
+          OPTIONAL MATCH (p:Post)-[:IN]->(group)
+          WHERE NOT group.groupType = 'public' 
+          WITH member, group, collect(p) AS posts
+          FOREACH (post IN posts |
+            MERGE (member)-[:CANNOT_SEE]->(post))
+          RETURN member {.*, myRoleInGroup: NULL}
+        `
+
+        const transactionResponse = await transaction.run(leaveGroupCypher, { groupId, userId })
+        const [member] = await transactionResponse.records.map((record) => record.get('member'))
+        return member
+      })
+      try {
+        return await writeTxResultPromise
+      } catch (error) {
+        throw new Error(error)
+      } finally {
+        session.close()
+      }
+    },
+    ChangeGroupMemberRole: async (_parent, params, context, _resolveInfo) => {
+      const { groupId, userId, roleInGroup } = params
+      const session = context.driver.session()
+      const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        let postRestrictionCypher = ''
+        if (['usual', 'admin', 'owner'].includes(roleInGroup)) {
+          postRestrictionCypher = `
+            WITH group, member, membership
+            FOREACH (restriction IN [(member)-[r:CANNOT_SEE]->(:Post)-[:IN]->(group) | r] |
+              DELETE restriction)`
+        } else {
+          postRestrictionCypher = `
+            WITH group, member, membership
+            FOREACH (post IN [(p:Post)-[:IN]->(group) | p] |
+              MERGE (member)-[:CANNOT_SEE]->(post))`
+        }
+
+        const joinGroupCypher = `
+          MATCH (member:User {id: $userId})
+          MATCH (group:Group {id: $groupId})
+          MERGE (member)-[membership:MEMBER_OF]->(group)
+          ON CREATE SET
+            membership.createdAt = toString(datetime()),
+            membership.updatedAt = null,
+            membership.role = $roleInGroup
+          ON MATCH SET
+            membership.updatedAt = toString(datetime()),
+            membership.role = $roleInGroup
+          ${postRestrictionCypher}
+          RETURN member {.*, myRoleInGroup: membership.role}
+        `
+
+        const transactionResponse = await transaction.run(joinGroupCypher, {
+          groupId,
+          userId,
+          roleInGroup,
+        })
+        const [member] = await transactionResponse.records.map((record) => record.get('member'))
+        return member
+      })
+      try {
+        return await writeTxResultPromise
+      } catch (error) {
+        throw new Error(error)
+      } finally {
+        session.close()
+      }
+    },
+  },
+  Group: {
+    ...Resolver('Group', {
+      undefinedToNull: ['deleted', 'disabled', 'locationName', 'about'],
+      hasMany: {
+        categories: '-[:CATEGORIZED]->(related:Category)',
+        posts: '<-[:IN]-(related:Post)',
+      },
+      hasOne: {
+        avatar: '-[:AVATAR_IMAGE]->(related:Image)',
+        location: '-[:IS_IN]->(related:Location)',
+      },
+    }),
+  },
+}
diff --git a/backend/src/schema/resolvers/groups.spec.js b/backend/src/schema/resolvers/groups.spec.js
new file mode 100644
index 000000000..3be8c0f90
--- /dev/null
+++ b/backend/src/schema/resolvers/groups.spec.js
@@ -0,0 +1,2984 @@
+import { createTestClient } from 'apollo-server-testing'
+import Factory, { cleanDatabase } from '../../db/factories'
+import {
+  createGroupMutation,
+  updateGroupMutation,
+  joinGroupMutation,
+  leaveGroupMutation,
+  changeGroupMemberRoleMutation,
+  groupMembersQuery,
+  groupQuery,
+} from '../../db/graphql/groups'
+import { getNeode, getDriver } from '../../db/neo4j'
+import createServer from '../../server'
+import CONFIG from '../../config'
+
+const driver = getDriver()
+const neode = getNeode()
+
+let authenticatedUser
+let user
+let noMemberUser
+let pendingMemberUser
+let usualMemberUser
+let adminMemberUser
+let ownerMemberUser
+let secondOwnerMemberUser
+
+const categoryIds = ['cat9', 'cat4', 'cat15']
+const descriptionAdditional100 =
+  ' 123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789'
+let variables = {}
+
+const { server } = createServer({
+  context: () => {
+    return {
+      driver,
+      neode,
+      user: authenticatedUser,
+    }
+  },
+})
+const { mutate, query } = createTestClient(server)
+
+const seedBasicsAndClearAuthentication = async () => {
+  variables = {}
+  user = await Factory.build(
+    'user',
+    {
+      id: 'current-user',
+      name: 'TestUser',
+    },
+    {
+      email: 'test@example.org',
+      password: '1234',
+    },
+  )
+  await Promise.all([
+    neode.create('Category', {
+      id: 'cat4',
+      name: 'Environment & Nature',
+      slug: 'environment-nature',
+      icon: 'tree',
+    }),
+    neode.create('Category', {
+      id: 'cat9',
+      name: 'Democracy & Politics',
+      slug: 'democracy-politics',
+      icon: 'university',
+    }),
+    neode.create('Category', {
+      id: 'cat15',
+      name: 'Consumption & Sustainability',
+      slug: 'consumption-sustainability',
+      icon: 'shopping-cart',
+    }),
+    neode.create('Category', {
+      id: 'cat27',
+      name: 'Animal Protection',
+      slug: 'animal-protection',
+      icon: 'paw',
+    }),
+  ])
+  authenticatedUser = null
+}
+
+const seedComplexScenarioAndClearAuthentication = async () => {
+  await seedBasicsAndClearAuthentication()
+  // create users
+  noMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'none-member-user',
+      name: 'None Member TestUser',
+    },
+    {
+      email: 'none-member-user@example.org',
+      password: '1234',
+    },
+  )
+  pendingMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'pending-member-user',
+      name: 'Pending Member TestUser',
+    },
+    {
+      email: 'pending-member-user@example.org',
+      password: '1234',
+    },
+  )
+  usualMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'usual-member-user',
+      name: 'Usual Member TestUser',
+    },
+    {
+      email: 'usual-member-user@example.org',
+      password: '1234',
+    },
+  )
+  adminMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'admin-member-user',
+      name: 'Admin Member TestUser',
+    },
+    {
+      email: 'admin-member-user@example.org',
+      password: '1234',
+    },
+  )
+  ownerMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'owner-member-user',
+      name: 'Owner Member TestUser',
+    },
+    {
+      email: 'owner-member-user@example.org',
+      password: '1234',
+    },
+  )
+  secondOwnerMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'second-owner-member-user',
+      name: 'Second Owner Member TestUser',
+    },
+    {
+      email: 'second-owner-member-user@example.org',
+      password: '1234',
+    },
+  )
+  // create groups
+  // public-group
+  authenticatedUser = await usualMemberUser.toJson()
+  await mutate({
+    mutation: createGroupMutation(),
+    variables: {
+      id: 'public-group',
+      name: 'The Best Group',
+      about: 'We will change the world!',
+      description: 'Some description' + descriptionAdditional100,
+      groupType: 'public',
+      actionRadius: 'regional',
+      categoryIds,
+    },
+  })
+  await mutate({
+    mutation: joinGroupMutation(),
+    variables: {
+      groupId: 'public-group',
+      userId: 'owner-of-closed-group',
+    },
+  })
+  await mutate({
+    mutation: joinGroupMutation(),
+    variables: {
+      groupId: 'public-group',
+      userId: 'owner-of-hidden-group',
+    },
+  })
+  // closed-group
+  authenticatedUser = await ownerMemberUser.toJson()
+  await mutate({
+    mutation: createGroupMutation(),
+    variables: {
+      id: 'closed-group',
+      name: 'Uninteresting Group',
+      about: 'We will change nothing!',
+      description: 'We love it like it is!?' + descriptionAdditional100,
+      groupType: 'closed',
+      actionRadius: 'national',
+      categoryIds,
+    },
+  })
+  // hidden-group
+  authenticatedUser = await adminMemberUser.toJson()
+  await mutate({
+    mutation: createGroupMutation(),
+    variables: {
+      id: 'hidden-group',
+      name: 'Investigative Journalism Group',
+      about: 'We will change all.',
+      description: 'We research …' + descriptionAdditional100,
+      groupType: 'hidden',
+      actionRadius: 'global',
+      categoryIds,
+    },
+  })
+  // 'JoinGroup' mutation does not work in hidden groups so we join them by 'ChangeGroupMemberRole' through the owner
+  await mutate({
+    mutation: changeGroupMemberRoleMutation(),
+    variables: {
+      groupId: 'hidden-group',
+      userId: 'admin-member-user',
+      roleInGroup: 'usual',
+    },
+  })
+  await mutate({
+    mutation: changeGroupMemberRoleMutation(),
+    variables: {
+      groupId: 'hidden-group',
+      userId: 'second-owner-member-user',
+      roleInGroup: 'usual',
+    },
+  })
+  await mutate({
+    mutation: changeGroupMemberRoleMutation(),
+    variables: {
+      groupId: 'hidden-group',
+      userId: 'admin-member-user',
+      roleInGroup: 'usual',
+    },
+  })
+  await mutate({
+    mutation: changeGroupMemberRoleMutation(),
+    variables: {
+      groupId: 'hidden-group',
+      userId: 'second-owner-member-user',
+      roleInGroup: 'usual',
+    },
+  })
+
+  authenticatedUser = null
+}
+
+beforeAll(async () => {
+  await cleanDatabase()
+})
+
+afterAll(async () => {
+  await cleanDatabase()
+})
+
+describe('in mode', () => {
+  describe('clean db after each single test', () => {
+    beforeEach(async () => {
+      await seedBasicsAndClearAuthentication()
+    })
+
+    // TODO: avoid database clean after each test in the future if possible for performance and flakyness reasons by filling the database step by step, see issue https://github.com/Ocelot-Social-Community/Ocelot-Social/issues/4543
+    afterEach(async () => {
+      await cleanDatabase()
+    })
+
+    describe('CreateGroup', () => {
+      beforeEach(() => {
+        variables = {
+          ...variables,
+          id: 'g589',
+          name: 'The Best Group',
+          slug: 'the-group',
+          about: 'We will change the world!',
+          description: 'Some description' + descriptionAdditional100,
+          groupType: 'public',
+          actionRadius: 'regional',
+          categoryIds,
+          locationName: 'Hamburg, Germany',
+        }
+      })
+
+      describe('unauthenticated', () => {
+        it('throws authorization error', async () => {
+          const { errors } = await mutate({ mutation: createGroupMutation(), variables })
+          expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+        })
+      })
+
+      describe('authenticated', () => {
+        beforeEach(async () => {
+          authenticatedUser = await user.toJson()
+        })
+
+        it('creates a group', async () => {
+          await expect(
+            mutate({ mutation: createGroupMutation(), variables }),
+          ).resolves.toMatchObject({
+            data: {
+              CreateGroup: {
+                name: 'The Best Group',
+                slug: 'the-group',
+                about: 'We will change the world!',
+                description: 'Some description' + descriptionAdditional100,
+                descriptionExcerpt: 'Some description' + descriptionAdditional100,
+                groupType: 'public',
+                actionRadius: 'regional',
+                locationName: 'Hamburg, Germany',
+                location: expect.objectContaining({
+                  name: 'Hamburg',
+                  nameDE: 'Hamburg',
+                  nameEN: 'Hamburg',
+                }),
+              },
+            },
+            errors: undefined,
+          })
+        })
+
+        it('assigns the authenticated user as owner', async () => {
+          await expect(
+            mutate({ mutation: createGroupMutation(), variables }),
+          ).resolves.toMatchObject({
+            data: {
+              CreateGroup: {
+                name: 'The Best Group',
+                myRole: 'owner',
+              },
+            },
+            errors: undefined,
+          })
+        })
+
+        it('has "disabled" and "deleted" default to "false"', async () => {
+          await expect(
+            mutate({ mutation: createGroupMutation(), variables }),
+          ).resolves.toMatchObject({
+            data: { CreateGroup: { disabled: false, deleted: false } },
+          })
+        })
+
+        describe('description', () => {
+          describe('length without HTML', () => {
+            describe('less then 100 chars', () => {
+              it('throws error: "Description too short!"', async () => {
+                const { errors } = await mutate({
+                  mutation: createGroupMutation(),
+                  variables: {
+                    ...variables,
+                    description:
+                      '0123456789' +
+                      '<a href="https://domain.org/0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789">0123456789</a>',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Description too short!')
+              })
+            })
+          })
+        })
+
+        describe('categories', () => {
+          beforeEach(() => {
+            CONFIG.CATEGORIES_ACTIVE = true
+          })
+
+          describe('with matching amount of categories', () => {
+            it('has new categories', async () => {
+              await expect(
+                mutate({
+                  mutation: createGroupMutation(),
+                  variables: {
+                    ...variables,
+                    categoryIds: ['cat4', 'cat27'],
+                  },
+                }),
+              ).resolves.toMatchObject({
+                data: {
+                  CreateGroup: {
+                    categories: expect.arrayContaining([
+                      expect.objectContaining({ id: 'cat4' }),
+                      expect.objectContaining({ id: 'cat27' }),
+                    ]),
+                    myRole: 'owner',
+                  },
+                },
+                errors: undefined,
+              })
+            })
+          })
+
+          describe('not even one', () => {
+            describe('by "categoryIds: null"', () => {
+              it('throws error: "Too view categories!"', async () => {
+                const { errors } = await mutate({
+                  mutation: createGroupMutation(),
+                  variables: { ...variables, categoryIds: null },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Too view categories!')
+              })
+            })
+
+            describe('by "categoryIds: []"', () => {
+              it('throws error: "Too view categories!"', async () => {
+                const { errors } = await mutate({
+                  mutation: createGroupMutation(),
+                  variables: { ...variables, categoryIds: [] },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Too view categories!')
+              })
+            })
+          })
+
+          describe('four', () => {
+            it('throws error: "Too many categories!"', async () => {
+              const { errors } = await mutate({
+                mutation: createGroupMutation(),
+                variables: { ...variables, categoryIds: ['cat9', 'cat4', 'cat15', 'cat27'] },
+              })
+              expect(errors[0]).toHaveProperty('message', 'Too many categories!')
+            })
+          })
+        })
+      })
+    })
+  })
+
+  describe('building up – clean db after each resolver', () => {
+    describe('Group', () => {
+      beforeAll(async () => {
+        await seedBasicsAndClearAuthentication()
+      })
+
+      afterAll(async () => {
+        await cleanDatabase()
+      })
+
+      describe('unauthenticated', () => {
+        it('throws authorization error', async () => {
+          const { errors } = await query({ query: groupQuery(), variables: {} })
+          expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+        })
+      })
+
+      describe('authenticated', () => {
+        let otherUser
+        let ownerOfHiddenGroupUser
+
+        beforeAll(async () => {
+          otherUser = await Factory.build(
+            'user',
+            {
+              id: 'other-user',
+              name: 'Other TestUser',
+            },
+            {
+              email: 'other-user@example.org',
+              password: '1234',
+            },
+          )
+          ownerOfHiddenGroupUser = await Factory.build(
+            'user',
+            {
+              id: 'owner-of-hidden-group',
+              name: 'Owner Of Hidden Group',
+            },
+            {
+              email: 'owner-of-hidden-group@example.org',
+              password: '1234',
+            },
+          )
+          authenticatedUser = await otherUser.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'others-group',
+              name: 'Uninteresting Group',
+              about: 'We will change nothing!',
+              description: 'We love it like it is!?' + descriptionAdditional100,
+              groupType: 'closed',
+              actionRadius: 'global',
+              categoryIds,
+            },
+          })
+          authenticatedUser = await ownerOfHiddenGroupUser.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'hidden-group',
+              name: 'Investigative Journalism Group',
+              about: 'We will change all.',
+              description: 'We research …' + descriptionAdditional100,
+              groupType: 'hidden',
+              actionRadius: 'global',
+              categoryIds,
+            },
+          })
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'second-hidden-group',
+              name: 'Second Investigative Journalism Group',
+              about: 'We will change all.',
+              description: 'We research …' + descriptionAdditional100,
+              groupType: 'hidden',
+              actionRadius: 'global',
+              categoryIds,
+            },
+          })
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'second-hidden-group',
+              userId: 'current-user',
+              roleInGroup: 'pending',
+            },
+          })
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'third-hidden-group',
+              name: 'Third Investigative Journalism Group',
+              about: 'We will change all.',
+              description: 'We research …' + descriptionAdditional100,
+              groupType: 'hidden',
+              actionRadius: 'global',
+              categoryIds,
+            },
+          })
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'third-hidden-group',
+              userId: 'current-user',
+              roleInGroup: 'usual',
+            },
+          })
+          authenticatedUser = await user.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'my-group',
+              name: 'The Best Group',
+              about: 'We will change the world!',
+              description: 'Some description' + descriptionAdditional100,
+              groupType: 'public',
+              actionRadius: 'regional',
+              categoryIds,
+              locationName: 'Hamburg, Germany',
+            },
+          })
+        })
+
+        describe('query groups', () => {
+          describe('in general finds only listed groups – no hidden groups where user is none or pending member', () => {
+            describe('without any filters', () => {
+              it('finds all listed groups – including the set descriptionExcerpts and locations', async () => {
+                const result = await query({ query: groupQuery(), variables: {} })
+                expect(result).toMatchObject({
+                  data: {
+                    Group: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'my-group',
+                        slug: 'the-best-group',
+                        descriptionExcerpt: 'Some description' + descriptionAdditional100,
+                        locationName: 'Hamburg, Germany',
+                        location: expect.objectContaining({
+                          name: 'Hamburg',
+                          nameDE: 'Hamburg',
+                          nameEN: 'Hamburg',
+                        }),
+                        myRole: 'owner',
+                      }),
+                      expect.objectContaining({
+                        id: 'others-group',
+                        slug: 'uninteresting-group',
+                        descriptionExcerpt: 'We love it like it is!?' + descriptionAdditional100,
+                        locationName: null,
+                        location: null,
+                        myRole: null,
+                      }),
+                      expect.objectContaining({
+                        id: 'third-hidden-group',
+                        slug: 'third-investigative-journalism-group',
+                        descriptionExcerpt: 'We research …' + descriptionAdditional100,
+                        myRole: 'usual',
+                        locationName: null,
+                        location: null,
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.Group.length).toBe(3)
+              })
+
+              describe('categories', () => {
+                beforeEach(() => {
+                  CONFIG.CATEGORIES_ACTIVE = true
+                })
+
+                it('has set categories', async () => {
+                  await expect(
+                    query({ query: groupQuery(), variables: {} }),
+                  ).resolves.toMatchObject({
+                    data: {
+                      Group: expect.arrayContaining([
+                        expect.objectContaining({
+                          id: 'my-group',
+                          slug: 'the-best-group',
+                          categories: expect.arrayContaining([
+                            expect.objectContaining({ id: 'cat4' }),
+                            expect.objectContaining({ id: 'cat9' }),
+                            expect.objectContaining({ id: 'cat15' }),
+                          ]),
+                          myRole: 'owner',
+                        }),
+                        expect.objectContaining({
+                          id: 'others-group',
+                          slug: 'uninteresting-group',
+                          categories: expect.arrayContaining([
+                            expect.objectContaining({ id: 'cat4' }),
+                            expect.objectContaining({ id: 'cat9' }),
+                            expect.objectContaining({ id: 'cat15' }),
+                          ]),
+                          myRole: null,
+                        }),
+                      ]),
+                    },
+                    errors: undefined,
+                  })
+                })
+              })
+            })
+
+            describe('with given id', () => {
+              describe("id = 'my-group'", () => {
+                it('finds only the listed group with this id', async () => {
+                  const result = await query({ query: groupQuery(), variables: { id: 'my-group' } })
+                  expect(result).toMatchObject({
+                    data: {
+                      Group: [
+                        expect.objectContaining({
+                          id: 'my-group',
+                          slug: 'the-best-group',
+                          myRole: 'owner',
+                        }),
+                      ],
+                    },
+                    errors: undefined,
+                  })
+                  expect(result.data.Group.length).toBe(1)
+                })
+              })
+
+              describe("id = 'third-hidden-group'", () => {
+                it("finds only the hidden group where I'm 'usual' member", async () => {
+                  const result = await query({
+                    query: groupQuery(),
+                    variables: { id: 'third-hidden-group' },
+                  })
+                  expect(result).toMatchObject({
+                    data: {
+                      Group: expect.arrayContaining([
+                        expect.objectContaining({
+                          id: 'third-hidden-group',
+                          slug: 'third-investigative-journalism-group',
+                          myRole: 'usual',
+                        }),
+                      ]),
+                    },
+                    errors: undefined,
+                  })
+                  expect(result.data.Group.length).toBe(1)
+                })
+              })
+
+              describe("id = 'second-hidden-group'", () => {
+                it("finds no hidden group where I'm 'pending' member", async () => {
+                  const result = await query({
+                    query: groupQuery(),
+                    variables: { id: 'second-hidden-group' },
+                  })
+                  expect(result.data.Group.length).toBe(0)
+                })
+              })
+
+              describe("id = 'hidden-group'", () => {
+                it("finds no hidden group where I'm not(!) a member at all", async () => {
+                  const result = await query({
+                    query: groupQuery(),
+                    variables: { id: 'hidden-group' },
+                  })
+                  expect(result.data.Group.length).toBe(0)
+                })
+              })
+            })
+
+            describe('with given slug', () => {
+              describe("slug = 'the-best-group'", () => {
+                it('finds only the listed group with this slug', async () => {
+                  const result = await query({
+                    query: groupQuery(),
+                    variables: { slug: 'the-best-group' },
+                  })
+                  expect(result).toMatchObject({
+                    data: {
+                      Group: [
+                        expect.objectContaining({
+                          id: 'my-group',
+                          slug: 'the-best-group',
+                          myRole: 'owner',
+                        }),
+                      ],
+                    },
+                    errors: undefined,
+                  })
+                  expect(result.data.Group.length).toBe(1)
+                })
+              })
+
+              describe("slug = 'third-investigative-journalism-group'", () => {
+                it("finds only the hidden group where I'm 'usual' member", async () => {
+                  const result = await query({
+                    query: groupQuery(),
+                    variables: { slug: 'third-investigative-journalism-group' },
+                  })
+                  expect(result).toMatchObject({
+                    data: {
+                      Group: expect.arrayContaining([
+                        expect.objectContaining({
+                          id: 'third-hidden-group',
+                          slug: 'third-investigative-journalism-group',
+                          myRole: 'usual',
+                        }),
+                      ]),
+                    },
+                    errors: undefined,
+                  })
+                  expect(result.data.Group.length).toBe(1)
+                })
+              })
+
+              describe("slug = 'second-investigative-journalism-group'", () => {
+                it("finds no hidden group where I'm 'pending' member", async () => {
+                  const result = await query({
+                    query: groupQuery(),
+                    variables: { slug: 'second-investigative-journalism-group' },
+                  })
+                  expect(result.data.Group.length).toBe(0)
+                })
+              })
+
+              describe("slug = 'investigative-journalism-group'", () => {
+                it("finds no hidden group where I'm not(!) a member at all", async () => {
+                  const result = await query({
+                    query: groupQuery(),
+                    variables: { slug: 'investigative-journalism-group' },
+                  })
+                  expect(result.data.Group.length).toBe(0)
+                })
+              })
+            })
+
+            describe('isMember = true', () => {
+              it('finds only listed groups where user is member', async () => {
+                const result = await query({ query: groupQuery(), variables: { isMember: true } })
+                expect(result).toMatchObject({
+                  data: {
+                    Group: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'my-group',
+                        slug: 'the-best-group',
+                        myRole: 'owner',
+                      }),
+                      expect.objectContaining({
+                        id: 'third-hidden-group',
+                        slug: 'third-investigative-journalism-group',
+                        myRole: 'usual',
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.Group.length).toBe(2)
+              })
+            })
+
+            describe('isMember = false', () => {
+              it('finds only listed groups where user is not(!) member', async () => {
+                const result = await query({ query: groupQuery(), variables: { isMember: false } })
+                expect(result).toMatchObject({
+                  data: {
+                    Group: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'others-group',
+                        slug: 'uninteresting-group',
+                        myRole: null,
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.Group.length).toBe(1)
+              })
+            })
+          })
+        })
+      })
+    })
+
+    describe('JoinGroup', () => {
+      beforeAll(async () => {
+        await seedBasicsAndClearAuthentication()
+      })
+
+      afterAll(async () => {
+        await cleanDatabase()
+      })
+
+      describe('unauthenticated', () => {
+        it('throws authorization error', async () => {
+          const { errors } = await mutate({
+            mutation: joinGroupMutation(),
+            variables: {
+              groupId: 'not-existing-group',
+              userId: 'current-user',
+            },
+          })
+          expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+        })
+      })
+
+      describe('authenticated', () => {
+        let ownerOfClosedGroupUser
+        let ownerOfHiddenGroupUser
+
+        beforeAll(async () => {
+          // create users
+          ownerOfClosedGroupUser = await Factory.build(
+            'user',
+            {
+              id: 'owner-of-closed-group',
+              name: 'Owner Of Closed Group',
+            },
+            {
+              email: 'owner-of-closed-group@example.org',
+              password: '1234',
+            },
+          )
+          ownerOfHiddenGroupUser = await Factory.build(
+            'user',
+            {
+              id: 'owner-of-hidden-group',
+              name: 'Owner Of Hidden Group',
+            },
+            {
+              email: 'owner-of-hidden-group@example.org',
+              password: '1234',
+            },
+          )
+          // create groups
+          // public-group
+          authenticatedUser = await ownerOfClosedGroupUser.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'closed-group',
+              name: 'Uninteresting Group',
+              about: 'We will change nothing!',
+              description: 'We love it like it is!?' + descriptionAdditional100,
+              groupType: 'closed',
+              actionRadius: 'national',
+              categoryIds,
+            },
+          })
+          authenticatedUser = await ownerOfHiddenGroupUser.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'hidden-group',
+              name: 'Investigative Journalism Group',
+              about: 'We will change all.',
+              description: 'We research …' + descriptionAdditional100,
+              groupType: 'hidden',
+              actionRadius: 'global',
+              categoryIds,
+            },
+          })
+          authenticatedUser = await user.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'public-group',
+              name: 'The Best Group',
+              about: 'We will change the world!',
+              description: 'Some description' + descriptionAdditional100,
+              groupType: 'public',
+              actionRadius: 'regional',
+              categoryIds,
+            },
+          })
+        })
+
+        describe('public group', () => {
+          describe('joined by "owner-of-closed-group"', () => {
+            it('has "usual" as membership role', async () => {
+              await expect(
+                mutate({
+                  mutation: joinGroupMutation(),
+                  variables: {
+                    groupId: 'public-group',
+                    userId: 'owner-of-closed-group',
+                  },
+                }),
+              ).resolves.toMatchObject({
+                data: {
+                  JoinGroup: {
+                    id: 'owner-of-closed-group',
+                    myRoleInGroup: 'usual',
+                  },
+                },
+                errors: undefined,
+              })
+            })
+          })
+
+          describe('joined by its owner', () => {
+            describe('does not create additional "MEMBER_OF" relation and therefore', () => {
+              it('has still "owner" as membership role', async () => {
+                await expect(
+                  mutate({
+                    mutation: joinGroupMutation(),
+                    variables: {
+                      groupId: 'public-group',
+                      userId: 'current-user',
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    JoinGroup: {
+                      id: 'current-user',
+                      myRoleInGroup: 'owner',
+                    },
+                  },
+                  errors: undefined,
+                })
+              })
+            })
+          })
+        })
+
+        describe('closed group', () => {
+          describe('joined by "current-user"', () => {
+            it('has "pending" as membership role', async () => {
+              await expect(
+                mutate({
+                  mutation: joinGroupMutation(),
+                  variables: {
+                    groupId: 'closed-group',
+                    userId: 'current-user',
+                  },
+                }),
+              ).resolves.toMatchObject({
+                data: {
+                  JoinGroup: {
+                    id: 'current-user',
+                    myRoleInGroup: 'pending',
+                  },
+                },
+                errors: undefined,
+              })
+            })
+          })
+
+          describe('joined by its owner', () => {
+            describe('does not create additional "MEMBER_OF" relation and therefore', () => {
+              it('has still "owner" as membership role', async () => {
+                await expect(
+                  mutate({
+                    mutation: joinGroupMutation(),
+                    variables: {
+                      groupId: 'closed-group',
+                      userId: 'owner-of-closed-group',
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    JoinGroup: {
+                      id: 'owner-of-closed-group',
+                      myRoleInGroup: 'owner',
+                    },
+                  },
+                  errors: undefined,
+                })
+              })
+            })
+          })
+        })
+
+        describe('hidden group', () => {
+          describe('joined by "owner-of-closed-group"', () => {
+            it('throws authorization error', async () => {
+              const { errors } = await query({
+                query: joinGroupMutation(),
+                variables: {
+                  groupId: 'hidden-group',
+                  userId: 'owner-of-closed-group',
+                },
+              })
+              expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+            })
+          })
+
+          describe('joined by its owner', () => {
+            describe('does not create additional "MEMBER_OF" relation and therefore', () => {
+              it('has still "owner" as membership role', async () => {
+                await expect(
+                  mutate({
+                    mutation: joinGroupMutation(),
+                    variables: {
+                      groupId: 'hidden-group',
+                      userId: 'owner-of-hidden-group',
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    JoinGroup: {
+                      id: 'owner-of-hidden-group',
+                      myRoleInGroup: 'owner',
+                    },
+                  },
+                  errors: undefined,
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+
+    describe('GroupMembers', () => {
+      beforeAll(async () => {
+        await seedBasicsAndClearAuthentication()
+      })
+
+      afterAll(async () => {
+        await cleanDatabase()
+      })
+
+      describe('unauthenticated', () => {
+        it('throws authorization error', async () => {
+          variables = {
+            id: 'not-existing-group',
+          }
+          const { errors } = await query({ query: groupMembersQuery(), variables })
+          expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+        })
+      })
+
+      describe('authenticated', () => {
+        let otherUser
+        let pendingUser
+        let ownerOfClosedGroupUser
+        let ownerOfHiddenGroupUser
+
+        beforeAll(async () => {
+          // create users
+          otherUser = await Factory.build(
+            'user',
+            {
+              id: 'other-user',
+              name: 'Other TestUser',
+            },
+            {
+              email: 'other-user@example.org',
+              password: '1234',
+            },
+          )
+          pendingUser = await Factory.build(
+            'user',
+            {
+              id: 'pending-user',
+              name: 'Pending TestUser',
+            },
+            {
+              email: 'pending@example.org',
+              password: '1234',
+            },
+          )
+          ownerOfClosedGroupUser = await Factory.build(
+            'user',
+            {
+              id: 'owner-of-closed-group',
+              name: 'Owner Of Closed Group',
+            },
+            {
+              email: 'owner-of-closed-group@example.org',
+              password: '1234',
+            },
+          )
+          ownerOfHiddenGroupUser = await Factory.build(
+            'user',
+            {
+              id: 'owner-of-hidden-group',
+              name: 'Owner Of Hidden Group',
+            },
+            {
+              email: 'owner-of-hidden-group@example.org',
+              password: '1234',
+            },
+          )
+          // create groups
+          // public-group
+          authenticatedUser = await user.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'public-group',
+              name: 'The Best Group',
+              about: 'We will change the world!',
+              description: 'Some description' + descriptionAdditional100,
+              groupType: 'public',
+              actionRadius: 'regional',
+              categoryIds,
+            },
+          })
+          await mutate({
+            mutation: joinGroupMutation(),
+            variables: {
+              groupId: 'public-group',
+              userId: 'owner-of-closed-group',
+            },
+          })
+          await mutate({
+            mutation: joinGroupMutation(),
+            variables: {
+              groupId: 'public-group',
+              userId: 'owner-of-hidden-group',
+            },
+          })
+          // closed-group
+          authenticatedUser = await ownerOfClosedGroupUser.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'closed-group',
+              name: 'Uninteresting Group',
+              about: 'We will change nothing!',
+              description: 'We love it like it is!?' + descriptionAdditional100,
+              groupType: 'closed',
+              actionRadius: 'national',
+              categoryIds,
+            },
+          })
+          await mutate({
+            mutation: joinGroupMutation(),
+            variables: {
+              groupId: 'closed-group',
+              userId: 'current-user',
+            },
+          })
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'closed-group',
+              userId: 'owner-of-hidden-group',
+              roleInGroup: 'usual',
+            },
+          })
+          // hidden-group
+          authenticatedUser = await ownerOfHiddenGroupUser.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'hidden-group',
+              name: 'Investigative Journalism Group',
+              about: 'We will change all.',
+              description: 'We research …' + descriptionAdditional100,
+              groupType: 'hidden',
+              actionRadius: 'global',
+              categoryIds,
+            },
+          })
+          // 'JoinGroup' mutation does not work in hidden groups so we join them by 'ChangeGroupMemberRole' through the owner
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'hidden-group',
+              userId: 'pending-user',
+              roleInGroup: 'pending',
+            },
+          })
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'hidden-group',
+              userId: 'current-user',
+              roleInGroup: 'usual',
+            },
+          })
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'hidden-group',
+              userId: 'owner-of-closed-group',
+              roleInGroup: 'admin',
+            },
+          })
+
+          authenticatedUser = null
+        })
+
+        describe('public group', () => {
+          beforeEach(async () => {
+            variables = {
+              id: 'public-group',
+            }
+          })
+
+          describe('query group members', () => {
+            describe('by owner "current-user"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await user.toJson()
+              })
+
+              it('finds all members', async () => {
+                const result = await query({
+                  query: groupMembersQuery(),
+                  variables,
+                })
+                expect(result).toMatchObject({
+                  data: {
+                    GroupMembers: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'current-user',
+                        myRoleInGroup: 'owner',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-closed-group',
+                        myRoleInGroup: 'usual',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-hidden-group',
+                        myRoleInGroup: 'usual',
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.GroupMembers.length).toBe(3)
+              })
+            })
+
+            describe('by usual member "owner-of-closed-group"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await ownerOfClosedGroupUser.toJson()
+              })
+
+              it('finds all members', async () => {
+                const result = await query({
+                  query: groupMembersQuery(),
+                  variables,
+                })
+                expect(result).toMatchObject({
+                  data: {
+                    GroupMembers: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'current-user',
+                        myRoleInGroup: 'owner',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-closed-group',
+                        myRoleInGroup: 'usual',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-hidden-group',
+                        myRoleInGroup: 'usual',
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.GroupMembers.length).toBe(3)
+              })
+            })
+
+            describe('by none member "other-user"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await otherUser.toJson()
+              })
+
+              it('finds all members', async () => {
+                const result = await query({
+                  query: groupMembersQuery(),
+                  variables,
+                })
+                expect(result).toMatchObject({
+                  data: {
+                    GroupMembers: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'current-user',
+                        myRoleInGroup: 'owner',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-closed-group',
+                        myRoleInGroup: 'usual',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-hidden-group',
+                        myRoleInGroup: 'usual',
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.GroupMembers.length).toBe(3)
+              })
+            })
+          })
+        })
+
+        describe('closed group', () => {
+          beforeEach(async () => {
+            variables = {
+              id: 'closed-group',
+            }
+          })
+
+          describe('query group members', () => {
+            describe('by owner "owner-of-closed-group"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await ownerOfClosedGroupUser.toJson()
+              })
+
+              it('finds all members', async () => {
+                const result = await query({
+                  query: groupMembersQuery(),
+                  variables,
+                })
+                expect(result).toMatchObject({
+                  data: {
+                    GroupMembers: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'current-user',
+                        myRoleInGroup: 'pending',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-closed-group',
+                        myRoleInGroup: 'owner',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-hidden-group',
+                        myRoleInGroup: 'usual',
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.GroupMembers.length).toBe(3)
+              })
+            })
+
+            describe('by usual member "owner-of-hidden-group"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await ownerOfHiddenGroupUser.toJson()
+              })
+
+              it('finds all members', async () => {
+                const result = await query({
+                  query: groupMembersQuery(),
+                  variables,
+                })
+                expect(result).toMatchObject({
+                  data: {
+                    GroupMembers: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'current-user',
+                        myRoleInGroup: 'pending',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-closed-group',
+                        myRoleInGroup: 'owner',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-hidden-group',
+                        myRoleInGroup: 'usual',
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.GroupMembers.length).toBe(3)
+              })
+            })
+
+            describe('by pending member "current-user"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await user.toJson()
+              })
+
+              it('throws authorization error', async () => {
+                const { errors } = await query({ query: groupMembersQuery(), variables })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('by none member "other-user"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await otherUser.toJson()
+              })
+
+              it('throws authorization error', async () => {
+                const { errors } = await query({ query: groupMembersQuery(), variables })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+          })
+        })
+
+        describe('hidden group', () => {
+          beforeEach(async () => {
+            variables = {
+              id: 'hidden-group',
+            }
+          })
+
+          describe('query group members', () => {
+            describe('by owner "owner-of-hidden-group"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await ownerOfHiddenGroupUser.toJson()
+              })
+
+              it('finds all members', async () => {
+                const result = await query({
+                  query: groupMembersQuery(),
+                  variables,
+                })
+                expect(result).toMatchObject({
+                  data: {
+                    GroupMembers: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'pending-user',
+                        myRoleInGroup: 'pending',
+                      }),
+                      expect.objectContaining({
+                        id: 'current-user',
+                        myRoleInGroup: 'usual',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-closed-group',
+                        myRoleInGroup: 'admin',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-hidden-group',
+                        myRoleInGroup: 'owner',
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.GroupMembers.length).toBe(4)
+              })
+            })
+
+            describe('by usual member "current-user"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await user.toJson()
+              })
+
+              it('finds all members', async () => {
+                const result = await query({
+                  query: groupMembersQuery(),
+                  variables,
+                })
+                expect(result).toMatchObject({
+                  data: {
+                    GroupMembers: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'pending-user',
+                        myRoleInGroup: 'pending',
+                      }),
+                      expect.objectContaining({
+                        id: 'current-user',
+                        myRoleInGroup: 'usual',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-closed-group',
+                        myRoleInGroup: 'admin',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-hidden-group',
+                        myRoleInGroup: 'owner',
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.GroupMembers.length).toBe(4)
+              })
+            })
+
+            describe('by admin member "owner-of-closed-group"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await ownerOfClosedGroupUser.toJson()
+              })
+
+              it('finds all members', async () => {
+                const result = await query({
+                  query: groupMembersQuery(),
+                  variables,
+                })
+                expect(result).toMatchObject({
+                  data: {
+                    GroupMembers: expect.arrayContaining([
+                      expect.objectContaining({
+                        id: 'pending-user',
+                        myRoleInGroup: 'pending',
+                      }),
+                      expect.objectContaining({
+                        id: 'current-user',
+                        myRoleInGroup: 'usual',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-closed-group',
+                        myRoleInGroup: 'admin',
+                      }),
+                      expect.objectContaining({
+                        id: 'owner-of-hidden-group',
+                        myRoleInGroup: 'owner',
+                      }),
+                    ]),
+                  },
+                  errors: undefined,
+                })
+                expect(result.data.GroupMembers.length).toBe(4)
+              })
+            })
+
+            describe('by pending member "pending-user"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await pendingUser.toJson()
+              })
+
+              it('throws authorization error', async () => {
+                const { errors } = await query({ query: groupMembersQuery(), variables })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('by none member "other-user"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await otherUser.toJson()
+              })
+
+              it('throws authorization error', async () => {
+                const { errors } = await query({ query: groupMembersQuery(), variables })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+          })
+        })
+      })
+    })
+
+    describe('ChangeGroupMemberRole', () => {
+      beforeAll(async () => {
+        await seedComplexScenarioAndClearAuthentication()
+      })
+
+      afterAll(async () => {
+        await cleanDatabase()
+      })
+
+      describe('unauthenticated', () => {
+        it('throws authorization error', async () => {
+          const { errors } = await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'not-existing-group',
+              userId: 'current-user',
+              roleInGroup: 'pending',
+            },
+          })
+          expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+        })
+      })
+
+      describe('authenticated', () => {
+        describe('in all group types – here "closed-group" for example', () => {
+          beforeEach(async () => {
+            variables = {
+              groupId: 'closed-group',
+            }
+          })
+
+          describe('join the members and give them their prospective roles', () => {
+            describe('by owner "owner-member-user"', () => {
+              beforeEach(async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+              })
+
+              describe('for "usual-member-user"', () => {
+                beforeEach(async () => {
+                  variables = {
+                    ...variables,
+                    userId: 'usual-member-user',
+                  }
+                })
+
+                describe('as usual', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'usual',
+                    }
+                  })
+
+                  it('has role usual', async () => {
+                    await expect(
+                      mutate({
+                        mutation: changeGroupMemberRoleMutation(),
+                        variables,
+                      }),
+                    ).resolves.toMatchObject({
+                      data: {
+                        ChangeGroupMemberRole: {
+                          id: 'usual-member-user',
+                          myRoleInGroup: 'usual',
+                        },
+                      },
+                      errors: undefined,
+                    })
+                  })
+
+                  // the GQL mutation needs this fields in the result for testing
+                  it.todo('has "updatedAt" newer as "createdAt"')
+                })
+              })
+
+              describe('for "admin-member-user"', () => {
+                beforeEach(async () => {
+                  variables = {
+                    ...variables,
+                    userId: 'admin-member-user',
+                  }
+                })
+
+                describe('as admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('has role admin', async () => {
+                    await expect(
+                      mutate({
+                        mutation: changeGroupMemberRoleMutation(),
+                        variables,
+                      }),
+                    ).resolves.toMatchObject({
+                      data: {
+                        ChangeGroupMemberRole: {
+                          id: 'admin-member-user',
+                          myRoleInGroup: 'admin',
+                        },
+                      },
+                      errors: undefined,
+                    })
+                  })
+                })
+              })
+
+              describe('for "second-owner-member-user"', () => {
+                beforeEach(async () => {
+                  variables = {
+                    ...variables,
+                    userId: 'second-owner-member-user',
+                  }
+                })
+
+                describe('as owner', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'owner',
+                    }
+                  })
+
+                  it('has role owner', async () => {
+                    await expect(
+                      mutate({
+                        mutation: changeGroupMemberRoleMutation(),
+                        variables,
+                      }),
+                    ).resolves.toMatchObject({
+                      data: {
+                        ChangeGroupMemberRole: {
+                          id: 'second-owner-member-user',
+                          myRoleInGroup: 'owner',
+                        },
+                      },
+                      errors: undefined,
+                    })
+                  })
+                })
+              })
+            })
+          })
+
+          describe('switch role', () => {
+            describe('of owner "owner-member-user"', () => {
+              beforeEach(async () => {
+                variables = {
+                  ...variables,
+                  userId: 'owner-member-user',
+                }
+              })
+
+              describe('by owner themself "owner-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await ownerMemberUser.toJson()
+                })
+
+                describe('to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              // shall this be possible in the future?
+              // or shall only an owner who gave the second owner the owner role downgrade themself for savety?
+              // otherwise the first owner who downgrades the other one has the victory over the group!
+              describe('by second owner "second-owner-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await secondOwnerMemberUser.toJson()
+                })
+
+                describe('to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+
+                describe('to same role owner', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'owner',
+                    }
+                  })
+
+                  it('has role owner still', async () => {
+                    await expect(
+                      mutate({
+                        mutation: changeGroupMemberRoleMutation(),
+                        variables,
+                      }),
+                    ).resolves.toMatchObject({
+                      data: {
+                        ChangeGroupMemberRole: {
+                          id: 'owner-member-user',
+                          myRoleInGroup: 'owner',
+                        },
+                      },
+                      errors: undefined,
+                    })
+                  })
+                })
+              })
+
+              describe('by admin "admin-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await adminMemberUser.toJson()
+                })
+
+                describe('to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              describe('by usual member "usual-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await usualMemberUser.toJson()
+                })
+
+                describe('to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              describe('by still pending member "pending-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await pendingMemberUser.toJson()
+                })
+
+                describe('to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+            })
+
+            describe('of admin "admin-member-user"', () => {
+              beforeEach(async () => {
+                variables = {
+                  ...variables,
+                  userId: 'admin-member-user',
+                }
+              })
+
+              describe('by owner "owner-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await ownerMemberUser.toJson()
+                })
+
+                describe('to owner', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'owner',
+                    }
+                  })
+
+                  it('has role owner', async () => {
+                    await expect(
+                      mutate({
+                        mutation: changeGroupMemberRoleMutation(),
+                        variables,
+                      }),
+                    ).resolves.toMatchObject({
+                      data: {
+                        ChangeGroupMemberRole: {
+                          id: 'admin-member-user',
+                          myRoleInGroup: 'owner',
+                        },
+                      },
+                      errors: undefined,
+                    })
+                  })
+                })
+
+                describe('back to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              describe('by usual member "usual-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await usualMemberUser.toJson()
+                })
+
+                describe('upgrade to owner', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'owner',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+
+                describe('degrade to usual', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'usual',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              describe('by still pending member "pending-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await pendingMemberUser.toJson()
+                })
+
+                describe('upgrade to owner', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'owner',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+
+                describe('degrade to usual', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'usual',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              describe('by none member "current-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await user.toJson()
+                })
+
+                describe('upgrade to owner', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'owner',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+
+                describe('degrade to pending again', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'pending',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+            })
+
+            describe('of usual member "usual-member-user"', () => {
+              beforeEach(async () => {
+                variables = {
+                  ...variables,
+                  userId: 'usual-member-user',
+                }
+              })
+
+              describe('by owner "owner-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await ownerMemberUser.toJson()
+                })
+
+                describe('to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('has role admin', async () => {
+                    await expect(
+                      mutate({
+                        mutation: changeGroupMemberRoleMutation(),
+                        variables,
+                      }),
+                    ).resolves.toMatchObject({
+                      data: {
+                        ChangeGroupMemberRole: {
+                          id: 'usual-member-user',
+                          myRoleInGroup: 'admin',
+                        },
+                      },
+                      errors: undefined,
+                    })
+                  })
+                })
+
+                describe('back to usual', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'usual',
+                    }
+                  })
+
+                  it('has role usual again', async () => {
+                    await expect(
+                      mutate({
+                        mutation: changeGroupMemberRoleMutation(),
+                        variables,
+                      }),
+                    ).resolves.toMatchObject({
+                      data: {
+                        ChangeGroupMemberRole: {
+                          id: 'usual-member-user',
+                          myRoleInGroup: 'usual',
+                        },
+                      },
+                      errors: undefined,
+                    })
+                  })
+                })
+              })
+
+              describe('by usual member "usual-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await usualMemberUser.toJson()
+                })
+
+                describe('upgrade to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+
+                describe('degrade to pending', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'pending',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              describe('by still pending member "pending-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await pendingMemberUser.toJson()
+                })
+
+                describe('upgrade to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+
+                describe('degrade to pending', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'pending',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              describe('by none member "current-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await user.toJson()
+                })
+
+                describe('upgrade to admin', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'admin',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+
+                describe('degrade to pending again', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'pending',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+            })
+
+            describe('of still pending member "pending-member-user"', () => {
+              beforeEach(async () => {
+                variables = {
+                  ...variables,
+                  userId: 'pending-member-user',
+                }
+              })
+
+              describe('by owner "owner-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await ownerMemberUser.toJson()
+                })
+
+                describe('to usual', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'usual',
+                    }
+                  })
+
+                  it('has role usual', async () => {
+                    await expect(
+                      mutate({
+                        mutation: changeGroupMemberRoleMutation(),
+                        variables,
+                      }),
+                    ).resolves.toMatchObject({
+                      data: {
+                        ChangeGroupMemberRole: {
+                          id: 'pending-member-user',
+                          myRoleInGroup: 'usual',
+                        },
+                      },
+                      errors: undefined,
+                    })
+                  })
+                })
+
+                describe('back to pending', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'pending',
+                    }
+                  })
+
+                  it('has role usual again', async () => {
+                    await expect(
+                      mutate({
+                        mutation: changeGroupMemberRoleMutation(),
+                        variables,
+                      }),
+                    ).resolves.toMatchObject({
+                      data: {
+                        ChangeGroupMemberRole: {
+                          id: 'pending-member-user',
+                          myRoleInGroup: 'pending',
+                        },
+                      },
+                      errors: undefined,
+                    })
+                  })
+                })
+              })
+
+              describe('by usual member "usual-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await usualMemberUser.toJson()
+                })
+
+                describe('upgrade to usual', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'usual',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              describe('by still pending member "pending-member-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await pendingMemberUser.toJson()
+                })
+
+                describe('upgrade to usual', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'usual',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+
+              describe('by none member "current-user"', () => {
+                beforeEach(async () => {
+                  authenticatedUser = await user.toJson()
+                })
+
+                describe('upgrade to usual', () => {
+                  beforeEach(async () => {
+                    variables = {
+                      ...variables,
+                      roleInGroup: 'usual',
+                    }
+                  })
+
+                  it('throws authorization error', async () => {
+                    const { errors } = await mutate({
+                      mutation: changeGroupMemberRoleMutation(),
+                      variables,
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+
+    describe('LeaveGroup', () => {
+      beforeAll(async () => {
+        await seedComplexScenarioAndClearAuthentication()
+        // closed-group
+        authenticatedUser = await ownerMemberUser.toJson()
+        await mutate({
+          mutation: changeGroupMemberRoleMutation(),
+          variables: {
+            groupId: 'closed-group',
+            userId: 'pending-member-user',
+            roleInGroup: 'pending',
+          },
+        })
+        await mutate({
+          mutation: changeGroupMemberRoleMutation(),
+          variables: {
+            groupId: 'closed-group',
+            userId: 'usual-member-user',
+            roleInGroup: 'usual',
+          },
+        })
+        await mutate({
+          mutation: changeGroupMemberRoleMutation(),
+          variables: {
+            groupId: 'closed-group',
+            userId: 'admin-member-user',
+            roleInGroup: 'admin',
+          },
+        })
+        await mutate({
+          mutation: changeGroupMemberRoleMutation(),
+          variables: {
+            groupId: 'closed-group',
+            userId: 'second-owner-member-user',
+            roleInGroup: 'owner',
+          },
+        })
+
+        authenticatedUser = null
+      })
+
+      afterAll(async () => {
+        await cleanDatabase()
+      })
+
+      describe('unauthenticated', () => {
+        it('throws authorization error', async () => {
+          const { errors } = await mutate({
+            mutation: leaveGroupMutation(),
+            variables: {
+              groupId: 'not-existing-group',
+              userId: 'current-user',
+            },
+          })
+          expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+        })
+      })
+
+      describe('authenticated', () => {
+        describe('in all group types', () => {
+          describe('here "closed-group" for example', () => {
+            const memberInGroup = async (userId, groupId) => {
+              const result = await query({
+                query: groupMembersQuery(),
+                variables: {
+                  id: groupId,
+                },
+              })
+              return result.data && result.data.GroupMembers
+                ? !!result.data.GroupMembers.find((member) => member.id === userId)
+                : null
+            }
+
+            beforeEach(async () => {
+              authenticatedUser = null
+              variables = {
+                groupId: 'closed-group',
+              }
+            })
+
+            describe('left by "pending-member-user"', () => {
+              it('has "null" as membership role, was in the group, and left the group', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('pending-member-user', 'closed-group')).toBe(true)
+                authenticatedUser = await pendingMemberUser.toJson()
+                await expect(
+                  mutate({
+                    mutation: leaveGroupMutation(),
+                    variables: {
+                      ...variables,
+                      userId: 'pending-member-user',
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    LeaveGroup: {
+                      id: 'pending-member-user',
+                      myRoleInGroup: null,
+                    },
+                  },
+                  errors: undefined,
+                })
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('pending-member-user', 'closed-group')).toBe(false)
+              })
+            })
+
+            describe('left by "usual-member-user"', () => {
+              it('has "null" as membership role, was in the group, and left the group', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('usual-member-user', 'closed-group')).toBe(true)
+                authenticatedUser = await usualMemberUser.toJson()
+                await expect(
+                  mutate({
+                    mutation: leaveGroupMutation(),
+                    variables: {
+                      ...variables,
+                      userId: 'usual-member-user',
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    LeaveGroup: {
+                      id: 'usual-member-user',
+                      myRoleInGroup: null,
+                    },
+                  },
+                  errors: undefined,
+                })
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('usual-member-user', 'closed-group')).toBe(false)
+              })
+            })
+
+            describe('left by "admin-member-user"', () => {
+              it('has "null" as membership role, was in the group, and left the group', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('admin-member-user', 'closed-group')).toBe(true)
+                authenticatedUser = await adminMemberUser.toJson()
+                await expect(
+                  mutate({
+                    mutation: leaveGroupMutation(),
+                    variables: {
+                      ...variables,
+                      userId: 'admin-member-user',
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    LeaveGroup: {
+                      id: 'admin-member-user',
+                      myRoleInGroup: null,
+                    },
+                  },
+                  errors: undefined,
+                })
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('admin-member-user', 'closed-group')).toBe(false)
+              })
+            })
+
+            describe('left by "owner-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation(),
+                  variables: {
+                    ...variables,
+                    userId: 'owner-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('left by "second-owner-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await secondOwnerMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation(),
+                  variables: {
+                    ...variables,
+                    userId: 'second-owner-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('left by "none-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await noMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation(),
+                  variables: {
+                    ...variables,
+                    userId: 'none-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('as "owner-member-user" try to leave member "usual-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation(),
+                  variables: {
+                    ...variables,
+                    userId: 'usual-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('as "usual-member-user" try to leave member "admin-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await usualMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation(),
+                  variables: {
+                    ...variables,
+                    userId: 'admin-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+          })
+        })
+      })
+    })
+
+    describe('UpdateGroup', () => {
+      beforeAll(async () => {
+        await seedBasicsAndClearAuthentication()
+      })
+
+      afterAll(async () => {
+        await cleanDatabase()
+      })
+
+      describe('unauthenticated', () => {
+        it('throws authorization error', async () => {
+          const { errors } = await mutate({
+            mutation: updateGroupMutation(),
+            variables: {
+              id: 'my-group',
+              slug: 'my-best-group',
+            },
+          })
+          expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+        })
+      })
+
+      describe('authenticated', () => {
+        let noMemberUser
+
+        beforeAll(async () => {
+          noMemberUser = await Factory.build(
+            'user',
+            {
+              id: 'none-member-user',
+              name: 'None Member TestUser',
+            },
+            {
+              email: 'none-member-user@example.org',
+              password: '1234',
+            },
+          )
+          usualMemberUser = await Factory.build(
+            'user',
+            {
+              id: 'usual-member-user',
+              name: 'Usual Member TestUser',
+            },
+            {
+              email: 'usual-member-user@example.org',
+              password: '1234',
+            },
+          )
+          authenticatedUser = await noMemberUser.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'others-group',
+              name: 'Uninteresting Group',
+              about: 'We will change nothing!',
+              description: 'We love it like it is!?' + descriptionAdditional100,
+              groupType: 'closed',
+              actionRadius: 'global',
+              categoryIds,
+            },
+          })
+          authenticatedUser = await user.toJson()
+          await mutate({
+            mutation: createGroupMutation(),
+            variables: {
+              id: 'my-group',
+              name: 'The Best Group',
+              about: 'We will change the world!',
+              description: 'Some description' + descriptionAdditional100,
+              groupType: 'public',
+              actionRadius: 'regional',
+              categoryIds,
+              locationName: 'Berlin, Germany',
+            },
+          })
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'my-group',
+              userId: 'usual-member-user',
+              roleInGroup: 'usual',
+            },
+          })
+        })
+
+        describe('change group settings', () => {
+          describe('as owner', () => {
+            beforeEach(async () => {
+              authenticatedUser = await user.toJson()
+            })
+
+            describe('all standard settings – excluding location', () => {
+              it('has updated the settings', async () => {
+                await expect(
+                  mutate({
+                    mutation: updateGroupMutation(),
+                    variables: {
+                      id: 'my-group',
+                      name: 'The New Group For Our Country',
+                      about: 'We will change the land!',
+                      description: 'Some country relevant description' + descriptionAdditional100,
+                      actionRadius: 'national',
+                      // avatar, // test this as result
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    UpdateGroup: {
+                      id: 'my-group',
+                      name: 'The New Group For Our Country',
+                      slug: 'the-best-group', // changing the slug is tested in the slugifyMiddleware
+                      about: 'We will change the land!',
+                      description: 'Some country relevant description' + descriptionAdditional100,
+                      descriptionExcerpt:
+                        'Some country relevant description' + descriptionAdditional100,
+                      actionRadius: 'national',
+                      // avatar, // test this as result
+                      myRole: 'owner',
+                    },
+                  },
+                  errors: undefined,
+                })
+              })
+            })
+
+            describe('location', () => {
+              describe('"locationName" is undefined – shall not change location', () => {
+                it('has left locaton unchanged as "Berlin"', async () => {
+                  await expect(
+                    mutate({
+                      mutation: updateGroupMutation(),
+                      variables: {
+                        id: 'my-group',
+                      },
+                    }),
+                  ).resolves.toMatchObject({
+                    data: {
+                      UpdateGroup: {
+                        id: 'my-group',
+                        locationName: 'Berlin, Germany',
+                        location: expect.objectContaining({
+                          name: 'Berlin',
+                          nameDE: 'Berlin',
+                          nameEN: 'Berlin',
+                        }),
+                        myRole: 'owner',
+                      },
+                    },
+                    errors: undefined,
+                  })
+                })
+              })
+
+              describe('"locationName" is null – shall change location "Berlin" to unset location', () => {
+                it('has updated the location to unset location', async () => {
+                  await expect(
+                    mutate({
+                      mutation: updateGroupMutation(),
+                      variables: {
+                        id: 'my-group',
+                        locationName: null,
+                      },
+                    }),
+                  ).resolves.toMatchObject({
+                    data: {
+                      UpdateGroup: {
+                        id: 'my-group',
+                        locationName: null,
+                        location: null,
+                        myRole: 'owner',
+                      },
+                    },
+                    errors: undefined,
+                  })
+                })
+              })
+
+              describe('change unset location to "Paris"', () => {
+                it('has updated the location to "Paris"', async () => {
+                  await expect(
+                    mutate({
+                      mutation: updateGroupMutation(),
+                      variables: {
+                        id: 'my-group',
+                        locationName: 'Paris, France',
+                      },
+                    }),
+                  ).resolves.toMatchObject({
+                    data: {
+                      UpdateGroup: {
+                        id: 'my-group',
+                        locationName: 'Paris, France',
+                        location: expect.objectContaining({
+                          name: 'Paris',
+                          nameDE: 'Paris',
+                          nameEN: 'Paris',
+                        }),
+                        myRole: 'owner',
+                      },
+                    },
+                    errors: undefined,
+                  })
+                })
+              })
+
+              describe('change location "Paris" to "Hamburg"', () => {
+                it('has updated the location to "Hamburg"', async () => {
+                  await expect(
+                    mutate({
+                      mutation: updateGroupMutation(),
+                      variables: {
+                        id: 'my-group',
+                        locationName: 'Hamburg, Germany',
+                      },
+                    }),
+                  ).resolves.toMatchObject({
+                    data: {
+                      UpdateGroup: {
+                        id: 'my-group',
+                        locationName: 'Hamburg, Germany',
+                        location: expect.objectContaining({
+                          name: 'Hamburg',
+                          nameDE: 'Hamburg',
+                          nameEN: 'Hamburg',
+                        }),
+                        myRole: 'owner',
+                      },
+                    },
+                    errors: undefined,
+                  })
+                })
+              })
+
+              describe('"locationName" is empty string – shall change location "Hamburg" to unset location ', () => {
+                it('has updated the location to unset', async () => {
+                  await expect(
+                    mutate({
+                      mutation: updateGroupMutation(),
+                      variables: {
+                        id: 'my-group',
+                        locationName: '', // empty string '' sets it to null
+                      },
+                    }),
+                  ).resolves.toMatchObject({
+                    data: {
+                      UpdateGroup: {
+                        id: 'my-group',
+                        locationName: null,
+                        location: null,
+                        myRole: 'owner',
+                      },
+                    },
+                    errors: undefined,
+                  })
+                })
+              })
+            })
+
+            describe('description', () => {
+              describe('length without HTML', () => {
+                describe('less then 100 chars', () => {
+                  it('throws error: "Description too short!"', async () => {
+                    const { errors } = await mutate({
+                      mutation: updateGroupMutation(),
+                      variables: {
+                        id: 'my-group',
+                        description:
+                          '0123456789' +
+                          '<a href="https://domain.org/0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789">0123456789</a>',
+                      },
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Description too short!')
+                  })
+                })
+              })
+            })
+
+            describe('categories', () => {
+              beforeEach(async () => {
+                CONFIG.CATEGORIES_ACTIVE = true
+              })
+
+              describe('with matching amount of categories', () => {
+                it('has new categories', async () => {
+                  await expect(
+                    mutate({
+                      mutation: updateGroupMutation(),
+                      variables: {
+                        id: 'my-group',
+                        categoryIds: ['cat4', 'cat27'],
+                      },
+                    }),
+                  ).resolves.toMatchObject({
+                    data: {
+                      UpdateGroup: {
+                        id: 'my-group',
+                        categories: expect.arrayContaining([
+                          expect.objectContaining({ id: 'cat4' }),
+                          expect.objectContaining({ id: 'cat27' }),
+                        ]),
+                        myRole: 'owner',
+                      },
+                    },
+                    errors: undefined,
+                  })
+                })
+              })
+
+              describe('not even one', () => {
+                describe('by "categoryIds: []"', () => {
+                  it('throws error: "Too view categories!"', async () => {
+                    const { errors } = await mutate({
+                      mutation: updateGroupMutation(),
+                      variables: {
+                        id: 'my-group',
+                        categoryIds: [],
+                      },
+                    })
+                    expect(errors[0]).toHaveProperty('message', 'Too view categories!')
+                  })
+                })
+              })
+
+              describe('four', () => {
+                it('throws error: "Too many categories!"', async () => {
+                  const { errors } = await mutate({
+                    mutation: updateGroupMutation(),
+                    variables: {
+                      id: 'my-group',
+                      categoryIds: ['cat9', 'cat4', 'cat15', 'cat27'],
+                    },
+                  })
+                  expect(errors[0]).toHaveProperty('message', 'Too many categories!')
+                })
+              })
+            })
+          })
+
+          describe('as "usual-member-user" member, no(!) owner', () => {
+            it('throws authorization error', async () => {
+              authenticatedUser = await usualMemberUser.toJson()
+              const { errors } = await mutate({
+                mutation: updateGroupMutation(),
+                variables: {
+                  id: 'my-group',
+                  name: 'The New Group For Our Country',
+                  about: 'We will change the land!',
+                  description: 'Some country relevant description' + descriptionAdditional100,
+                  actionRadius: 'national',
+                  categoryIds: ['cat4', 'cat27'],
+                },
+              })
+              expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+            })
+          })
+
+          describe('as "none-member-user"', () => {
+            it('throws authorization error', async () => {
+              authenticatedUser = await noMemberUser.toJson()
+              const { errors } = await mutate({
+                mutation: updateGroupMutation(),
+                variables: {
+                  id: 'my-group',
+                  name: 'The New Group For Our Country',
+                  about: 'We will change the land!',
+                  description: 'Some country relevant description' + descriptionAdditional100,
+                  actionRadius: 'national',
+                  categoryIds: ['cat4', 'cat27'],
+                },
+              })
+              expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+            })
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/backend/src/schema/resolvers/helpers/Resolver.js b/backend/src/schema/resolvers/helpers/Resolver.js
index f2861e7a0..6e8211521 100644
--- a/backend/src/schema/resolvers/helpers/Resolver.js
+++ b/backend/src/schema/resolvers/helpers/Resolver.js
@@ -121,3 +121,25 @@ export default function Resolver(type, options = {}) {
   }
   return result
 }
+
+export const removeUndefinedNullValuesFromObject = (obj) => {
+  Object.keys(obj).forEach((key) => {
+    if ([undefined, null].includes(obj[key])) {
+      delete obj[key]
+    }
+  })
+}
+
+export const convertObjectToCypherMapLiteral = (params, addSpaceInfrontIfMapIsNotEmpty = false) => {
+  // I have found no other way yet. maybe "apoc.convert.fromJsonMap(key)" can help, but couldn't get it how, see: https://stackoverflow.com/questions/43217823/neo4j-cypher-inline-conversion-of-string-to-a-map
+  // result looks like: '{id: "g0", slug: "yoga"}'
+  const paramsEntries = Object.entries(params)
+  let mapLiteral = ''
+  paramsEntries.forEach((ele, index) => {
+    mapLiteral += index === 0 ? '{' : ''
+    mapLiteral += `${ele[0]}: "${ele[1]}"`
+    mapLiteral += index < paramsEntries.length - 1 ? ', ' : '}'
+  })
+  mapLiteral = (addSpaceInfrontIfMapIsNotEmpty && mapLiteral.length > 0 ? ' ' : '') + mapLiteral
+  return mapLiteral
+}
diff --git a/backend/src/schema/resolvers/helpers/filterInvisiblePosts.js b/backend/src/schema/resolvers/helpers/filterInvisiblePosts.js
new file mode 100644
index 000000000..73dfaad91
--- /dev/null
+++ b/backend/src/schema/resolvers/helpers/filterInvisiblePosts.js
@@ -0,0 +1,47 @@
+import { mergeWith, isArray } from 'lodash'
+
+const getInvisiblePosts = async (context) => {
+  const session = context.driver.session()
+  const readTxResultPromise = await session.readTransaction(async (transaction) => {
+    let cypher = ''
+    const { user } = context
+    if (user && user.id) {
+      cypher = `
+        MATCH (post:Post)<-[:CANNOT_SEE]-(user:User { id: $userId })
+        RETURN collect(post.id) AS invisiblePostIds`
+    } else {
+      cypher = `
+        MATCH (post:Post)-[:IN]->(group:Group)
+        WHERE NOT group.groupType = 'public'
+        RETURN collect(post.id) AS invisiblePostIds`
+    }
+    const invisiblePostIdsResponse = await transaction.run(cypher, {
+      userId: user ? user.id : null,
+    })
+    return invisiblePostIdsResponse.records.map((record) => record.get('invisiblePostIds'))
+  })
+  try {
+    const [invisiblePostIds] = readTxResultPromise
+    return invisiblePostIds
+  } finally {
+    session.close()
+  }
+}
+
+export const filterInvisiblePosts = async (params, context) => {
+  const invisiblePostIds = await getInvisiblePosts(context)
+  if (!invisiblePostIds.length) return params
+
+  params.filter = mergeWith(
+    params.filter,
+    {
+      id_not_in: invisiblePostIds,
+    },
+    (objValue, srcValue) => {
+      if (isArray(objValue)) {
+        return objValue.concat(srcValue)
+      }
+    },
+  )
+  return params
+}
diff --git a/backend/src/schema/resolvers/moderation.spec.js b/backend/src/schema/resolvers/moderation.spec.js
index 662be41bd..3c2926c14 100644
--- a/backend/src/schema/resolvers/moderation.spec.js
+++ b/backend/src/schema/resolvers/moderation.spec.js
@@ -120,7 +120,7 @@ describe('moderate resources', () => {
         await expect(
           mutate({ mutation: reviewMutation, variables: disableVariables }),
         ).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -134,7 +134,7 @@ describe('moderate resources', () => {
         await expect(
           mutate({ mutation: reviewMutation, variables: disableVariables }),
         ).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -218,7 +218,7 @@ describe('moderate resources', () => {
         await expect(
           mutate({ mutation: reviewMutation, variables: disableVariables }),
         ).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -232,7 +232,7 @@ describe('moderate resources', () => {
         await expect(
           mutate({ mutation: reviewMutation, variables: disableVariables }),
         ).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -488,7 +488,7 @@ describe('moderate resources', () => {
         await expect(
           mutate({ mutation: reviewMutation, variables: enableVariables }),
         ).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -507,7 +507,7 @@ describe('moderate resources', () => {
           await expect(
             mutate({ mutation: reviewMutation, variables: enableVariables }),
           ).resolves.toMatchObject({
-            errors: [{ message: 'Not Authorised!' }],
+            errors: [{ message: 'Not Authorized!' }],
           })
         })
       })
diff --git a/backend/src/schema/resolvers/notifications.spec.js b/backend/src/schema/resolvers/notifications.spec.js
index 2ea468914..924154488 100644
--- a/backend/src/schema/resolvers/notifications.spec.js
+++ b/backend/src/schema/resolvers/notifications.spec.js
@@ -165,7 +165,7 @@ describe('given some notifications', () => {
     describe('unauthenticated', () => {
       it('throws authorization error', async () => {
         const { errors } = await query({ query: notificationQuery })
-        expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
@@ -313,7 +313,7 @@ describe('given some notifications', () => {
           mutation: markAsReadMutation,
           variables: { ...variables, id: 'p1' },
         })
-        expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
diff --git a/backend/src/schema/resolvers/posts.js b/backend/src/schema/resolvers/posts.js
index d199b6f09..78515e641 100644
--- a/backend/src/schema/resolvers/posts.js
+++ b/backend/src/schema/resolvers/posts.js
@@ -5,6 +5,8 @@ import { UserInputError } from 'apollo-server'
 import { mergeImage, deleteImage } from './images/images'
 import Resolver from './helpers/Resolver'
 import { filterForMutedUsers } from './helpers/filterForMutedUsers'
+import { filterInvisiblePosts } from './helpers/filterInvisiblePosts'
+import CONFIG from '../../config'
 
 const maintainPinnedPosts = (params) => {
   const pinnedPostFilter = { pinned: true }
@@ -19,15 +21,13 @@ const maintainPinnedPosts = (params) => {
 export default {
   Query: {
     Post: async (object, params, context, resolveInfo) => {
+      params = await filterInvisiblePosts(params, context)
       params = await filterForMutedUsers(params, context)
       params = await maintainPinnedPosts(params)
       return neo4jgraphql(object, params, context, resolveInfo)
     },
-    findPosts: async (object, params, context, resolveInfo) => {
-      params = await filterForMutedUsers(params, context)
-      return neo4jgraphql(object, params, context, resolveInfo)
-    },
     profilePagePosts: async (object, params, context, resolveInfo) => {
+      params = await filterInvisiblePosts(params, context)
       params = await filterForMutedUsers(params, context)
       return neo4jgraphql(object, params, context, resolveInfo)
     },
@@ -76,12 +76,44 @@ export default {
   },
   Mutation: {
     CreatePost: async (_parent, params, context, _resolveInfo) => {
+      const { categoryIds, groupId } = params
       const { image: imageInput } = params
       delete params.categoryIds
       delete params.image
+      delete params.groupId
       params.id = params.id || uuid()
       const session = context.driver.session()
       const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        let groupCypher = ''
+        if (groupId) {
+          groupCypher = `
+            WITH post MATCH (group:Group { id: $groupId })
+            MERGE (post)-[:IN]->(group)`
+          const groupTypeResponse = await transaction.run(
+            `
+            MATCH (group:Group { id: $groupId }) RETURN group.groupType AS groupType`,
+            { groupId },
+          )
+          const [groupType] = groupTypeResponse.records.map((record) => record.get('groupType'))
+          if (groupType !== 'public')
+            groupCypher += `
+             WITH post, group
+             MATCH (user:User)-[membership:MEMBER_OF]->(group)
+               WHERE group.groupType IN ['closed', 'hidden']
+                 AND membership.role IN ['usual', 'admin', 'owner']
+             WITH post, collect(user.id) AS userIds
+             OPTIONAL MATCH path =(restricted:User) WHERE NOT restricted.id IN userIds 
+             FOREACH (user IN nodes(path) |
+               MERGE (user)-[:CANNOT_SEE]->(post)
+             )`
+        }
+        const categoriesCypher =
+          CONFIG.CATEGORIES_ACTIVE && categoryIds
+            ? `WITH post
+              UNWIND $categoryIds AS categoryId
+              MATCH (category:Category {id: categoryId})
+              MERGE (post)-[:CATEGORIZED]->(category)`
+            : ''
         const createPostTransactionResponse = await transaction.run(
           `
             CREATE (post:Post)
@@ -93,9 +125,11 @@ export default {
             WITH post
             MATCH (author:User {id: $userId})
             MERGE (post)<-[:WROTE]-(author)
+            ${categoriesCypher}
+            ${groupCypher}
             RETURN post {.*}
           `,
-          { userId: context.user.id, params },
+          { userId: context.user.id, categoryIds, groupId, params },
         )
         const [post] = createPostTransactionResponse.records.map((record) => record.get('post'))
         if (imageInput) {
@@ -121,13 +155,13 @@ export default {
       delete params.image
       const session = context.driver.session()
       let updatePostCypher = `
-                                MATCH (post:Post {id: $params.id})
-                                SET post += $params
-                                SET post.updatedAt = toString(datetime())
-                                WITH post
-                              `
+        MATCH (post:Post {id: $params.id})
+        SET post += $params
+        SET post.updatedAt = toString(datetime())
+        WITH post
+      `
 
-      if (categoryIds && categoryIds.length) {
+      if (CONFIG.CATEGORIES_ACTIVE && categoryIds && categoryIds.length) {
         const cypherDeletePreviousRelations = `
           MATCH (post:Post { id: $params.id })-[previousRelations:CATEGORIZED]->(category:Category)
           DELETE previousRelations
@@ -348,7 +382,7 @@ export default {
       undefinedToNull: ['activityId', 'objectId', 'language', 'pinnedAt', 'pinned'],
       hasMany: {
         tags: '-[:TAGGED]->(related:Tag)',
-        // categories: '-[:CATEGORIZED]->(related:Category)',
+        categories: '-[:CATEGORIZED]->(related:Category)',
         comments: '<-[:COMMENTS]-(related:Comment)',
         shoutedBy: '<-[:SHOUTED]-(related:User)',
         emotions: '<-[related:EMOTED]',
@@ -357,6 +391,7 @@ export default {
         author: '<-[:WROTE]-(related:User)',
         pinnedBy: '<-[:PINNED]-(related:User)',
         image: '-[:HERO_IMAGE]->(related:Image)',
+        group: '-[:IN]->(related:Group)',
       },
       count: {
         commentsCount:
diff --git a/backend/src/schema/resolvers/posts.spec.js b/backend/src/schema/resolvers/posts.spec.js
index 2c8b7e90b..6fc9b5722 100644
--- a/backend/src/schema/resolvers/posts.spec.js
+++ b/backend/src/schema/resolvers/posts.spec.js
@@ -281,7 +281,7 @@ describe('CreatePost', () => {
   describe('unauthenticated', () => {
     it('throws authorization error', async () => {
       const { errors } = await mutate({ mutation: createPostMutation, variables })
-      expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+      expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
     })
   })
 
@@ -368,8 +368,8 @@ describe('UpdatePost', () => {
   describe('unauthenticated', () => {
     it('throws authorization error', async () => {
       authenticatedUser = null
-      expect(mutate({ mutation: updatePostMutation, variables })).resolves.toMatchObject({
-        errors: [{ message: 'Not Authorised!' }],
+      await expect(mutate({ mutation: updatePostMutation, variables })).resolves.toMatchObject({
+        errors: [{ message: 'Not Authorized!' }],
         data: { UpdatePost: null },
       })
     })
@@ -382,7 +382,7 @@ describe('UpdatePost', () => {
 
     it('throws authorization error', async () => {
       const { errors } = await mutate({ mutation: updatePostMutation, variables })
-      expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+      expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
     })
   })
 
@@ -547,7 +547,7 @@ describe('pin posts', () => {
     it('throws authorization error', async () => {
       authenticatedUser = null
       await expect(mutate({ mutation: pinPostMutation, variables })).resolves.toMatchObject({
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
         data: { pinPost: null },
       })
     })
@@ -556,7 +556,7 @@ describe('pin posts', () => {
   describe('ordinary users', () => {
     it('throws authorization error', async () => {
       await expect(mutate({ mutation: pinPostMutation, variables })).resolves.toMatchObject({
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
         data: { pinPost: null },
       })
     })
@@ -571,7 +571,7 @@ describe('pin posts', () => {
 
     it('throws authorization error', async () => {
       await expect(mutate({ mutation: pinPostMutation, variables })).resolves.toMatchObject({
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
         data: { pinPost: null },
       })
     })
@@ -854,7 +854,7 @@ describe('unpin posts', () => {
     it('throws authorization error', async () => {
       authenticatedUser = null
       await expect(mutate({ mutation: unpinPostMutation, variables })).resolves.toMatchObject({
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
         data: { unpinPost: null },
       })
     })
@@ -863,7 +863,7 @@ describe('unpin posts', () => {
   describe('users cannot unpin posts', () => {
     it('throws authorization error', async () => {
       await expect(mutate({ mutation: unpinPostMutation, variables })).resolves.toMatchObject({
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
         data: { unpinPost: null },
       })
     })
@@ -878,7 +878,7 @@ describe('unpin posts', () => {
 
     it('throws authorization error', async () => {
       await expect(mutate({ mutation: unpinPostMutation, variables })).resolves.toMatchObject({
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
         data: { unpinPost: null },
       })
     })
@@ -975,7 +975,7 @@ describe('DeletePost', () => {
   describe('unauthenticated', () => {
     it('throws authorization error', async () => {
       const { errors } = await mutate({ mutation: deletePostMutation, variables })
-      expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+      expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
     })
   })
 
@@ -986,7 +986,7 @@ describe('DeletePost', () => {
 
     it('throws authorization error', async () => {
       const { errors } = await mutate({ mutation: deletePostMutation, variables })
-      expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+      expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
     })
   })
 
@@ -1128,7 +1128,7 @@ describe('emotions', () => {
           variables,
         })
 
-        expect(addPostEmotions.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(addPostEmotions.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
@@ -1249,7 +1249,7 @@ describe('emotions', () => {
           mutation: removePostEmotionsMutation,
           variables: removePostEmotionsVariables,
         })
-        expect(removePostEmotions.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(removePostEmotions.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
diff --git a/backend/src/schema/resolvers/postsInGroups.spec.js b/backend/src/schema/resolvers/postsInGroups.spec.js
new file mode 100644
index 000000000..2c1e88b62
--- /dev/null
+++ b/backend/src/schema/resolvers/postsInGroups.spec.js
@@ -0,0 +1,1681 @@
+import { createTestClient } from 'apollo-server-testing'
+import Factory, { cleanDatabase } from '../../db/factories'
+import { getNeode, getDriver } from '../../db/neo4j'
+import createServer from '../../server'
+import {
+  createGroupMutation,
+  changeGroupMemberRoleMutation,
+  leaveGroupMutation,
+} from '../../db/graphql/groups'
+import {
+  createPostMutation,
+  postQuery,
+  filterPosts,
+  profilePagePosts,
+  searchPosts,
+} from '../../db/graphql/posts'
+import { createCommentMutation } from '../../db/graphql/comments'
+// eslint-disable-next-line no-unused-vars
+import { DESCRIPTION_WITHOUT_HTML_LENGTH_MIN } from '../../constants/groups'
+import CONFIG from '../../config'
+import { signupVerificationMutation } from '../../db/graphql/authentications'
+
+CONFIG.CATEGORIES_ACTIVE = false
+
+jest.mock('../../constants/groups', () => {
+  return {
+    __esModule: true,
+    DESCRIPTION_WITHOUT_HTML_LENGTH_MIN: 5,
+  }
+})
+
+const driver = getDriver()
+const neode = getNeode()
+
+let query
+let mutate
+let anyUser
+let allGroupsUser
+let pendingUser
+let publicUser
+let closedUser
+let hiddenUser
+let authenticatedUser
+let newUser
+
+beforeAll(async () => {
+  await cleanDatabase()
+
+  const { server } = createServer({
+    context: () => {
+      return {
+        driver,
+        neode,
+        user: authenticatedUser,
+      }
+    },
+  })
+  query = createTestClient(server).query
+  mutate = createTestClient(server).mutate
+})
+
+afterAll(async () => {
+  await cleanDatabase()
+})
+
+describe('Posts in Groups', () => {
+  beforeAll(async () => {
+    anyUser = await Factory.build('user', {
+      id: 'any-user',
+      name: 'Any User',
+      about: 'I am just an ordinary user and do not belong to any group.',
+    })
+
+    allGroupsUser = await Factory.build('user', {
+      id: 'all-groups-user',
+      name: 'All Groups User',
+      about: 'I am a member of all groups.',
+    })
+    pendingUser = await Factory.build('user', {
+      id: 'pending-user',
+      name: 'Pending User',
+      about: 'I am a pending member of all groups.',
+    })
+    publicUser = await Factory.build('user', {
+      id: 'public-user',
+      name: 'Public User',
+      about: 'I am the owner of the public group.',
+    })
+
+    closedUser = await Factory.build('user', {
+      id: 'closed-user',
+      name: 'Private User',
+      about: 'I am the owner of the closed group.',
+    })
+
+    hiddenUser = await Factory.build('user', {
+      id: 'hidden-user',
+      name: 'Secret User',
+      about: 'I am the owner of the hidden group.',
+    })
+
+    authenticatedUser = await publicUser.toJson()
+    await mutate({
+      mutation: createGroupMutation(),
+      variables: {
+        id: 'public-group',
+        name: 'The Public Group',
+        about: 'The public group!',
+        description: 'Anyone can see the posts of this group.',
+        groupType: 'public',
+        actionRadius: 'regional',
+      },
+    })
+    await mutate({
+      mutation: changeGroupMemberRoleMutation(),
+      variables: {
+        groupId: 'public-group',
+        userId: 'pending-user',
+        roleInGroup: 'pending',
+      },
+    })
+    await mutate({
+      mutation: changeGroupMemberRoleMutation(),
+      variables: {
+        groupId: 'public-group',
+        userId: 'all-groups-user',
+        roleInGroup: 'usual',
+      },
+    })
+    authenticatedUser = await closedUser.toJson()
+    await mutate({
+      mutation: createGroupMutation(),
+      variables: {
+        id: 'closed-group',
+        name: 'The Closed Group',
+        about: 'The closed group!',
+        description: 'Only members of this group can see the posts of this group.',
+        groupType: 'closed',
+        actionRadius: 'regional',
+      },
+    })
+    await mutate({
+      mutation: changeGroupMemberRoleMutation(),
+      variables: {
+        groupId: 'closed-group',
+        userId: 'pending-user',
+        roleInGroup: 'pending',
+      },
+    })
+    await mutate({
+      mutation: changeGroupMemberRoleMutation(),
+      variables: {
+        groupId: 'closed-group',
+        userId: 'all-groups-user',
+        roleInGroup: 'usual',
+      },
+    })
+    authenticatedUser = await hiddenUser.toJson()
+    await mutate({
+      mutation: createGroupMutation(),
+      variables: {
+        id: 'hidden-group',
+        name: 'The Hidden Group',
+        about: 'The hidden group!',
+        description: 'Only members of this group can see the posts of this group.',
+        groupType: 'hidden',
+        actionRadius: 'regional',
+      },
+    })
+    await mutate({
+      mutation: changeGroupMemberRoleMutation(),
+      variables: {
+        groupId: 'hidden-group',
+        userId: 'pending-user',
+        roleInGroup: 'pending',
+      },
+    })
+    await mutate({
+      mutation: changeGroupMemberRoleMutation(),
+      variables: {
+        groupId: 'hidden-group',
+        userId: 'all-groups-user',
+        roleInGroup: 'usual',
+      },
+    })
+    authenticatedUser = await anyUser.toJson()
+    await mutate({
+      mutation: createPostMutation(),
+      variables: {
+        id: 'post-without-group',
+        title: 'A post without a group',
+        content: 'I am a user who does not belong to a group yet.',
+      },
+    })
+  })
+
+  describe('creating posts in groups', () => {
+    describe('without membership of group', () => {
+      beforeAll(async () => {
+        authenticatedUser = await anyUser.toJson()
+      })
+
+      it('throws an error for public groups', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              id: 'p2',
+              title: 'A post to a pubic group',
+              content: 'I am posting into a public group without being a member of the group',
+              groupId: 'public-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+
+      it('throws an error for closed groups', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              id: 'p2',
+              title: 'A post to a closed group',
+              content: 'I am posting into a closed group without being a member of the group',
+              groupId: 'closed-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+
+      it('throws an error for hidden groups', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              id: 'p2',
+              title: 'A post to a closed group',
+              content: 'I am posting into a hidden group without being a member of the group',
+              groupId: 'hidden-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+    })
+
+    describe('as a pending member of group', () => {
+      beforeAll(async () => {
+        authenticatedUser = await pendingUser.toJson()
+      })
+
+      it('throws an error for public groups', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              id: 'p2',
+              title: 'A post to a pubic group',
+              content: 'I am posting into a public group with a pending membership',
+              groupId: 'public-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+
+      it('throws an error for closed groups', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              id: 'p2',
+              title: 'A post to a closed group',
+              content: 'I am posting into a closed group with a pending membership',
+              groupId: 'closed-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+
+      it('throws an error for hidden groups', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              id: 'p2',
+              title: 'A post to a closed group',
+              content: 'I am posting into a hidden group with a pending membership',
+              groupId: 'hidden-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+    })
+
+    describe('as a member of group', () => {
+      beforeAll(async () => {
+        authenticatedUser = await allGroupsUser.toJson()
+      })
+
+      it('creates a post for public groups', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              id: 'post-to-public-group',
+              title: 'A post to a public group',
+              content: 'I am posting into a public group as a member of the group',
+              groupId: 'public-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreatePost: {
+              id: 'post-to-public-group',
+              title: 'A post to a public group',
+              content: 'I am posting into a public group as a member of the group',
+            },
+          },
+          errors: undefined,
+        })
+      })
+
+      it('creates a post for closed groups', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              id: 'post-to-closed-group',
+              title: 'A post to a closed group',
+              content: 'I am posting into a closed group as a member of the group',
+              groupId: 'closed-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreatePost: {
+              id: 'post-to-closed-group',
+              title: 'A post to a closed group',
+              content: 'I am posting into a closed group as a member of the group',
+            },
+          },
+          errors: undefined,
+        })
+      })
+
+      it('creates a post for hidden groups', async () => {
+        await expect(
+          mutate({
+            mutation: createPostMutation(),
+            variables: {
+              id: 'post-to-hidden-group',
+              title: 'A post to a hidden group',
+              content: 'I am posting into a hidden group as a member of the group',
+              groupId: 'hidden-group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreatePost: {
+              id: 'post-to-hidden-group',
+              title: 'A post to a hidden group',
+              content: 'I am posting into a hidden group as a member of the group',
+            },
+          },
+          errors: undefined,
+        })
+      })
+    })
+  })
+
+  describe('commenting posts in groups', () => {
+    describe('without membership of group', () => {
+      beforeAll(async () => {
+        authenticatedUser = await anyUser.toJson()
+      })
+
+      it('throws an error for public groups', async () => {
+        await expect(
+          mutate({
+            mutation: createCommentMutation,
+            variables: {
+              postId: 'post-to-public-group',
+              content:
+                'I am commenting a post in a public group without being a member of the group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+
+      it('throws an error for closed groups', async () => {
+        await expect(
+          mutate({
+            mutation: createCommentMutation,
+            variables: {
+              postId: 'post-to-closed-group',
+              content:
+                'I am commenting a post in a closed group without being a member of the group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+
+      it('throws an error for hidden groups', async () => {
+        await expect(
+          mutate({
+            mutation: createCommentMutation,
+            variables: {
+              postId: 'post-to-hidden-group',
+              content:
+                'I am commenting a post in a hidden group without being a member of the group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+    })
+
+    describe('as a pending member of group', () => {
+      beforeAll(async () => {
+        authenticatedUser = await pendingUser.toJson()
+      })
+
+      it('throws an error for public groups', async () => {
+        await expect(
+          mutate({
+            mutation: createCommentMutation,
+            variables: {
+              postId: 'post-to-public-group',
+              content: 'I am commenting a post in a public group as a pending member of the group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+
+      it('throws an error for closed groups', async () => {
+        await expect(
+          mutate({
+            mutation: createCommentMutation,
+            variables: {
+              postId: 'post-to-closed-group',
+              content: 'I am commenting a post in a closed group  as a pending member of the group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+
+      it('throws an error for hidden groups', async () => {
+        await expect(
+          mutate({
+            mutation: createCommentMutation,
+            variables: {
+              postId: 'post-to-hidden-group',
+              content: 'I am commenting a post in a hidden group as a pending member of the group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          errors: expect.arrayContaining([expect.objectContaining({ message: 'Not Authorized!' })]),
+        })
+      })
+    })
+
+    describe('as a member of group', () => {
+      beforeAll(async () => {
+        authenticatedUser = await allGroupsUser.toJson()
+      })
+
+      it('comments a post in a public group', async () => {
+        await expect(
+          mutate({
+            mutation: createCommentMutation,
+            variables: {
+              postId: 'post-to-public-group',
+              content: 'I am commenting a post in a public group as a member of the group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreateComment: {
+              id: expect.any(String),
+            },
+          },
+          errors: undefined,
+        })
+      })
+
+      it('comments a post in a closed group', async () => {
+        await expect(
+          mutate({
+            mutation: createCommentMutation,
+            variables: {
+              postId: 'post-to-closed-group',
+              content: 'I am commenting a post in a closed group as a member of the group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreateComment: {
+              id: expect.any(String),
+            },
+          },
+          errors: undefined,
+        })
+      })
+
+      it('comments a post in a hidden group', async () => {
+        await expect(
+          mutate({
+            mutation: createCommentMutation,
+            variables: {
+              postId: 'post-to-hidden-group',
+              content: 'I am commenting a post in a hidden group as a member of the group',
+            },
+          }),
+        ).resolves.toMatchObject({
+          data: {
+            CreateComment: {
+              id: expect.any(String),
+            },
+          },
+          errors: undefined,
+        })
+      })
+    })
+  })
+
+  describe('visibility of posts', () => {
+    describe('query post by ID', () => {
+      describe('without authentication', () => {
+        beforeAll(async () => {
+          authenticatedUser = null
+        })
+
+        it('shows a post of the public group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-public-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+
+        it('does not show a post of a closed group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-closed-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: [],
+            },
+            errors: undefined,
+          })
+        })
+
+        it('does not show a post of a hidden group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-hidden-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: [],
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('as new user', () => {
+        beforeAll(async () => {
+          await Factory.build('emailAddress', {
+            email: 'new-user@example.org',
+            nonce: '12345',
+            verifiedAt: null,
+          })
+          const result = await mutate({
+            mutation: signupVerificationMutation,
+            variables: {
+              name: 'New User',
+              slug: 'new-user',
+              nonce: '12345',
+              password: '1234',
+              about: 'I am a new user!',
+              email: 'new-user@example.org',
+              termsAndConditionsAgreedVersion: '0.0.1',
+            },
+          })
+          newUser = result.data.SignupVerification
+          authenticatedUser = newUser
+        })
+
+        it('shows a post of the public group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-public-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+
+        it('does not show a post of a closed group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-closed-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: [],
+            },
+            errors: undefined,
+          })
+        })
+
+        it('does not show a post of a hidden group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-hidden-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: [],
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('without membership of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await anyUser.toJson()
+        })
+
+        it('shows a post of the public group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-public-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+
+        it('does not show a post of a closed group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-closed-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: [],
+            },
+            errors: undefined,
+          })
+        })
+
+        it('does not show a post of a hidden group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-hidden-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: [],
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('with pending membership of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await pendingUser.toJson()
+        })
+
+        it('shows a post of the public group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-public-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+
+        it('does not show a post of a closed group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-closed-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: [],
+            },
+            errors: undefined,
+          })
+        })
+
+        it('does not show a post of a hidden group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-hidden-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: [],
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('as member of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await allGroupsUser.toJson()
+        })
+
+        it('shows post of the public group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-public-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+
+        it('shows post of a closed group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-closed-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-closed-group',
+                  title: 'A post to a closed group',
+                  content: 'I am posting into a closed group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+
+        it('shows post of a hidden group', async () => {
+          await expect(
+            query({ query: postQuery(), variables: { id: 'post-to-hidden-group' } }),
+          ).resolves.toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-hidden-group',
+                  title: 'A post to a hidden group',
+                  content: 'I am posting into a hidden group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+    })
+
+    describe('filter posts', () => {
+      describe('without authentication', () => {
+        beforeAll(async () => {
+          authenticatedUser = null
+        })
+
+        it('shows the post of the public group and the post without group', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('as new user', () => {
+        beforeAll(async () => {
+          authenticatedUser = newUser
+        })
+
+        it('shows the post of the public group and the post without group', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('without membership of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await anyUser.toJson()
+        })
+
+        it('shows the post of the public group and the post without group', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('with pending membership of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await pendingUser.toJson()
+        })
+
+        it('shows the post of the public group and the post without group', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('as member of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await allGroupsUser.toJson()
+        })
+
+        it('shows all posts', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(4)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+                {
+                  id: 'post-to-closed-group',
+                  title: 'A post to a closed group',
+                  content: 'I am posting into a closed group as a member of the group',
+                },
+                {
+                  id: 'post-to-hidden-group',
+                  title: 'A post to a hidden group',
+                  content: 'I am posting into a hidden group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+    })
+
+    describe('profile page posts', () => {
+      describe('without authentication', () => {
+        beforeAll(async () => {
+          authenticatedUser = null
+        })
+
+        it('shows the post of the public group and the post without group', async () => {
+          const result = await query({ query: profilePagePosts(), variables: {} })
+          expect(result.data.profilePagePosts).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              profilePagePosts: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('as new user', () => {
+        beforeAll(async () => {
+          authenticatedUser = newUser
+        })
+
+        it('shows the post of the public group and the post without group', async () => {
+          const result = await query({ query: profilePagePosts(), variables: {} })
+          expect(result.data.profilePagePosts).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              profilePagePosts: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('without membership of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await anyUser.toJson()
+        })
+
+        it('shows the post of the public group and the post without group', async () => {
+          const result = await query({ query: profilePagePosts(), variables: {} })
+          expect(result.data.profilePagePosts).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              profilePagePosts: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('with pending membership of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await pendingUser.toJson()
+        })
+
+        it('shows the post of the public group and the post without group', async () => {
+          const result = await query({ query: profilePagePosts(), variables: {} })
+          expect(result.data.profilePagePosts).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              profilePagePosts: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('as member of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await allGroupsUser.toJson()
+        })
+
+        it('shows all posts', async () => {
+          const result = await query({ query: profilePagePosts(), variables: {} })
+          expect(result.data.profilePagePosts).toHaveLength(4)
+          expect(result).toMatchObject({
+            data: {
+              profilePagePosts: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+                {
+                  id: 'post-to-closed-group',
+                  title: 'A post to a closed group',
+                  content: 'I am posting into a closed group as a member of the group',
+                },
+                {
+                  id: 'post-to-hidden-group',
+                  title: 'A post to a hidden group',
+                  content: 'I am posting into a hidden group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+    })
+
+    describe('searchPosts', () => {
+      describe('without authentication', () => {
+        beforeAll(async () => {
+          authenticatedUser = null
+        })
+
+        it('finds nothing', async () => {
+          const result = await query({
+            query: searchPosts(),
+            variables: {
+              query: 'post',
+              postsOffset: 0,
+              firstPosts: 25,
+            },
+          })
+          expect(result.data.searchPosts.posts).toHaveLength(0)
+          expect(result).toMatchObject({
+            data: {
+              searchPosts: {
+                postCount: 0,
+                posts: [],
+              },
+            },
+          })
+        })
+      })
+
+      describe('as new user', () => {
+        beforeAll(async () => {
+          authenticatedUser = newUser
+        })
+
+        it('finds the post of the public group and the post without group', async () => {
+          const result = await query({
+            query: searchPosts(),
+            variables: {
+              query: 'post',
+              postsOffset: 0,
+              firstPosts: 25,
+            },
+          })
+          expect(result.data.searchPosts.posts).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              searchPosts: {
+                postCount: 2,
+                posts: expect.arrayContaining([
+                  {
+                    id: 'post-to-public-group',
+                    title: 'A post to a public group',
+                    content: 'I am posting into a public group as a member of the group',
+                  },
+                  {
+                    id: 'post-without-group',
+                    title: 'A post without a group',
+                    content: 'I am a user who does not belong to a group yet.',
+                  },
+                ]),
+              },
+            },
+          })
+        })
+      })
+
+      describe('without membership of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await anyUser.toJson()
+        })
+
+        it('finds the post of the public group and the post without group', async () => {
+          const result = await query({
+            query: searchPosts(),
+            variables: {
+              query: 'post',
+              postsOffset: 0,
+              firstPosts: 25,
+            },
+          })
+          expect(result.data.searchPosts.posts).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              searchPosts: {
+                postCount: 2,
+                posts: expect.arrayContaining([
+                  {
+                    id: 'post-to-public-group',
+                    title: 'A post to a public group',
+                    content: 'I am posting into a public group as a member of the group',
+                  },
+                  {
+                    id: 'post-without-group',
+                    title: 'A post without a group',
+                    content: 'I am a user who does not belong to a group yet.',
+                  },
+                ]),
+              },
+            },
+          })
+        })
+      })
+
+      describe('with pending membership of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await pendingUser.toJson()
+        })
+
+        it('finds the post of the public group and the post without group', async () => {
+          const result = await query({
+            query: searchPosts(),
+            variables: {
+              query: 'post',
+              postsOffset: 0,
+              firstPosts: 25,
+            },
+          })
+          expect(result.data.searchPosts.posts).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              searchPosts: {
+                postCount: 2,
+                posts: expect.arrayContaining([
+                  {
+                    id: 'post-to-public-group',
+                    title: 'A post to a public group',
+                    content: 'I am posting into a public group as a member of the group',
+                  },
+                  {
+                    id: 'post-without-group',
+                    title: 'A post without a group',
+                    content: 'I am a user who does not belong to a group yet.',
+                  },
+                ]),
+              },
+            },
+          })
+        })
+      })
+
+      describe('as member of group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await allGroupsUser.toJson()
+        })
+
+        it('finds all posts', async () => {
+          const result = await query({
+            query: searchPosts(),
+            variables: {
+              query: 'post',
+              postsOffset: 0,
+              firstPosts: 25,
+            },
+          })
+          expect(result.data.searchPosts.posts).toHaveLength(4)
+          expect(result).toMatchObject({
+            data: {
+              searchPosts: {
+                postCount: 4,
+                posts: expect.arrayContaining([
+                  {
+                    id: 'post-to-public-group',
+                    title: 'A post to a public group',
+                    content: 'I am posting into a public group as a member of the group',
+                  },
+                  {
+                    id: 'post-without-group',
+                    title: 'A post without a group',
+                    content: 'I am a user who does not belong to a group yet.',
+                  },
+                  {
+                    id: 'post-to-closed-group',
+                    title: 'A post to a closed group',
+                    content: 'I am posting into a closed group as a member of the group',
+                  },
+                  {
+                    id: 'post-to-hidden-group',
+                    title: 'A post to a hidden group',
+                    content: 'I am posting into a hidden group as a member of the group',
+                  },
+                ]),
+              },
+            },
+          })
+        })
+      })
+    })
+  })
+
+  describe('changes of group membership', () => {
+    describe('pending member becomes usual member', () => {
+      describe('of closed group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await closedUser.toJson()
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'closed-group',
+              userId: 'pending-user',
+              roleInGroup: 'usual',
+            },
+          })
+          authenticatedUser = await pendingUser.toJson()
+        })
+
+        it('shows the posts of the closed group', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(3)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+                {
+                  id: 'post-to-closed-group',
+                  title: 'A post to a closed group',
+                  content: 'I am posting into a closed group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('of hidden group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await hiddenUser.toJson()
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'hidden-group',
+              userId: 'pending-user',
+              roleInGroup: 'usual',
+            },
+          })
+          authenticatedUser = await pendingUser.toJson()
+        })
+
+        it('shows all the posts', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(4)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+                {
+                  id: 'post-to-closed-group',
+                  title: 'A post to a closed group',
+                  content: 'I am posting into a closed group as a member of the group',
+                },
+                {
+                  id: 'post-to-hidden-group',
+                  title: 'A post to a hidden group',
+                  content: 'I am posting into a hidden group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+    })
+
+    describe('usual member becomes pending', () => {
+      describe('of closed group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await closedUser.toJson()
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'closed-group',
+              userId: 'pending-user',
+              roleInGroup: 'pending',
+            },
+          })
+          authenticatedUser = await pendingUser.toJson()
+        })
+
+        it('does not show the posts of the closed group anymore', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(3)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+                {
+                  id: 'post-to-hidden-group',
+                  title: 'A post to a hidden group',
+                  content: 'I am posting into a hidden group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('of hidden group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await hiddenUser.toJson()
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'hidden-group',
+              userId: 'pending-user',
+              roleInGroup: 'pending',
+            },
+          })
+          authenticatedUser = await pendingUser.toJson()
+        })
+
+        it('shows only the public posts', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+    })
+
+    describe('usual member leaves', () => {
+      describe('public group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await allGroupsUser.toJson()
+          await mutate({
+            mutation: leaveGroupMutation(),
+            variables: {
+              groupId: 'public-group',
+              userId: 'all-groups-user',
+            },
+          })
+        })
+
+        it('still shows the posts of the public group', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(4)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+                {
+                  id: 'post-to-closed-group',
+                  title: 'A post to a closed group',
+                  content: 'I am posting into a closed group as a member of the group',
+                },
+                {
+                  id: 'post-to-hidden-group',
+                  title: 'A post to a hidden group',
+                  content: 'I am posting into a hidden group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('closed group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await allGroupsUser.toJson()
+          await mutate({
+            mutation: leaveGroupMutation(),
+            variables: {
+              groupId: 'closed-group',
+              userId: 'all-groups-user',
+            },
+          })
+        })
+
+        it('does not show the posts of the closed group anymore', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(3)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+                {
+                  id: 'post-to-hidden-group',
+                  title: 'A post to a hidden group',
+                  content: 'I am posting into a hidden group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('hidden group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await allGroupsUser.toJson()
+          await mutate({
+            mutation: leaveGroupMutation(),
+            variables: {
+              groupId: 'hidden-group',
+              userId: 'all-groups-user',
+            },
+          })
+        })
+
+        it('does only show the public posts', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(2)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+    })
+
+    describe('any user joins', () => {
+      describe('closed group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await closedUser.toJson()
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'closed-group',
+              userId: 'all-groups-user',
+              roleInGroup: 'usual',
+            },
+          })
+          authenticatedUser = await allGroupsUser.toJson()
+        })
+
+        it('does not show the posts of the closed group', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(3)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+                {
+                  id: 'post-to-closed-group',
+                  title: 'A post to a closed group',
+                  content: 'I am posting into a closed group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('hidden group', () => {
+        beforeAll(async () => {
+          authenticatedUser = await hiddenUser.toJson()
+          await mutate({
+            mutation: changeGroupMemberRoleMutation(),
+            variables: {
+              groupId: 'hidden-group',
+              userId: 'all-groups-user',
+              roleInGroup: 'usual',
+            },
+          })
+          authenticatedUser = await allGroupsUser.toJson()
+        })
+
+        it('shows all posts', async () => {
+          const result = await query({ query: filterPosts(), variables: {} })
+          expect(result.data.Post).toHaveLength(4)
+          expect(result).toMatchObject({
+            data: {
+              Post: expect.arrayContaining([
+                {
+                  id: 'post-to-public-group',
+                  title: 'A post to a public group',
+                  content: 'I am posting into a public group as a member of the group',
+                },
+                {
+                  id: 'post-without-group',
+                  title: 'A post without a group',
+                  content: 'I am a user who does not belong to a group yet.',
+                },
+                {
+                  id: 'post-to-closed-group',
+                  title: 'A post to a closed group',
+                  content: 'I am posting into a closed group as a member of the group',
+                },
+                {
+                  id: 'post-to-hidden-group',
+                  title: 'A post to a hidden group',
+                  content: 'I am posting into a hidden group as a member of the group',
+                },
+              ]),
+            },
+            errors: undefined,
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/backend/src/schema/resolvers/registration.js b/backend/src/schema/resolvers/registration.js
index ea420bc2a..52c92b033 100644
--- a/backend/src/schema/resolvers/registration.js
+++ b/backend/src/schema/resolvers/registration.js
@@ -72,19 +72,19 @@ const signupCypher = (inviteCode) => {
       (inviteCode:InviteCode {code: $inviteCode})<-[:GENERATED]-(host:User)
       `
     optionalMerge = `
-      MERGE(user)-[:REDEEMED { createdAt: toString(datetime()) }]->(inviteCode)
-      MERGE(host)-[:INVITED { createdAt: toString(datetime()) }]->(user)
-      MERGE(user)-[:FOLLOWS { createdAt: toString(datetime()) }]->(host)
-      MERGE(host)-[:FOLLOWS { createdAt: toString(datetime()) }]->(user)
+      MERGE (user)-[:REDEEMED { createdAt: toString(datetime()) }]->(inviteCode)
+      MERGE (host)-[:INVITED { createdAt: toString(datetime()) }]->(user)
+      MERGE (user)-[:FOLLOWS { createdAt: toString(datetime()) }]->(host)
+      MERGE (host)-[:FOLLOWS { createdAt: toString(datetime()) }]->(user)
       `
   }
   const cypher = `
-      MATCH(email:EmailAddress {nonce: $nonce, email: $email})
+      MATCH (email:EmailAddress {nonce: $nonce, email: $email})
       WHERE NOT (email)-[:BELONGS_TO]->()
       ${optionalMatch}
       CREATE (user:User)
-      MERGE(user)-[:PRIMARY_EMAIL]->(email)
-      MERGE(user)<-[:BELONGS_TO]-(email)
+      MERGE (user)-[:PRIMARY_EMAIL]->(email)
+      MERGE (user)<-[:BELONGS_TO]-(email)
       ${optionalMerge}
       SET user += $args
       SET user.id = randomUUID()
@@ -95,6 +95,13 @@ const signupCypher = (inviteCode) => {
       SET user.showShoutsPublicly = false
       SET user.sendNotificationEmails = true
       SET email.verifiedAt = toString(datetime())
+      WITH user
+      OPTIONAL MATCH (post:Post)-[:IN]->(group:Group)
+        WHERE NOT group.groupType = 'public'
+      WITH user, collect(post) AS invisiblePosts
+      FOREACH (invisiblePost IN invisiblePosts |
+        MERGE (user)-[:CANNOT_SEE]->(invisiblePost)
+      )
       RETURN user {.*}
     `
   return cypher
diff --git a/backend/src/schema/resolvers/registration.spec.js b/backend/src/schema/resolvers/registration.spec.js
index 573af1d35..ebe36456b 100644
--- a/backend/src/schema/resolvers/registration.spec.js
+++ b/backend/src/schema/resolvers/registration.spec.js
@@ -61,7 +61,7 @@ describe('Signup', () => {
       CONFIG.INVITE_REGISTRATION = false
       CONFIG.PUBLIC_REGISTRATION = false
       await expect(mutate({ mutation, variables })).resolves.toMatchObject({
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
       })
     })
 
diff --git a/backend/src/schema/resolvers/reports.spec.js b/backend/src/schema/resolvers/reports.spec.js
index 09d0869fc..7cf4d9a34 100644
--- a/backend/src/schema/resolvers/reports.spec.js
+++ b/backend/src/schema/resolvers/reports.spec.js
@@ -130,7 +130,7 @@ describe('file a report on a resource', () => {
         authenticatedUser = null
         await expect(mutate({ mutation: fileReportMutation, variables })).resolves.toMatchObject({
           data: { fileReport: null },
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -729,7 +729,7 @@ describe('file a report on a resource', () => {
         authenticatedUser = null
         expect(query({ query: reportsQuery })).resolves.toMatchObject({
           data: { reports: null },
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -739,7 +739,7 @@ describe('file a report on a resource', () => {
         authenticatedUser = await currentUser.toJson()
         expect(query({ query: reportsQuery })).resolves.toMatchObject({
           data: { reports: null },
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
 
diff --git a/backend/src/schema/resolvers/rewards.spec.js b/backend/src/schema/resolvers/rewards.spec.js
index 718378699..f44cf51f6 100644
--- a/backend/src/schema/resolvers/rewards.spec.js
+++ b/backend/src/schema/resolvers/rewards.spec.js
@@ -97,7 +97,7 @@ describe('rewards', () => {
         authenticatedUser = null
         await expect(mutate({ mutation: rewardMutation, variables })).resolves.toMatchObject({
           data: { reward: null },
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -255,7 +255,7 @@ describe('rewards', () => {
         it('throws authorization error', async () => {
           await expect(mutate({ mutation: rewardMutation, variables })).resolves.toMatchObject({
             data: { reward: null },
-            errors: [{ message: 'Not Authorised!' }],
+            errors: [{ message: 'Not Authorized!' }],
           })
         })
       })
@@ -308,7 +308,7 @@ describe('rewards', () => {
         authenticatedUser = null
         await expect(mutate({ mutation: unrewardMutation, variables })).resolves.toMatchObject({
           data: { unreward: null },
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -341,7 +341,7 @@ describe('rewards', () => {
         it('throws authorization error', async () => {
           await expect(mutate({ mutation: unrewardMutation, variables })).resolves.toMatchObject({
             data: { unreward: null },
-            errors: [{ message: 'Not Authorised!' }],
+            errors: [{ message: 'Not Authorized!' }],
           })
         })
       })
diff --git a/backend/src/schema/resolvers/searches.js b/backend/src/schema/resolvers/searches.js
index 60fd4318f..3fdf22da3 100644
--- a/backend/src/schema/resolvers/searches.js
+++ b/backend/src/schema/resolvers/searches.js
@@ -23,12 +23,15 @@ const postWhereClause = `WHERE score >= 0.0
   AND NOT (
     author.deleted = true OR author.disabled = true
     OR resource.deleted = true OR resource.disabled = true
-    OR (:User {id: $userId})-[:MUTED]->(author)
-  )`
+  ) AND block IS NULL AND restriction IS NULL`
 
 const searchPostsSetup = {
   fulltextIndex: 'post_fulltext_search',
-  match: 'MATCH (resource:Post)<-[:WROTE]-(author:User)',
+  match: `MATCH (resource:Post)<-[:WROTE]-(author:User)
+          MATCH (user:User {id: $userId})
+          OPTIONAL MATCH (user)-[block:MUTED]->(author)
+          OPTIONAL MATCH (user)-[restriction:CANNOT_SEE]->(resource)
+          WITH user, resource, author, block, restriction`,
   whereClause: postWhereClause,
   withClause: `WITH resource, author,
   [(resource)<-[:COMMENTS]-(comment:Comment) | comment] AS comments,
@@ -63,6 +66,21 @@ const searchHashtagsSetup = {
   limit: 'LIMIT $limit',
 }
 
+const searchGroupsSetup = {
+  fulltextIndex: 'group_fulltext_search',
+  match: `MATCH (resource:Group)
+          MATCH (user:User {id: $userId})
+          OPTIONAL MATCH (user)-[membership:MEMBER_OF]->(resource)
+          WITH user, resource, membership`,
+  whereClause: `WHERE score >= 0.0
+                AND NOT (resource.deleted = true OR resource.disabled = true)
+                AND (resource.groupType IN ['public', 'closed']
+                  OR membership.role IN ['usual', 'admin', 'owner'])`,
+  withClause: 'WITH resource, membership',
+  returnClause: 'resource { .*, myRole: membership.role, __typename: labels(resource)[0] }',
+  limit: 'LIMIT $limit',
+}
+
 const countSetup = {
   returnClause: 'toString(size(collect(resource)))',
   limit: '',
@@ -80,6 +98,10 @@ const countHashtagsSetup = {
   ...searchHashtagsSetup,
   ...countSetup,
 }
+const countGroupsSetup = {
+  ...searchGroupsSetup,
+  ...countSetup,
+}
 
 const searchResultPromise = async (session, setup, params) => {
   return session.readTransaction(async (transaction) => {
@@ -110,14 +132,15 @@ const multiSearchMap = [
   { symbol: '!', setup: searchPostsSetup, resultName: 'posts' },
   { symbol: '@', setup: searchUsersSetup, resultName: 'users' },
   { symbol: '#', setup: searchHashtagsSetup, resultName: 'hashtags' },
+  { symbol: '&', setup: searchGroupsSetup, resultName: 'groups' },
 ]
 
 export default {
   Query: {
     searchPosts: async (_parent, args, context, _resolveInfo) => {
       const { query, postsOffset, firstPosts } = args
-      const { id: userId } = context.user
-
+      let userId = null
+      if (context.user) userId = context.user.id
       return {
         postCount: getSearchResults(
           context,
@@ -175,12 +198,36 @@ export default {
         }),
       }
     },
+    searchGroups: async (_parent, args, context, _resolveInfo) => {
+      const { query, groupsOffset, firstGroups } = args
+      let userId = null
+      if (context.user) userId = context.user.id
+      return {
+        groupCount: getSearchResults(
+          context,
+          countGroupsSetup,
+          {
+            query: queryString(query),
+            skip: 0,
+            userId,
+          },
+          countResultCallback,
+        ),
+        groups: getSearchResults(context, searchGroupsSetup, {
+          query: queryString(query),
+          skip: groupsOffset,
+          limit: firstGroups,
+          userId,
+        }),
+      }
+    },
     searchResults: async (_parent, args, context, _resolveInfo) => {
       const { query, limit } = args
-      const { id: userId } = context.user
+      let userId = null
+      if (context.user) userId = context.user.id
 
-      const searchType = query.replace(/^([!@#]?).*$/, '$1')
-      const searchString = query.replace(/^([!@#])/, '')
+      const searchType = query.replace(/^([!@#&]?).*$/, '$1')
+      const searchString = query.replace(/^([!@#&])/, '')
 
       const params = {
         query: queryString(searchString),
@@ -193,6 +240,7 @@ export default {
         return [
           ...(await getSearchResults(context, searchPostsSetup, params)),
           ...(await getSearchResults(context, searchUsersSetup, params)),
+          ...(await getSearchResults(context, searchGroupsSetup, params)),
           ...(await getSearchResults(context, searchHashtagsSetup, params)),
         ]
 
diff --git a/backend/src/schema/resolvers/shout.spec.js b/backend/src/schema/resolvers/shout.spec.js
index a4e9890d5..087c452da 100644
--- a/backend/src/schema/resolvers/shout.spec.js
+++ b/backend/src/schema/resolvers/shout.spec.js
@@ -90,7 +90,7 @@ describe('shout and unshout posts', () => {
         variables = { id: 'post-to-shout-id' }
         authenticatedUser = undefined
         await expect(mutate({ mutation: mutationShoutPost, variables })).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
@@ -165,7 +165,7 @@ describe('shout and unshout posts', () => {
         authenticatedUser = undefined
         variables = { id: 'post-to-shout-id' }
         await expect(mutate({ mutation: mutationUnshoutPost, variables })).resolves.toMatchObject({
-          errors: [{ message: 'Not Authorised!' }],
+          errors: [{ message: 'Not Authorized!' }],
         })
       })
     })
diff --git a/backend/src/schema/resolvers/socialMedia.spec.js b/backend/src/schema/resolvers/socialMedia.spec.js
index bb7886c3f..fc9ee8f70 100644
--- a/backend/src/schema/resolvers/socialMedia.spec.js
+++ b/backend/src/schema/resolvers/socialMedia.spec.js
@@ -94,7 +94,7 @@ describe('SocialMedia', () => {
         const user = null
         const result = await socialMediaAction(user, mutation, variables)
 
-        expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
@@ -186,7 +186,7 @@ describe('SocialMedia', () => {
         const user = null
         const result = await socialMediaAction(user, mutation, variables)
 
-        expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
@@ -195,7 +195,7 @@ describe('SocialMedia', () => {
         const user = someUser
         const result = await socialMediaAction(user, mutation, variables)
 
-        expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
@@ -222,7 +222,7 @@ describe('SocialMedia', () => {
         variables.id = 'some-id'
         const result = await socialMediaAction(user, mutation, variables)
 
-        expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
   })
@@ -249,7 +249,7 @@ describe('SocialMedia', () => {
         const user = null
         const result = await socialMediaAction(user, mutation, variables)
 
-        expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
@@ -258,7 +258,7 @@ describe('SocialMedia', () => {
         const user = someUser
         const result = await socialMediaAction(user, mutation, variables)
 
-        expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+        expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
       })
     })
 
diff --git a/backend/src/schema/resolvers/user_management.js b/backend/src/schema/resolvers/user_management.js
index beb2cddb3..d88eafdae 100644
--- a/backend/src/schema/resolvers/user_management.js
+++ b/backend/src/schema/resolvers/user_management.js
@@ -20,16 +20,22 @@ export default {
         const result = await transaction.run(
           `
             MATCH (user:User {id: $id})
-            WITH user, [(user)<-[:OWNED_BY]-(medium:SocialMedia) | properties(medium) ] as media
-            RETURN user {.*, socialMedia: media } as user
+            OPTIONAL MATCH (category:Category) WHERE NOT ((user)-[:NOT_INTERESTED_IN]->(category))
+            OPTIONAL MATCH (cats:Category)
+            WITH user, [(user)<-[:OWNED_BY]-(medium:SocialMedia) | properties(medium) ] AS media, category, toString(COUNT(cats)) AS categoryCount
+            RETURN user {.*, socialMedia: media, activeCategories: collect(category.id) } AS user, categoryCount
           `,
           { id: user.id },
         )
-        log(result)
-        return result.records.map((record) => record.get('user'))
+        const [categoryCount] = result.records.map((record) => record.get('categoryCount'))
+        const [currentUser] = result.records.map((record) => record.get('user'))
+        // frontend expects empty array when all categories are selected
+        if (currentUser.activeCategories.length === parseInt(categoryCount))
+          currentUser.activeCategories = []
+        return currentUser
       })
       try {
-        const [currentUser] = await currentUserTransactionPromise
+        const currentUser = await currentUserTransactionPromise
         return currentUser
       } finally {
         session.close()
diff --git a/backend/src/schema/resolvers/user_management.spec.js b/backend/src/schema/resolvers/user_management.spec.js
index 2dcb14855..50e6e84bf 100644
--- a/backend/src/schema/resolvers/user_management.spec.js
+++ b/backend/src/schema/resolvers/user_management.spec.js
@@ -2,10 +2,12 @@ import jwt from 'jsonwebtoken'
 import CONFIG from './../../config'
 import Factory, { cleanDatabase } from '../../db/factories'
 import { gql } from '../../helpers/jest'
+import { loginMutation } from '../../db/graphql/userManagement'
 import { createTestClient } from 'apollo-server-testing'
 import createServer, { context } from '../../server'
 import encode from '../../jwt/encode'
 import { getNeode } from '../../db/neo4j'
+import { categories } from '../../constants/categories'
 
 const neode = getNeode()
 let query, mutate, variables, req, user
@@ -118,6 +120,7 @@ describe('currentUser', () => {
         }
         email
         role
+        activeCategories
       }
     }
   `
@@ -172,17 +175,57 @@ describe('currentUser', () => {
         }
         await respondsWith(expected)
       })
+
+      describe('with categories in DB', () => {
+        beforeEach(async () => {
+          await Promise.all(
+            categories.map(async ({ icon, name }, index) => {
+              await Factory.build('category', {
+                id: `cat${index + 1}`,
+                slug: name,
+                name,
+                icon,
+              })
+            }),
+          )
+        })
+
+        it('returns empty array for all categories', async () => {
+          await respondsWith({
+            data: {
+              currentUser: expect.objectContaining({ activeCategories: [] }),
+            },
+          })
+        })
+
+        describe('with categories saved for current user', () => {
+          const saveCategorySettings = gql`
+            mutation ($activeCategories: [String]) {
+              saveCategorySettings(activeCategories: $activeCategories)
+            }
+          `
+          beforeEach(async () => {
+            await mutate({
+              mutation: saveCategorySettings,
+              variables: { activeCategories: ['cat1', 'cat3', 'cat5', 'cat7'] },
+            })
+          })
+
+          it('returns only the saved active categories', async () => {
+            const result = await query({ query: currentUserQuery, variables })
+            expect(result.data.currentUser.activeCategories).toHaveLength(4)
+            expect(result.data.currentUser.activeCategories).toContain('cat1')
+            expect(result.data.currentUser.activeCategories).toContain('cat3')
+            expect(result.data.currentUser.activeCategories).toContain('cat5')
+            expect(result.data.currentUser.activeCategories).toContain('cat7')
+          })
+        })
+      })
     })
   })
 })
 
 describe('login', () => {
-  const loginMutation = gql`
-    mutation ($email: String!, $password: String!) {
-      login(email: $email, password: $password)
-    }
-  `
-
   const respondsWith = async (expected) => {
     await expect(mutate({ mutation: loginMutation, variables })).resolves.toMatchObject(expected)
   }
@@ -310,8 +353,8 @@ describe('change password', () => {
   })
 
   describe('unauthenticated', () => {
-    it('throws "Not Authorised!"', async () => {
-      await respondsWith({ errors: [{ message: 'Not Authorised!' }] })
+    it('throws "Not Authorized!"', async () => {
+      await respondsWith({ errors: [{ message: 'Not Authorized!' }] })
     })
   })
 
diff --git a/backend/src/schema/resolvers/users.js b/backend/src/schema/resolvers/users.js
index 5dc78c5e1..1ce3b986f 100644
--- a/backend/src/schema/resolvers/users.js
+++ b/backend/src/schema/resolvers/users.js
@@ -4,7 +4,7 @@ import { UserInputError, ForbiddenError } from 'apollo-server'
 import { mergeImage, deleteImage } from './images/images'
 import Resolver from './helpers/Resolver'
 import log from './helpers/databaseLogger'
-import createOrUpdateLocations from './users/location'
+import { createOrUpdateLocations } from './users/location'
 
 const neode = getNeode()
 
@@ -139,9 +139,10 @@ export default {
       return blockedUser.toJson()
     },
     UpdateUser: async (_parent, params, context, _resolveInfo) => {
-      const { termsAndConditionsAgreedVersion } = params
       const { avatar: avatarInput } = params
       delete params.avatar
+      params.locationName = params.locationName === '' ? null : params.locationName
+      const { termsAndConditionsAgreedVersion } = params
       if (termsAndConditionsAgreedVersion) {
         const regEx = new RegExp(/^[0-9]+\.[0-9]+\.[0-9]+$/g)
         if (!regEx.test(termsAndConditionsAgreedVersion)) {
@@ -169,7 +170,8 @@ export default {
       })
       try {
         const user = await writeTxResultPromise
-        await createOrUpdateLocations(params.id, params.locationName, session)
+        // TODO: put in a middleware, see "CreateGroup", "UpdateGroup"
+        await createOrUpdateLocations('User', params.id, params.locationName, session)
         return user
       } catch (error) {
         throw new UserInputError(error.message)
@@ -269,6 +271,49 @@ export default {
         session.close()
       }
     },
+    saveCategorySettings: async (object, args, context, resolveInfo) => {
+      const { activeCategories } = args
+      const {
+        user: { id },
+      } = context
+
+      const session = context.driver.session()
+      await session.writeTransaction((transaction) => {
+        return transaction.run(
+          `
+          MATCH (user:User { id: $id })-[previousCategories:NOT_INTERESTED_IN]->(category:Category)
+          DELETE previousCategories
+          RETURN user, category
+        `,
+          { id },
+        )
+      })
+
+      // frontend gives [] when all categories are selected (default)
+      if (activeCategories.length === 0) return true
+
+      const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        const saveCategorySettingsResponse = await transaction.run(
+          `
+            MATCH (category:Category) WHERE NOT category.id IN $activeCategories
+            MATCH (user:User { id: $id })
+            MERGE (user)-[r:NOT_INTERESTED_IN]->(category)
+            RETURN user, r, category
+          `,
+          { id, activeCategories },
+        )
+        const [user] = await saveCategorySettingsResponse.records.map((record) =>
+          record.get('user'),
+        )
+        return user
+      })
+      try {
+        await writeTxResultPromise
+        return true
+      } finally {
+        session.close()
+      }
+    },
   },
   User: {
     email: async (parent, params, context, resolveInfo) => {
diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index 102d2f6fe..87226ec4d 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -3,6 +3,7 @@ import { gql } from '../../helpers/jest'
 import { getNeode, getDriver } from '../../db/neo4j'
 import createServer from '../../server'
 import { createTestClient } from 'apollo-server-testing'
+import { categories } from '../../constants/categories'
 
 const categoryIds = ['cat9']
 let user
@@ -45,7 +46,7 @@ const deleteUserMutation = gql`
   }
 `
 const switchUserRoleMutation = gql`
-  mutation ($role: UserGroup!, $id: ID!) {
+  mutation ($role: UserRole!, $id: ID!) {
     switchUserRole(role: $role, id: $id) {
       name
       role
@@ -56,6 +57,12 @@ const switchUserRoleMutation = gql`
   }
 `
 
+const saveCategorySettings = gql`
+  mutation ($activeCategories: [String]) {
+    saveCategorySettings(activeCategories: $activeCategories)
+  }
+`
+
 beforeAll(async () => {
   await cleanDatabase()
 
@@ -101,7 +108,7 @@ describe('User', () => {
 
     it('is forbidden', async () => {
       await expect(query({ query: userQuery, variables })).resolves.toMatchObject({
-        errors: [{ message: 'Not Authorised!' }],
+        errors: [{ message: 'Not Authorized!' }],
       })
     })
 
@@ -154,7 +161,7 @@ describe('UpdateUser', () => {
         $id: ID!
         $name: String
         $termsAndConditionsAgreedVersion: String
-        $locationName: String
+        $locationName: String # empty string '' sets it to null
       ) {
         UpdateUser(
           id: $id
@@ -167,6 +174,11 @@ describe('UpdateUser', () => {
           termsAndConditionsAgreedVersion
           termsAndConditionsAgreedAt
           locationName
+          location {
+            name
+            nameDE
+            nameEN
+          }
         }
       }
     `
@@ -207,7 +219,7 @@ describe('UpdateUser', () => {
 
     it('is not allowed to change other user accounts', async () => {
       const { errors } = await mutate({ mutation: updateUserMutation, variables })
-      expect(errors[0]).toHaveProperty('message', 'Not Authorised!')
+      expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
     })
   })
 
@@ -282,11 +294,39 @@ describe('UpdateUser', () => {
       expect(errors[0]).toHaveProperty('message', 'Invalid version format!')
     })
 
-    it('supports updating location', async () => {
-      variables = { ...variables, locationName: 'Hamburg, New Jersey, United States' }
-      await expect(mutate({ mutation: updateUserMutation, variables })).resolves.toMatchObject({
-        data: { UpdateUser: { locationName: 'Hamburg, New Jersey, United States' } },
-        errors: undefined,
+    describe('supports updating location', () => {
+      describe('change location to "Hamburg, New Jersey, United States"', () => {
+        it('has updated location to  "Hamburg, New Jersey, United States"', async () => {
+          variables = { ...variables, locationName: 'Hamburg, New Jersey, United States' }
+          await expect(mutate({ mutation: updateUserMutation, variables })).resolves.toMatchObject({
+            data: {
+              UpdateUser: {
+                locationName: 'Hamburg, New Jersey, United States',
+                location: expect.objectContaining({
+                  name: 'Hamburg',
+                  nameDE: 'Hamburg',
+                  nameEN: 'Hamburg',
+                }),
+              },
+            },
+            errors: undefined,
+          })
+        })
+      })
+
+      describe('change location to unset location', () => {
+        it('has updated location to  unset location', async () => {
+          variables = { ...variables, locationName: '' }
+          await expect(mutate({ mutation: updateUserMutation, variables })).resolves.toMatchObject({
+            data: {
+              UpdateUser: {
+                locationName: null,
+                location: null,
+              },
+            },
+            errors: undefined,
+          })
+        })
       })
     })
   })
@@ -500,7 +540,7 @@ describe('switch user role', () => {
         expect.objectContaining({
           errors: [
             expect.objectContaining({
-              message: 'Not Authorised!',
+              message: 'Not Authorized!',
             }),
           ],
         }),
@@ -544,3 +584,140 @@ describe('switch user role', () => {
     })
   })
 })
+
+describe('save category settings', () => {
+  beforeEach(async () => {
+    await Promise.all(
+      categories.map(({ icon, name }, index) => {
+        Factory.build('category', {
+          id: `cat${index + 1}`,
+          slug: name,
+          name,
+          icon,
+        })
+      }),
+    )
+  })
+
+  beforeEach(async () => {
+    user = await Factory.build('user', {
+      id: 'user',
+      role: 'user',
+    })
+    variables = {
+      activeCategories: ['cat1', 'cat3', 'cat5'],
+    }
+  })
+
+  describe('not authenticated', () => {
+    beforeEach(async () => {
+      authenticatedUser = undefined
+    })
+
+    it('throws an error', async () => {
+      await expect(mutate({ mutation: saveCategorySettings, variables })).resolves.toEqual(
+        expect.objectContaining({
+          errors: [
+            expect.objectContaining({
+              message: 'Not Authorized!',
+            }),
+          ],
+        }),
+      )
+    })
+  })
+
+  describe('authenticated', () => {
+    beforeEach(async () => {
+      authenticatedUser = await user.toJson()
+    })
+
+    const userQuery = gql`
+      query ($id: ID) {
+        User(id: $id) {
+          activeCategories
+        }
+      }
+    `
+
+    describe('no categories saved', () => {
+      it('returns true for active categories mutation', async () => {
+        await expect(mutate({ mutation: saveCategorySettings, variables })).resolves.toEqual(
+          expect.objectContaining({
+            data: { saveCategorySettings: true },
+          }),
+        )
+      })
+
+      describe('query for user', () => {
+        beforeEach(async () => {
+          await mutate({ mutation: saveCategorySettings, variables })
+        })
+
+        it('returns the active categories when user is queried', async () => {
+          await expect(
+            query({ query: userQuery, variables: { id: authenticatedUser.id } }),
+          ).resolves.toEqual(
+            expect.objectContaining({
+              data: {
+                User: [
+                  {
+                    activeCategories: expect.arrayContaining(['cat1', 'cat3', 'cat5']),
+                  },
+                ],
+              },
+            }),
+          )
+        })
+      })
+    })
+
+    describe('categories already saved', () => {
+      beforeEach(async () => {
+        variables = {
+          activeCategories: ['cat1', 'cat3', 'cat5'],
+        }
+        await mutate({ mutation: saveCategorySettings, variables })
+        variables = {
+          activeCategories: ['cat10', 'cat11', 'cat12', 'cat8', 'cat9'],
+        }
+      })
+
+      it('returns true', async () => {
+        await expect(mutate({ mutation: saveCategorySettings, variables })).resolves.toEqual(
+          expect.objectContaining({
+            data: { saveCategorySettings: true },
+          }),
+        )
+      })
+
+      describe('query for user', () => {
+        beforeEach(async () => {
+          await mutate({ mutation: saveCategorySettings, variables })
+        })
+
+        it('returns the new active categories when user is queried', async () => {
+          await expect(
+            query({ query: userQuery, variables: { id: authenticatedUser.id } }),
+          ).resolves.toEqual(
+            expect.objectContaining({
+              data: {
+                User: [
+                  {
+                    activeCategories: expect.arrayContaining([
+                      'cat10',
+                      'cat11',
+                      'cat12',
+                      'cat8',
+                      'cat9',
+                    ]),
+                  },
+                ],
+              },
+            }),
+          )
+        })
+      })
+    })
+  })
+})
diff --git a/backend/src/schema/resolvers/users/location.js b/backend/src/schema/resolvers/users/location.js
index affd3267e..9d8a11f89 100644
--- a/backend/src/schema/resolvers/users/location.js
+++ b/backend/src/schema/resolvers/users/location.js
@@ -1,6 +1,5 @@
 import request from 'request'
 import { UserInputError } from 'apollo-server'
-import isEmpty from 'lodash/isEmpty'
 import Debug from 'debug'
 import asyncForEach from '../../../helpers/asyncForEach'
 import CONFIG from '../../../config'
@@ -62,77 +61,86 @@ const createLocation = async (session, mapboxData) => {
   })
 }
 
-const createOrUpdateLocations = async (userId, locationName, session) => {
-  if (isEmpty(locationName)) {
-    return
-  }
-  const res = await fetch(
-    `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(
-      locationName,
-    )}.json?access_token=${CONFIG.MAPBOX_TOKEN}&types=region,place,country&language=${locales.join(
-      ',',
-    )}`,
-  )
+export const createOrUpdateLocations = async (nodeLabel, nodeId, locationName, session) => {
+  if (locationName === undefined) return
 
-  debug(res)
+  let locationId
 
-  if (!res || !res.features || !res.features[0]) {
-    throw new UserInputError('locationName is invalid')
-  }
+  if (locationName !== null) {
+    const res = await fetch(
+      `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(
+        locationName,
+      )}.json?access_token=${
+        CONFIG.MAPBOX_TOKEN
+      }&types=region,place,country&language=${locales.join(',')}`,
+    )
 
-  let data
+    debug(res)
 
-  res.features.forEach((item) => {
-    if (item.matching_place_name === locationName) {
-      data = item
+    if (!res || !res.features || !res.features[0]) {
+      throw new UserInputError('locationName is invalid')
     }
-  })
-  if (!data) {
-    data = res.features[0]
-  }
 
-  if (!data || !data.place_type || !data.place_type.length) {
-    throw new UserInputError('locationName is invalid')
-  }
+    let data
 
-  if (data.place_type.length > 1) {
-    data.id = 'region.' + data.id.split('.')[1]
-  }
-  await createLocation(session, data)
-
-  let parent = data
-
-  if (data.context) {
-    await asyncForEach(data.context, async (ctx) => {
-      await createLocation(session, ctx)
-      await session.writeTransaction((transaction) => {
-        return transaction.run(
-          `
-              MATCH (parent:Location {id: $parentId}), (child:Location {id: $childId})
-              MERGE (child)<-[:IS_IN]-(parent)
-              RETURN child.id, parent.id
-            `,
-          {
-            parentId: parent.id,
-            childId: ctx.id,
-          },
-        )
-      })
-      parent = ctx
+    res.features.forEach((item) => {
+      if (item.matching_place_name === locationName) {
+        data = item
+      }
     })
+    if (!data) {
+      data = res.features[0]
+    }
+
+    if (!data || !data.place_type || !data.place_type.length) {
+      throw new UserInputError('locationName is invalid')
+    }
+
+    if (data.place_type.length > 1) {
+      data.id = 'region.' + data.id.split('.')[1]
+    }
+    await createLocation(session, data)
+
+    let parent = data
+
+    if (data.context) {
+      await asyncForEach(data.context, async (ctx) => {
+        await createLocation(session, ctx)
+        await session.writeTransaction((transaction) => {
+          return transaction.run(
+            `
+                MATCH (parent:Location {id: $parentId}), (child:Location {id: $childId})
+                MERGE (child)<-[:IS_IN]-(parent)
+                RETURN child.id, parent.id
+              `,
+            {
+              parentId: parent.id,
+              childId: ctx.id,
+            },
+          )
+        })
+        parent = ctx
+      })
+    }
+
+    locationId = data.id
+  } else {
+    locationId = 'non-existent-id'
   }
-  // delete all current locations from user and add new location
+
+  // delete all current locations from node and add new location
   await session.writeTransaction((transaction) => {
     return transaction.run(
       `
-          MATCH (user:User {id: $userId})-[relationship:IS_IN]->(location:Location)
-          DETACH DELETE relationship
-          WITH user
-          MATCH (location:Location {id: $locationId})
-          MERGE (user)-[:IS_IN]->(location)
-          RETURN location.id, user.id
-        `,
-      { userId: userId, locationId: data.id },
+        MATCH (node:${nodeLabel} {id: $nodeId})
+        OPTIONAL MATCH (node)-[relationship:IS_IN]->(:Location)
+        DELETE relationship
+        WITH node
+        MATCH (location:Location {id: $locationId})
+        MERGE (node)-[:IS_IN]->(location)
+        RETURN location.id, node.id
+      `,
+      { nodeId, locationId },
     )
   })
 }
@@ -147,5 +155,3 @@ export const queryLocations = async ({ place, lang }) => {
   }
   return res.features
 }
-
-export default createOrUpdateLocations
diff --git a/backend/src/schema/resolvers/users/location.spec.js b/backend/src/schema/resolvers/users/location.spec.js
index 92f08893e..c0525ca1c 100644
--- a/backend/src/schema/resolvers/users/location.spec.js
+++ b/backend/src/schema/resolvers/users/location.spec.js
@@ -121,7 +121,7 @@ describe('Location Service', () => {
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual(
       expect.arrayContaining([
-        { id: 'place.14094307404564380', place_name: 'Berlin, Germany' },
+        { id: expect.stringMatching(/^place\.[0-9]+$/), place_name: 'Berlin, Germany' },
         {
           id: expect.stringMatching(/^place\.[0-9]+$/),
           place_name: 'Berlin, Maryland, United States',
diff --git a/backend/src/schema/resolvers/users/mutedUsers.spec.js b/backend/src/schema/resolvers/users/mutedUsers.spec.js
index 36b526268..d8efacfae 100644
--- a/backend/src/schema/resolvers/users/mutedUsers.spec.js
+++ b/backend/src/schema/resolvers/users/mutedUsers.spec.js
@@ -58,7 +58,7 @@ describe('mutedUsers', () => {
   it('throws permission error', async () => {
     const { query } = createTestClient(server)
     const result = await query({ query: mutedUserQuery })
-    expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+    expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
   })
 
   describe('authenticated and given a muted user', () => {
@@ -116,7 +116,7 @@ describe('muteUser', () => {
 
   it('throws permission error', async () => {
     const result = await muteAction({ id: 'u2' })
-    expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+    expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
   })
 
   describe('authenticated', () => {
@@ -333,7 +333,7 @@ describe('unmuteUser', () => {
 
   it('throws permission error', async () => {
     const result = await unmuteAction({ id: 'u2' })
-    expect(result.errors[0]).toHaveProperty('message', 'Not Authorised!')
+    expect(result.errors[0]).toHaveProperty('message', 'Not Authorized!')
   })
 
   describe('authenticated', () => {
diff --git a/backend/src/schema/types/enum/GroupActionRadius.gql b/backend/src/schema/types/enum/GroupActionRadius.gql
new file mode 100644
index 000000000..221ed7f87
--- /dev/null
+++ b/backend/src/schema/types/enum/GroupActionRadius.gql
@@ -0,0 +1,7 @@
+enum GroupActionRadius {
+  regional
+  national
+  continental
+  global
+  interplanetary
+}
diff --git a/backend/src/schema/types/enum/GroupMemberRole.gql b/backend/src/schema/types/enum/GroupMemberRole.gql
new file mode 100644
index 000000000..dacdd4b52
--- /dev/null
+++ b/backend/src/schema/types/enum/GroupMemberRole.gql
@@ -0,0 +1,6 @@
+enum GroupMemberRole {
+  pending
+  usual
+  admin
+  owner
+}
diff --git a/backend/src/schema/types/enum/GroupType.gql b/backend/src/schema/types/enum/GroupType.gql
new file mode 100644
index 000000000..2cf298474
--- /dev/null
+++ b/backend/src/schema/types/enum/GroupType.gql
@@ -0,0 +1,5 @@
+enum GroupType {
+  public
+  closed
+  hidden
+}
diff --git a/backend/src/schema/types/enum/UserGroup.gql b/backend/src/schema/types/enum/UserRole.gql
similarity index 63%
rename from backend/src/schema/types/enum/UserGroup.gql
rename to backend/src/schema/types/enum/UserRole.gql
index 587e90c71..846afde13 100644
--- a/backend/src/schema/types/enum/UserGroup.gql
+++ b/backend/src/schema/types/enum/UserRole.gql
@@ -1,4 +1,4 @@
-enum UserGroup {
+enum UserRole {
   admin
   moderator
   user
diff --git a/backend/src/schema/types/type/Group.gql b/backend/src/schema/types/type/Group.gql
new file mode 100644
index 000000000..ce90fad1d
--- /dev/null
+++ b/backend/src/schema/types/type/Group.gql
@@ -0,0 +1,135 @@
+enum _GroupOrdering {
+  id_asc
+  id_desc
+  name_asc
+  name_desc
+  slug_asc
+  slug_desc
+  locationName_asc
+  locationName_desc
+  about_asc
+  about_desc
+  createdAt_asc
+  createdAt_desc
+  updatedAt_asc
+  updatedAt_desc
+}
+
+type Group {
+  id: ID!
+  name: String! # title
+  slug: String!
+
+  createdAt: String!
+  updatedAt: String!
+  deleted: Boolean
+  disabled: Boolean
+
+  avatar: Image @relation(name: "AVATAR_IMAGE", direction: "OUT")
+
+  about: String # goal
+  description: String!
+  descriptionExcerpt: String!
+  groupType: GroupType!
+  actionRadius: GroupActionRadius!
+
+  locationName: String
+  location: Location @cypher(statement: "MATCH (this)-[:IS_IN]->(l:Location) RETURN l")
+
+  categories: [Category] @relation(name: "CATEGORIZED", direction: "OUT")
+
+  myRole: GroupMemberRole # if 'null' then the current user is no member
+
+  posts: [Post] @relation(name: "IN", direction: "IN")
+}
+
+
+input _GroupFilter {
+  AND: [_GroupFilter!]
+  OR: [_GroupFilter!]
+  name_contains: String
+  slug_contains: String
+  about_contains: String
+  description_contains: String
+  groupType_in: [GroupType!]
+  actionRadius_in: [GroupActionRadius!]
+  myRole_in: [GroupMemberRole!]
+  id: ID
+  id_not: ID
+  id_in: [ID!]
+  id_not_in: [ID!]
+}
+
+type Query {
+  Group(
+    isMember: Boolean # if 'undefined' or 'null' then get all groups
+    id: ID
+    slug: String
+    first: Int
+    offset: Int
+    # orderBy: [_GroupOrdering] # not implemented yet
+    # filter: _GroupFilter # not implemented yet
+  ): [Group]
+
+  GroupMembers(
+    id: ID!
+    # first: Int # not implemented yet
+    # offset: Int # not implemented yet
+    # orderBy: [_UserOrdering] # not implemented yet
+    # filter: _UserFilter # not implemented yet
+  ): [User]
+
+  GroupCount(isMember: Boolean): Int
+  
+  # AvailableGroupTypes: [GroupType]!
+
+  # AvailableGroupActionRadii: [GroupActionRadius]!
+
+  # AvailableGroupMemberRoles: [GroupMemberRole]!
+}
+
+type Mutation {
+  CreateGroup(
+    id: ID
+    name: String!
+    slug: String
+    about: String
+    description: String!
+    groupType: GroupType!
+    actionRadius: GroupActionRadius!
+    categoryIds: [ID]
+    # avatar: ImageInput # a group can not be created with an avatar
+    locationName: String # empty string '' sets it to null
+  ): Group
+
+  UpdateGroup(
+    id: ID!
+    name: String
+    slug: String
+    about: String
+    description: String
+    # groupType: GroupType # is not possible at the moment and has to be discussed. may be in the stronger direction: public → closed → hidden
+    actionRadius: GroupActionRadius
+    categoryIds: [ID]
+    avatar: ImageInput # test this as result
+    locationName: String # empty string '' sets it to null
+  ): Group
+
+  # DeleteGroup(id: ID!): Group
+
+  JoinGroup(
+    groupId: ID!
+    userId: ID!
+  ): User
+
+  LeaveGroup(
+    groupId: ID!
+    userId: ID!
+  ): User
+
+  ChangeGroupMemberRole(
+    groupId: ID!
+    userId: ID!
+    roleInGroup: GroupMemberRole!
+  ): User
+}
diff --git a/backend/src/schema/types/type/MEMBER_OF.gql b/backend/src/schema/types/type/MEMBER_OF.gql
new file mode 100644
index 000000000..edda989f6
--- /dev/null
+++ b/backend/src/schema/types/type/MEMBER_OF.gql
@@ -0,0 +1,5 @@
+type MEMBER_OF {
+  createdAt: String!
+  updatedAt: String!
+  role: GroupMemberRole!
+}
diff --git a/backend/src/schema/types/type/Post.gql b/backend/src/schema/types/type/Post.gql
index 2f9221dd1..9eac00b0b 100644
--- a/backend/src/schema/types/type/Post.gql
+++ b/backend/src/schema/types/type/Post.gql
@@ -81,6 +81,7 @@ input _PostFilter {
   emotions_none: _PostEMOTEDFilter
   emotions_single: _PostEMOTEDFilter
   emotions_every: _PostEMOTEDFilter
+  group: _GroupFilter
 }
 
 enum _PostOrdering {
@@ -167,6 +168,8 @@ type Post {
   emotions: [EMOTED]
   emotionsCount: Int!
     @cypher(statement: "MATCH (this)<-[emoted:EMOTED]-(:User) RETURN COUNT(DISTINCT emoted)")
+
+  group: Group @relation(name: "IN", direction: "OUT")
 }
 
 input _PostInput {
@@ -184,6 +187,7 @@ type Mutation {
     language: String
     categoryIds: [ID]
     contentExcerpt: String
+    groupId: ID
   ): Post
   UpdatePost(
     id: ID!
@@ -225,18 +229,4 @@ type Query {
   PostsEmotionsCountByEmotion(postId: ID!, data: _EMOTEDInput!): Int!
   PostsEmotionsByCurrentUser(postId: ID!): [String]
   profilePagePosts(filter: _PostFilter, first: Int, offset: Int, orderBy: [_PostOrdering]): [Post]
-  findPosts(query: String!, limit: Int = 10, filter: _PostFilter): [Post]!
-    @cypher(
-      statement: """
-      CALL db.index.fulltext.queryNodes('post_fulltext_search', $query)
-      YIELD node as post, score
-      MATCH (post)<-[:WROTE]-(user:User)
-      WHERE score >= 0.2
-      AND NOT user.deleted = true AND NOT user.disabled = true
-      AND NOT post.deleted = true AND NOT post.disabled = true
-      AND NOT user.id in COALESCE($filter.author_not.id_in, [])
-      RETURN post
-      LIMIT $limit
-      """
-    )
 }
diff --git a/backend/src/schema/types/type/Search.gql b/backend/src/schema/types/type/Search.gql
index 9537b5a84..5cb68e22d 100644
--- a/backend/src/schema/types/type/Search.gql
+++ b/backend/src/schema/types/type/Search.gql
@@ -1,4 +1,4 @@
-union SearchResult = Post | User | Tag
+union SearchResult = Post | User | Tag | Group
 
 type postSearchResults {
   postCount: Int
@@ -15,9 +15,15 @@ type hashtagSearchResults {
   hashtags: [Tag]!
 }
 
+type groupSearchResults {
+  groupCount: Int
+  groups: [Group]!
+}
+
 type Query {
   searchPosts(query: String!, firstPosts: Int, postsOffset: Int): postSearchResults!
   searchUsers(query: String!, firstUsers: Int, usersOffset: Int): userSearchResults!
+  searchGroups(query: String!, firstGroups: Int, groupsOffset: Int): groupSearchResults!
   searchHashtags(query: String!, firstHashtags: Int, hashtagsOffset: Int): hashtagSearchResults!
   searchResults(query: String!, limit: Int = 5): [SearchResult]!
 }
diff --git a/backend/src/schema/types/type/User.gql b/backend/src/schema/types/type/User.gql
index 772dedf6b..fe1ff43f0 100644
--- a/backend/src/schema/types/type/User.gql
+++ b/backend/src/schema/types/type/User.gql
@@ -28,13 +28,13 @@ type User {
   avatar: Image @relation(name: "AVATAR_IMAGE", direction: "OUT")
   deleted: Boolean
   disabled: Boolean
-  role: UserGroup!
+  role: UserRole!
   publicKey: String
   invitedBy: User @relation(name: "INVITED", direction: "IN")
   invited: [User] @relation(name: "INVITED", direction: "OUT")
 
-  location: Location @cypher(statement: "MATCH (this)-[:IS_IN]->(l:Location) RETURN l")
   locationName: String
+  location: Location @cypher(statement: "MATCH (this)-[:IS_IN]->(l:Location) RETURN l")
   about: String
   socialMedia: [SocialMedia]! @relation(name: "OWNED_BY", direction: "IN")
 
@@ -114,6 +114,16 @@ type User {
   badgesCount: Int! @cypher(statement: "MATCH (this)<-[:REWARDED]-(r:Badge) RETURN COUNT(r)")
 
   emotions: [EMOTED]
+
+  activeCategories: [String] @cypher(
+  statement: """
+  MATCH (category:Category)
+  WHERE NOT ((this)-[:NOT_INTERESTED_IN]->(category))
+  RETURN collect(category.id)
+  """
+  )
+
+  myRoleInGroup: GroupMemberRole
 }
 
 
@@ -151,43 +161,31 @@ input _UserFilter {
   followedBy_none: _UserFilter
   followedBy_single: _UserFilter
   followedBy_every: _UserFilter
-  role_in: [UserGroup!]
+  role_in: [UserRole!]
 }
 
 type Query {
   User(
-  id: ID
-  email: String # admins need to search for a user sometimes
-  name: String
-  slug: String
-  role: UserGroup
-  locationName: String
-  about: String
-  createdAt: String
-  updatedAt: String
-  first: Int
-  offset: Int
-  orderBy: [_UserOrdering]
-  filter: _UserFilter
+    id: ID
+    email: String # admins need to search for a user sometimes
+    name: String
+    slug: String
+    role: UserRole
+    locationName: String
+    about: String
+    createdAt: String
+    updatedAt: String
+    first: Int
+    offset: Int
+    orderBy: [_UserOrdering]
+    filter: _UserFilter
   ): [User]
 
-  availableRoles: [UserGroup]! 
+  availableRoles: [UserRole]! 
   mutedUsers: [User]
   blockedUsers: [User]
   isLoggedIn: Boolean!
   currentUser: User
-  findUsers(query: String!,limit: Int = 10, filter: _UserFilter): [User]!
-    @cypher(
-      statement: """
-      CALL db.index.fulltext.queryNodes('user_fulltext_search', $query)
-      YIELD node as post, score
-      MATCH (user)
-      WHERE score >= 0.2
-      AND NOT user.deleted = true AND NOT user.disabled = true
-      RETURN user
-      LIMIT $limit
-        """
-    )
 }
 
 enum Deletable {
@@ -197,19 +195,19 @@ enum Deletable {
 
 type Mutation {
   UpdateUser (
-  id: ID!
-  name: String
-  email: String
-  slug: String
-  avatar: ImageInput
-  locationName: String
-  about: String
-  termsAndConditionsAgreedVersion: String
-  termsAndConditionsAgreedAt: String
-  allowEmbedIframes: Boolean
-  showShoutsPublicly: Boolean
-  sendNotificationEmails: Boolean
-  locale: String
+    id: ID!
+    name: String
+    email: String
+    slug: String
+    avatar: ImageInput
+    locationName: String # empty string '' sets it to null
+    about: String
+    termsAndConditionsAgreedVersion: String
+    termsAndConditionsAgreedAt: String
+    allowEmbedIframes: Boolean
+    showShoutsPublicly: Boolean
+    sendNotificationEmails: Boolean
+    locale: String
   ): User
 
   DeleteUser(id: ID!, resource: [Deletable]): User
@@ -219,5 +217,7 @@ type Mutation {
   blockUser(id: ID!): User
   unblockUser(id: ID!): User
 
-  switchUserRole(role: UserGroup!, id: ID!): User
+  switchUserRole(role: UserRole!, id: ID!): User
+
+  saveCategorySettings(activeCategories: [String]): Boolean
 }
diff --git a/backend/yarn.lock b/backend/yarn.lock
index 24bd00b3a..8283660d5 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -997,9 +997,9 @@
     tslib "1.11.1"
 
 "@hapi/address@2.x.x":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.2.tgz#1c794cd6dbf2354d1eb1ef10e0303f573e1c7222"
-  integrity sha512-O4QDrx+JoGKZc6aN64L04vqa7e41tIiLU+OvKdcYaEMP97UttL0f9GIi9/0A4WAMx0uBd6SidDIhktZhgOcN8Q==
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
+  integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
 
 "@hapi/address@^4.0.1":
   version "4.0.1"
@@ -1018,10 +1018,10 @@
   resolved "https://registry.yarnpkg.com/@hapi/formula/-/formula-2.0.0.tgz#edade0619ed58c8e4f164f233cda70211e787128"
   integrity sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==
 
-"@hapi/hoek@8.x.x":
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.2.4.tgz#684a14f4ca35d46f44abc87dfc696e5e4fe8a020"
-  integrity sha512-Ze5SDNt325yZvNO7s5C4fXDscjJ6dcqLFXJQ/M7dZRQCewuDj2iDUuBi6jLQt+APbW9RjjVEvLr35FXuOEqjow==
+"@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
+  integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
 
 "@hapi/hoek@^9.0.0":
   version "9.0.0"
@@ -1055,11 +1055,11 @@
   integrity sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==
 
 "@hapi/topo@3.x.x":
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.3.tgz#c7a02e0d936596d29f184e6d7fdc07e8b5efce11"
-  integrity sha512-JmS9/vQK6dcUYn7wc2YZTqzIKubAQcJKu2KCKAru6es482U5RT5fP1EXCPtlXpiK7PR0On/kpQKI4fRKkzpZBQ==
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
+  integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
   dependencies:
-    "@hapi/hoek" "8.x.x"
+    "@hapi/hoek" "^8.3.0"
 
 "@hapi/topo@^5.0.0":
   version "5.0.0"
@@ -2681,6 +2681,11 @@ base64-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
   integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
 
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
@@ -2850,6 +2855,14 @@ buffer@4.9.1:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
 busboy@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.3.1.tgz#170899274c5bf38aae27d5c62b71268cd585fd1b"
@@ -3929,7 +3942,7 @@ dot-prop@^4.1.0:
 dotenv@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
-  integrity sha1-hk7xN5rO1Vzm+V3r7NzhefegzR0=
+  integrity sha512-XcaMACOr3JMVcEv0Y/iUM2XaOsATRZ3U1In41/1jjK6vJZ2PZbQ1bzCG8uvaByfaBpl9gqc9QWJovpUGBXLLYQ==
 
 dotenv@^6.1.0:
   version "6.2.0"
@@ -4253,10 +4266,10 @@ eslint-plugin-node@~11.1.0:
     resolve "^1.10.1"
     semver "^6.1.0"
 
-eslint-plugin-prettier@~3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.2.tgz#432e5a667666ab84ce72f945c72f77d996a5c9ba"
-  integrity sha512-GlolCC9y3XZfv3RQfwGew7NnuFDKsfI4lbvRK+PIIo23SFH+LemGs4cKwzAaRa+Mdb+lQO/STaIayno8T5sJJA==
+eslint-plugin-prettier@~3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz#e9ddb200efb6f3d05ffe83b1665a716af4a387e5"
+  integrity sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
@@ -5516,6 +5529,11 @@ ieee754@1.1.13, ieee754@^1.1.4:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
   integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
 
+ieee754@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
 ienoopen@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ienoopen/-/ienoopen-1.1.0.tgz#411e5d530c982287dbdc3bb31e7a9c9e32630974"
@@ -7528,18 +7546,19 @@ negotiator@0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-neo4j-driver-bolt-connection@^4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/neo4j-driver-bolt-connection/-/neo4j-driver-bolt-connection-4.3.4.tgz#de642bb6a62ffc6ae2e280dccf21395b4d1705a2"
-  integrity sha512-yxbvwGav+N7EYjcEAINqL6D3CZV+ee2qLInpAhx+iNurwbl3zqtBGiVP79SZ+7tU++y3Q1fW5ofikH06yc+LqQ==
+neo4j-driver-bolt-connection@^4.4.7:
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/neo4j-driver-bolt-connection/-/neo4j-driver-bolt-connection-4.4.7.tgz#0582d54de1f213e60c374209193d1f645ba523ea"
+  integrity sha512-6Q4hCtvWE6gzN64N09UqZqf/3rDl7FUWZZXiVQL0ZRbaMkJpZNC2NmrDIgGXYE05XEEbRBexf2tVv5OTYZYrow==
   dependencies:
-    neo4j-driver-core "^4.3.4"
-    text-encoding-utf-8 "^1.0.2"
+    buffer "^6.0.3"
+    neo4j-driver-core "^4.4.7"
+    string_decoder "^1.3.0"
 
-neo4j-driver-core@^4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/neo4j-driver-core/-/neo4j-driver-core-4.3.4.tgz#b445a4fbf94dce8441075099bd6ac3133c1cf5ee"
-  integrity sha512-3tn3j6IRUNlpXeehZ9Xv7dLTZPB4a7APaoJ+xhQyMmYQO3ujDM4RFHc0pZcG+GokmaltT5pUCIPTDYx6ODdhcA==
+neo4j-driver-core@^4.4.7:
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/neo4j-driver-core/-/neo4j-driver-core-4.4.7.tgz#d2475e107b3fea2b9d1c36b0c273da5c5a291c37"
+  integrity sha512-NhvVuQYgG7eO/vXxRaoJfkWUNkjvIpmCIS9UWU9Bbhb4V+wCOyX/MVOXqD0Yizhs4eyIkD7x90OXb79q+vi+oA==
 
 neo4j-driver@^4.0.1, neo4j-driver@^4.0.2:
   version "4.0.2"
@@ -7552,13 +7571,13 @@ neo4j-driver@^4.0.1, neo4j-driver@^4.0.2:
     uri-js "^4.2.2"
 
 neo4j-driver@^4.2.2:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/neo4j-driver/-/neo4j-driver-4.3.4.tgz#a54f0562f868ee94dff7509df74e3eb2c1f95a85"
-  integrity sha512-AGrsFFqnoZv4KhJdmKt4mOBV5mnxmV3+/t8KJTOM68jQuEWoy+RlmAaRRaCSU4eY586OFN/R8lg9MrJpZdSFjw==
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/neo4j-driver/-/neo4j-driver-4.4.7.tgz#51b3fb48241e66eb3be94e90032cc494c44e59f3"
+  integrity sha512-N7GddPhp12gVJe4eB84u5ik5SmrtRv8nH3rK47Qy7IUKnJkVEos/F1QjOJN6zt1jLnDXwDcGzCKK8XklYpzogw==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    neo4j-driver-bolt-connection "^4.3.4"
-    neo4j-driver-core "^4.3.4"
+    neo4j-driver-bolt-connection "^4.4.7"
+    neo4j-driver-core "^4.4.7"
     rxjs "^6.6.3"
 
 neo4j-graphql-js@^2.11.5:
@@ -7574,10 +7593,10 @@ neo4j-graphql-js@^2.11.5:
     lodash "^4.17.15"
     neo4j-driver "^4.0.1"
 
-neode@^0.4.7:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.7.tgz#033007b57a2ee167e9ee5537493086db08d005eb"
-  integrity sha512-YXlc187JRpeKCBcUIkY6nimXXG+Tvlopfe71/FPno2THrwmYt5mm0RPHZ+mXF2O1Xg6zvjKvOpCpDz2vHBfroQ==
+neode@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.8.tgz#0889b4fc7f1bf0b470b01fa5b8870373b5d47ad6"
+  integrity sha512-pb91NfCOg4Fj5o+98H+S2XYC+ByQfbdhwcc1UVuzuUQ0Ezzj+jWz8NmKWU8ZfCH6l4plk71yDAPd2eTwpt+Xvg==
   dependencies:
     "@hapi/joi" "^15.1.1"
     dotenv "^4.0.0"
@@ -9262,10 +9281,10 @@ slug@^0.9.2:
   dependencies:
     unicode ">= 0.3.1"
 
-slug@~4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/slug/-/slug-4.0.2.tgz#35a62b4e71582778ac08bb30a1bf439fd0a43ea7"
-  integrity sha512-c5XbWkwxHU13gAdSvBHQgnGy2sxv/REMz0ugcM0SOSBCO/N4wfU0TDBC3pgdOwVGjZwGnLBTRljXzdVYE+KYNw==
+slug@~6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/slug/-/slug-6.0.0.tgz#39637b32e5a873bc692812a630842880499ed6c9"
+  integrity sha512-0MpNLyCSUSf0G1nAZmp9gY1cvesPP35a1Live25vZ23gWQ5SAopF0N+0hk9KI4ytNuTebJrHGNrgTnxboofcSg==
 
 smart-buffer@^4.1.0:
   version "4.1.0"
@@ -9603,7 +9622,7 @@ string.prototype.trimstart@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
-string_decoder@^1.1.1:
+string_decoder@^1.1.1, string_decoder@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
   integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
diff --git a/cypress/integration/Moderation.ReportContent/I_click_on_the_author.js b/cypress/integration/Moderation.ReportContent/I_click_on_the_author.js
index 3a6600ff6..fad21e1a6 100644
--- a/cypress/integration/Moderation.ReportContent/I_click_on_the_author.js
+++ b/cypress/integration/Moderation.ReportContent/I_click_on_the_author.js
@@ -1,7 +1,7 @@
 import { When } from "cypress-cucumber-preprocessor/steps";
 
 When('I click on the author', () => {
-  cy.get('.user-teaser')
+  cy.get('[data-test="avatarUserLink"]')
     .click()
     .url().should('include', '/profile/')
 })
\ No newline at end of file
diff --git a/cypress/integration/Post.Comment/I_should_see_my_comment.js b/cypress/integration/Post.Comment/I_should_see_my_comment.js
index 356593f9c..8d439b112 100644
--- a/cypress/integration/Post.Comment/I_should_see_my_comment.js
+++ b/cypress/integration/Post.Comment/I_should_see_my_comment.js
@@ -5,7 +5,7 @@ Then("I should see my comment", () => {
     .should("contain", "Ocelot.social rocks")
     .get(".user-teaser span.slug")
     .should("contain", "@peter-pan") // specific enough
-    .get(".user-avatar img")
+    .get(".profile-avatar img")
     .should("have.attr", "src")
     .and("contain", 'https://') // some url
     .get(".user-teaser > .info > .text")
diff --git a/cypress/integration/UserProfile.Avatar/I_cannot_upload_a_picture.js b/cypress/integration/UserProfile.Avatar/I_cannot_upload_a_picture.js
index d20a181f2..8b501f3f5 100644
--- a/cypress/integration/UserProfile.Avatar/I_cannot_upload_a_picture.js
+++ b/cypress/integration/UserProfile.Avatar/I_cannot_upload_a_picture.js
@@ -4,5 +4,5 @@ Then("I cannot upload a picture", () => {
   cy.get(".base-card")
     .children()
     .should("not.have.id", "customdropzone")
-    .should("have.class", "user-avatar");
+    .should("have.class", "profile-avatar");
 });
\ No newline at end of file
diff --git a/cypress/integration/UserProfile.Avatar/I_should_be_able_to_change_my_profile_picture.js b/cypress/integration/UserProfile.Avatar/I_should_be_able_to_change_my_profile_picture.js
index f92789ef8..366fd8292 100644
--- a/cypress/integration/UserProfile.Avatar/I_should_be_able_to_change_my_profile_picture.js
+++ b/cypress/integration/UserProfile.Avatar/I_should_be_able_to_change_my_profile_picture.js
@@ -9,7 +9,7 @@ Then("I should be able to change my profile picture", () => {
       { subjectType: "drag-n-drop", force: true }
     );
   });
-  cy.get(".profile-avatar img")
+  cy.get(".profile-page-avatar img")
     .should("have.attr", "src")
     .and("contains", "onourjourney");
   cy.contains(".iziToast-message", "Upload successful")
diff --git a/docker-compose.apple-m1.override.yml b/docker-compose.apple-m1.override.yml
new file mode 100644
index 000000000..cbb041c51
--- /dev/null
+++ b/docker-compose.apple-m1.override.yml
@@ -0,0 +1,34 @@
+version: "3.4"
+
+services:
+
+  ########################################################
+  # WEBAPP ###############################################
+  ########################################################
+  webapp:
+    platform: linux/amd64
+
+  ########################################################
+  # BACKEND ##############################################
+  ########################################################
+  backend:
+    platform: linux/amd64
+
+  ########################################################
+  # MAINTENANCE ##########################################
+  ########################################################
+  maintenance:
+    platform: linux/amd64
+
+  ########################################################
+  # NEO4J ################################################
+  ########################################################
+  neo4j:
+    platform: linux/amd64
+
+  ########################################################
+  # MAILSERVER TO FAKE SMTP ##############################
+  ########################################################
+  # commented out, because otherwise override of production would error. and it seems unnecessary
+  # mailserver:
+  #   platform: linux/amd64
diff --git a/docker-compose.maintenance.yml b/docker-compose.maintenance.yml
index 56da9be52..831bb3f4a 100644
--- a/docker-compose.maintenance.yml
+++ b/docker-compose.maintenance.yml
@@ -1,3 +1,5 @@
+# Todo: !!! This file seems related to our old maintenance worker for MongoDB and has to be refactored in case of using it !!!
+
 version: "3.4"
 
 services:
diff --git a/docker-compose.override.yml b/docker-compose.override.yml
index 15cf00e7a..d8a3edc06 100644
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@@ -1,11 +1,13 @@
 version: "3.4"
 
 services:
+
   ########################################################
   # WEBAPP ###############################################
   ########################################################
   webapp:
-    image: ocelotsocialnetwork/webapp:development
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/webapp:local-development
     build:
       target: development
     environment:
@@ -18,11 +20,13 @@ services:
       - webapp_node_modules:/app/node_modules
       # bind the local folder to the docker to allow live reload
       - ./webapp:/app
+
   ########################################################
   # BACKEND ##############################################
   ########################################################
   backend:
-    image: ocelotsocialnetwork/backend:development
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/backend:local-development
     build:
       target: development
     environment:
@@ -34,22 +38,27 @@ services:
       - backend_node_modules:/app/node_modules
       # bind the local folder to the docker to allow live reload
       - ./backend:/app
+
+  ########################################################
+  # MAINTENANCE ##########################################
+  ########################################################
+  maintenance:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/maintenance:local-development
+
   ########################################################
   # NEO4J ################################################
   ########################################################
   neo4j:
-    image: ocelotsocialnetwork/neo4j:development
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/neo4j-community:local-development
     ports:
       # Also expose the neo4j query browser
       - 7474:7474
     networks:
       # So we can access the neo4j query browser from our host machine
       - external-net
-  ########################################################
-  # MAINTENANCE ##########################################
-  ########################################################
-  maintenance:
-    image: ocelotsocialnetwork/maintenance:development
+
   ########################################################
   # MAILSERVER TO FAKE SMTP ##############################
   ########################################################
diff --git a/docker-compose.test.yml b/docker-compose.test.yml
index 973cf87cf..fa858f28c 100644
--- a/docker-compose.test.yml
+++ b/docker-compose.test.yml
@@ -1,10 +1,12 @@
 version: "3.4"
 
 services:
+
   ########################################################
   # WEBAPP ###############################################
   ########################################################
   webapp:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
     image: ocelotsocialnetwork/webapp:test
     build:
       target: test
@@ -12,10 +14,12 @@ services:
       - NODE_ENV="test"
     volumes:
       - ./coverage:/app/coverage 
+
   ########################################################
   # BACKEND ##############################################
   ########################################################
   backend:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
     image: ocelotsocialnetwork/backend:test
     build:
       target: test
@@ -23,11 +27,20 @@ services:
       - NODE_ENV="test"
     volumes:
       - ./coverage:/app/coverage 
+
+  ########################################################
+  # MAINTENANCE ##########################################
+  ########################################################
+  maintenance:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/maintenance:test
+
   ########################################################
   # NEO4J ################################################
   ########################################################
   neo4j:
-    image: ocelotsocialnetwork/neo4j:community
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/neo4j-community:test
     #environment:
     #  - NEO4J_dbms_connector_bolt_enabled=true
     #  - NEO4J_dbms_connector_bolt_tls__level=OPTIONAL
@@ -39,11 +52,7 @@ services:
     networks:
       # So we can access the neo4j query browser from our host machine
       - external-net
-  ########################################################
-  # MAINTENANCE ##########################################
-  ########################################################
-  maintenance:
-    image: ocelotsocialnetwork/maintenance:test
+
   ########################################################
   # MAILSERVER TO FAKE SMTP ##############################
   ########################################################
diff --git a/docker-compose.yml b/docker-compose.yml
index d20bb6aec..154a8fd4c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -6,11 +6,13 @@
 version: "3.4"
 
 services:
+
   ########################################################
   # WEBAPP ###############################################
   ########################################################
   webapp:
-    image: ocelotsocialnetwork/webapp:latest
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/webapp:local-production
     build:
       context: ./webapp
       target: production
@@ -35,11 +37,13 @@ services:
       - GRAPHQL_URI=http://backend:4000
     env_file:
       - ./webapp/.env
+
   ########################################################
   # BACKEND ##############################################
   ########################################################
   backend:
-    image: ocelotsocialnetwork/backend:latest
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/backend:local-production
     build:
       context: ./backend
       target: production
@@ -67,11 +71,28 @@ services:
       - CLIENT_URI=http://webapp:3000
     env_file:
       - ./backend/.env
+
+  ########################################################
+  # MAINTENANCE ##########################################
+  ########################################################
+  maintenance:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/maintenance:local-production
+    build:
+      # TODO: Separate from webapp, this must be independent
+      context: ./webapp
+      dockerfile: Dockerfile.maintenance
+    networks:
+      - external-net
+    ports:
+      - 3001:80
+
   ########################################################
   # NEO4J ################################################
   ########################################################
   neo4j:
-    image: ocelotsocialnetwork/neo4j:latest
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/neo4j-community:local-production
     build:
       context: ./neo4j
       # community edition 👆🏼, because we have no enterprise licence 👇🏼 at the moment
@@ -90,19 +111,6 @@ services:
       # TODO: clarify if that is the only thing needed to unlock the Enterprise version
       # - NEO4J_ACCEPT_LICENSE_AGREEMENT=yes
       # TODO: Remove the playground from production
-  ########################################################
-  # MAINTENANCE ##########################################
-  ########################################################
-  maintenance:
-    image: ocelotsocialnetwork/maintenance:latest
-    build:
-      # TODO: Separate from webapp, this must be independent
-      context: ./webapp
-      dockerfile: Dockerfile.maintenance
-    networks:
-      - external-net
-    ports:
-      - 5000:80
 
 networks:
   external-net:
diff --git a/neo4j/README.md b/neo4j/README.md
index a4242b512..f2b26d551 100644
--- a/neo4j/README.md
+++ b/neo4j/README.md
@@ -7,7 +7,7 @@ database available. The community edition of Neo4J is Free and Open Source and
 we try our best to keep our application compatible with the community edition
 only.
 
-## Installation with Docker
+## Installation With Docker
 
 Run:
 
@@ -19,7 +19,7 @@ You can access Neo4J through [http://localhost:7474/](http://localhost:7474/)
 for an interactive cypher shell and a visualization of the graph.
 
 
-## Installation without Docker
+## Installation Without Docker
 
 Install the community edition of [Neo4j](https://neo4j.com/) along with the plugin
 [Apoc](https://github.com/neo4j-contrib/neo4j-apoc-procedures) on your system.
@@ -51,3 +51,81 @@ in `backend/.env`.
 
 Start Neo4J and confirm the database is running at [http://localhost:7474](http://localhost:7474).
 
+## Commands
+
+Here we describe some rarely used Cypher commands for Neo4j that are needed from time to time:
+
+### Index And Contraint Commands
+
+If indexes or constraints are missing or not set correctly, the browser search will not work or the database seed for development will not work.
+
+The indexes and constraints of our database are set in `backend/src/db/migrate/store.js`.
+This is where the magic happens.
+
+It's called by our `prod:migrate init` command.
+This command initializes the Admin user and creates all necessary indexes and constraints in the Neo4j database.
+
+***Calls in development***
+
+Locally without Docker:
+
+```bash
+# in backend folder
+$ yarn prod:migrate init
+```
+
+Locally with Docker:
+
+```bash
+# in main folder
+$ docker compose exec backend yarn prod:migrate init
+```
+
+***Calls in production***
+
+Locally with Docker:
+
+```bash
+# in main folder
+$ docker compose exec backend /bin/sh -c "yarn prod:migrate init"
+```
+
+On a server with Kubernetes cluster:
+
+```bash
+# tested for one backend replica
+# !!! be aware of the kubectl context !!!
+$ kubectl -n default exec -it $(kubectl -n default get pods | grep ocelot-backend | awk '{ print $1 }') -- /bin/sh -c "yarn prod:migrate init"
+```
+
+***Cypher commands to show indexes and contraints***
+
+```bash
+# in browser command line or cypher shell
+
+# show all indexes and contraints
+$ :schema
+
+# show all indexes
+$ CALL db.indexes();
+
+# show all contraints
+$ CALL db.constraints();
+```
+
+***Cypher commands to create and drop indexes and contraints***
+
+```bash
+# in browser command line or cypher shell
+
+# create indexes
+$ CALL db.index.fulltext.createNodeIndex("post_fulltext_search",["Post"],["title", "content"]);
+$ CALL db.index.fulltext.createNodeIndex("user_fulltext_search",["User"],["name", "slug"]);
+$ CALL db.index.fulltext.createNodeIndex("tag_fulltext_search",["Tag"],["id"]);
+
+# drop an index
+$ DROP CONSTRAINT ON ( image:Image ) ASSERT image.url IS UNIQUE
+
+# drop all indexes and contraints
+$ CALL apoc.schema.assert({},{},true) YIELD label, key RETURN * ;
+```
diff --git a/package.json b/package.json
index 9b0e27d95..f7b97c4a1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social",
-  "version": "1.0.7",
+  "version": "2.2.0",
   "description": "Free and open source software program code available to run social networks.",
   "author": "ocelot.social Community",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.12.7",
     "@babel/register": "^7.12.10",
+    "@faker-js/faker": "5.1.0",
     "auto-changelog": "^2.3.0",
     "bcryptjs": "^2.4.3",
     "codecov": "^3.8.2",
@@ -36,16 +37,15 @@
     "date-fns": "^2.25.0",
     "dotenv": "^8.2.0",
     "expect": "^25.3.0",
-    "@faker-js/faker": "5.1.0",
     "graphql-request": "^2.0.0",
     "import": "^0.0.6",
     "jsonwebtoken": "^8.5.1",
     "mock-socket": "^9.0.3",
     "neo4j-driver": "^4.3.4",
-    "neode": "^0.4.7",
+    "neode": "^0.4.8",
     "npm-run-all": "^4.1.5",
     "rosie": "^2.1.0",
-    "slug": "^5.1.0"
+    "slug": "^6.0.0"
   },
   "resolutions": {
     "set-value": "^2.0.1"
diff --git a/webapp/.env.template b/webapp/.env.template
index 7373255a9..9776fcea2 100644
--- a/webapp/.env.template
+++ b/webapp/.env.template
@@ -4,3 +4,4 @@ PUBLIC_REGISTRATION=false
 INVITE_REGISTRATION=true
 WEBSOCKETS_URI=ws://localhost:3000/api/graphql
 GRAPHQL_URI=http://localhost:4000/
+CATEGORIES_ACTIVE=false
diff --git a/webapp/Dockerfile b/webapp/Dockerfile
index 8d830a9d5..a086a4b2a 100644
--- a/webapp/Dockerfile
+++ b/webapp/Dockerfile
@@ -94,6 +94,13 @@ FROM base as production
 COPY --from=build ${DOCKER_WORKDIR}/.nuxt ./.nuxt
 COPY --from=build ${DOCKER_WORKDIR}/node_modules ./node_modules
 COPY --from=build ${DOCKER_WORKDIR}/nuxt.config.js ./nuxt.config.js
+# Copy static files
+# TODO - this seems not be needed anymore for the new rebranding
+# TODO - this should be one Folder containign all stuff needed to be copied
+COPY --from=build ${DOCKER_WORKDIR}/config/ ./config/
+COPY --from=build ${DOCKER_WORKDIR}/constants ./constants
+COPY --from=build ${DOCKER_WORKDIR}/static ./static
+COPY --from=build ${DOCKER_WORKDIR}/locales ./locales
 # Copy package.json for script definitions (lock file should not be needed)
 COPY --from=build ${DOCKER_WORKDIR}/package.json ./package.json
 
diff --git a/webapp/assets/_new/icons/svgs/child.svg b/webapp/assets/_new/icons/svgs/child.svg
new file mode 100644
index 000000000..fcb5651f0
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/child.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>child</title>
+<path d="M12 3c2.202 0 3.791 1.007 4.531 2.313 0.026-0.041 0.034-0.084 0.063-0.125 0.453-0.641 1.315-1.188 2.406-1.188v2c-0.453 0-0.588 0.111-0.719 0.281 3.845 0.921 6.812 4.105 7.563 8.063 1.193 0.397 2.156 1.337 2.156 2.656 0 1.365-1.024 2.33-2.281 2.688-0.816 4.701-4.82 8.313-9.719 8.313s-8.903-3.611-9.719-8.313c-1.257-0.357-2.281-1.323-2.281-2.688s1.024-2.33 2.281-2.688c0.741-4.271 4.122-7.637 8.406-8.219-0.39-0.574-1.192-1.094-2.688-1.094v-2zM16 8c-4.093 0-7.461 3.121-7.906 7.125l-0.094 0.875h-1c-0.555 0-1 0.445-1 1s0.445 1 1 1h1l0.094 0.875c0.445 4.004 3.813 7.125 7.906 7.125s7.461-3.121 7.906-7.125l0.094-0.875h1c0.555 0 1-0.445 1-1s-0.445-1-1-1h-0.875l-0.125-0.875c-0.536-4.019-3.907-7.125-8-7.125zM12.5 16c0.828 0 1.5 0.672 1.5 1.5s-0.672 1.5-1.5 1.5-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5zM19.5 16c0.828 0 1.5 0.672 1.5 1.5s-0.672 1.5-1.5 1.5-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/culture.svg b/webapp/assets/_new/icons/svgs/culture.svg
new file mode 100644
index 000000000..d63e38cb4
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/culture.svg
@@ -0,0 +1,20 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M5.9,25.1c-0.3,0.3-0.3,0.8,0,1.1s0.8,0.3,1.1,0c1.7-1.7,4.5-1.7,6.3,0c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2
+		c0.3-0.3,0.3-0.8,0-1.1C12,22.8,8.2,22.8,5.9,25.1z"/>
+	<path d="M24.4,8.7c0.7-0.7,2-0.7,2.7,0C27.2,8.9,27.4,9,27.6,9c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1
+		c-1.3-1.3-3.5-1.3-4.8,0C23,8,23,8.5,23.3,8.7C23.6,9,24.1,9,24.4,8.7z"/>
+	<path d="M16.4,7.7c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0c0.7-0.7,1.9-0.7,2.7,0C20.3,8.9,20.5,9,20.7,9s0.4-0.1,0.5-0.2
+		c0.3-0.3,0.3-0.8,0-1.1C19.9,6.4,17.7,6.4,16.4,7.7z"/>
+	<path d="M31.4,0.8c-0.2-0.1-0.5-0.2-0.7-0.1c-2,0.8-5.1,1.2-8.4,1.2s-6.4-0.4-8.4-1.2c-0.2-0.1-0.5-0.1-0.7,0.1
+		c-0.2,0.1-0.3,0.4-0.3,0.6v9.9c-1,0.1-1.9,0.1-3,0.1c-3.3,0-6.4-0.4-8.4-1.2c-0.2-0.1-0.5-0.1-0.7,0.1c-0.2,0.1-0.3,0.4-0.3,0.6
+		l0,11.5c0,5.2,4.2,9.4,9.4,9.4s9.4-4.2,9.4-9.4V22c0.7,0.3,1.6,0.4,3,0.4c5.2,0,9.4-4.2,9.4-9.4V1.4C31.7,1.2,31.6,0.9,31.4,0.8z
+		 M9.9,30.4c-4.4,0-7.9-3.6-7.9-7.9V12c2.1,0.6,4.9,1,7.9,1c2.7,0,5.2-0.3,7.3-0.8l0.5-0.1c0,1.6,0,2.9,0,4c0,1.3,0,2.4,0.1,3.2v3.2
+		C17.8,26.8,14.2,30.4,9.9,30.4z M30.2,13c0,4.4-3.6,7.9-7.9,7.9c-2.1,0-2.8,0-3-1.7v-2.8c0.9,0.5,1.9,0.8,3,0.8
+		c1.6,0,3.1-0.6,4.2-1.7c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0c-0.8,0.8-2,1.3-3.1,1.3c-1.1,0-2.1-0.4-3-1.2v-3.6
+		c0-0.2-0.1-0.5-0.3-0.6c-0.2-0.1-0.5-0.2-0.7-0.1c-0.4,0.2-0.9,0.3-1.4,0.4l-2.5,0.4V2.5c2.1,0.6,4.9,1,7.9,1c3,0,5.8-0.3,7.9-1V13
+		z"/>
+	<path d="M10.9,17.7c-0.3,0.3-0.3,0.8,0,1.1s0.8,0.3,1.1,0c0.7-0.7,2-0.7,2.7,0c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2
+		c0.3-0.3,0.3-0.8,0-1.1C14.4,16.4,12.2,16.4,10.9,17.7z"/>
+	<path d="M7.7,18.7C7.9,18.9,8.1,19,8.3,19s0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1c-1.3-1.3-3.5-1.3-4.8,0c-0.3,0.3-0.3,0.8,0,1.1
+		s0.8,0.3,1.1,0C5.8,18,7,18,7.7,18.7z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/desktop.svg b/webapp/assets/_new/icons/svgs/desktop.svg
new file mode 100644
index 000000000..ba1ef8431
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/desktop.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>desktop</title>
+<path d="M2 6h28v18h-13v2h5v2h-12v-2h5v-2h-13v-18zM4 8v14h24v-14h-24z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/ellipsis-h.svg b/webapp/assets/_new/icons/svgs/ellipsis-h.svg
new file mode 100644
index 000000000..eb7deeab0
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/ellipsis-h.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>ellipsis-h</title>
+<path d="M6 14c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM16 14c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM26 14c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/energy.svg b/webapp/assets/_new/icons/svgs/energy.svg
new file mode 100644
index 000000000..5035a5586
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/energy.svg
@@ -0,0 +1,14 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+<path d="M27.6,19.7L26.8,19c-3-2.8-4.8-4.4-5.2-4.6c-0.9-0.6-2.9-0.5-3.6-0.4c-0.2-0.5-0.5-0.9-0.9-1.2V2.2
+	c0-1-0.7-1.6-1.3-1.6c-0.6-0.1-1.4,0.4-1.6,1.4c-0.1,0.5-0.3,1.4-0.5,2.4c-0.6,2.9-1,5-1,5.4c-0.1,1.1,1.1,2.8,1.5,3.3
+	c-0.3,0.4-0.5,0.9-0.5,1.4c0,0,0,0,0,0.1c-0.9,0.6-7.3,5-8.7,6c-0.8,0.6-0.9,1.4-0.6,2c0.2,0.4,0.7,0.7,1.2,0.7
+	c0.3,0,0.5-0.1,0.8-0.2c1.5-0.6,6.7-2.9,7.4-3.2c0.2-0.1,0.4-0.3,0.6-0.5l-1.3,11c0,1,2.3,1,2.8,1s2.8,0,2.8-1.1l-1.4-13.5
+	c1.8,1.1,7.2,4.4,8.6,5.2c0.3,0.2,0.7,0.3,0.9,0.3c0.5,0,0.9-0.2,1.1-0.5C28.5,21.4,28.5,20.5,27.6,19.7z M14.8,14.6
+	c0-0.8,0.6-1.2,1.2-1.2c0.6,0,1.2,0.6,1.2,1.2c0,0.8-0.6,1.2-1.2,1.2C15.2,15.8,14.8,15.2,14.8,14.6z M14.8,4.7c0.2-1,0.4-2,0.5-2.5
+	c0.1-0.5,0.3-0.7,0.5-0.6c0.2,0,0.4,0.2,0.4,0.6v10.2c-0.1,0-0.1,0-0.2,0c-0.3,0-0.6,0.1-0.9,0.2c-0.6-0.8-1.4-2-1.3-2.7
+	C13.8,9.5,14.4,6.5,14.8,4.7z M13.5,19.1c-0.6,0.3-5.8,2.6-7.3,3.2c-0.4,0.2-0.7,0.1-0.8-0.1c-0.1-0.2,0-0.4,0.3-0.7
+	c1.3-0.9,6.9-4.8,8.4-5.8c0.2,0.3,0.5,0.6,0.8,0.8C14.6,17.4,13.9,18.8,13.5,19.1z M16,30.4c-0.6,0-1.4-0.1-1.8-0.2l1.6-13.4
+	c0,0,0.1,0,0.1,0c0.1,0,0.3,0,0.4,0l1.4,13.4C17.4,30.3,16.6,30.4,16,30.4z M27.3,21.3c-0.1,0.1-0.4,0.2-0.7,0
+	c-1.5-0.9-7.2-4.4-8.8-5.3c0.2-0.3,0.3-0.6,0.4-0.9c1-0.1,2.5-0.1,3,0.3c0.4,0.2,3.6,3.2,5,4.5l0.8,0.7
+	C27.3,20.8,27.4,21.1,27.3,21.3z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/finance.svg b/webapp/assets/_new/icons/svgs/finance.svg
new file mode 100644
index 000000000..74081bc6a
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/finance.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+	<rect x="8.1" y="13.3" width="1.5" height="1.9"/>
+	<path d="M31.9,17.9L31.9,17.9l0-0.6c-0.2-5.5-4.1-10.3-9.5-11.6c-0.2,0-0.8-0.2-0.8-0.2c-3.1-0.6-6.3-0.5-9.5,0.1
+		c-0.3,0.1-0.6,0.1-0.9,0.2C10.6,5.7,10,5.4,9.7,5.4L9.5,5.3C8.7,5,7.6,4.6,6.8,5.1C6,5.7,6,6.7,6.2,7.3l0.3,1.2
+		C5.1,9.7,4,11.2,3.3,12.8c-0.4,0.8-0.8,0.8-1.2,0.8c-0.1,0-0.2,0-0.3,0H0l0,5.5l0.6,0.1c0,0,1.1,0.2,1.6,1C2.5,20.7,2.7,21,3,22.3
+		c1.1,3.4,3.6,5.3,4.6,5.9l0,3.9H12l2.6-3.4h6.1l1.7,3.4h4.9v-4.6l0.4-0.4c2.5-2.2,3.9-5.2,4.1-8.5l0-0.4
+		C31.9,18.1,31.9,18,31.9,17.9z M26.7,25.9l-0.9,0.9v3.8h-2.5l-1.7-3.4h-7.7l-2.6,3.4H9.1l0-3.2l-0.4-0.2c0,0-3.1-1.7-4.2-5.3
+		c-0.4-1.4-0.6-1.8-1-2.3c-0.5-0.9-1.4-1.3-2-1.5v-2.8l0.6,0c0.5,0,1.8,0,2.6-1.7c0.5-1.2,1.3-2.3,2.2-3.3c0.8-0.8,1.3-1,1.1-1.5
+		l0,0L7.6,7c-0.1-0.2-0.1-0.5,0-0.6c0.2-0.1,1,0.1,1.4,0.3l0.3,0.1c0.3,0.1,0.9,0.4,1.7,0.6l0.2,0.1l0.3-0.1c0.3-0.1,0.7-0.2,1-0.2
+		c3-0.6,5.9-0.6,8.9-0.1c0,0,0.6,0.1,0.8,0.1c4.7,1.1,8.2,5.3,8.4,10.1l0,0.8c-0.1,1.3-1.2,2.4-2.5,2.4c-1,0-1.9-0.9-1.9-2
+		c0-0.8,0.6-1.4,1.4-1.4v-1.5c-1.6,0-2.9,1.3-2.9,2.9c0,1.9,1.5,3.5,3.4,3.5c0.7,0,1.3-0.2,1.8-0.5C29.1,23.2,28.1,24.7,26.7,25.9z"
+		/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/health.svg b/webapp/assets/_new/icons/svgs/health.svg
new file mode 100644
index 000000000..acf50d7c1
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/health.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M26.1,20.7c-2.9,5.1-9.3,8.8-10.8,9.6c-2.1-1.1-13.7-7.8-13.7-16.1c0-3.6,2.8-6.5,6.5-6.5c2.6,0,4.9,1.5,5.9,3.9l0.7,1.7
+		l0.7-1.7c1-2.4,3.3-3.9,5.9-3.9c3.6,0,6.5,2.8,6.5,6.5V15h1.5v-0.8c0-4.5-3.5-8-8-8c-2.7,0-5.2,1.3-6.6,3.5
+		c-1.4-2.2-3.9-3.5-6.6-3.5c-4.5,0-8,3.5-8,8c0,10,14.3,17.3,14.9,17.6l0.3,0.2l0.3-0.2c0.3-0.2,8.3-4.2,11.8-10.4l0.4-0.7L26.5,20
+		L26.1,20.7z"/>
+	<polygon points="22.9,17 19.5,21.2 17,14.5 11.6,19.9 12.6,20.9 16.4,17.2 19,24.2 23.6,18.5 31.9,18.5 31.9,17 	"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/home.svg b/webapp/assets/_new/icons/svgs/home.svg
new file mode 100644
index 000000000..b1a13b06f
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/home.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>home</title>
+<path d="M16 2.594l0.719 0.688 13 13-1.438 1.438-1.281-1.281v11.563h-9v-10h-4v10h-9v-11.563l-1.281 1.281-1.438-1.438 13-13zM16 5.438l-9 9v11.563h5v-10h8v10h5v-11.563z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/lightbulb.svg b/webapp/assets/_new/icons/svgs/lightbulb.svg
new file mode 100644
index 000000000..1c19c81b1
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/lightbulb.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>lightbulb-o</title>
+<path d="M6.813 2.406l2.094 2.094-1.406 1.406-2.094-2.094zM25.188 2.406l1.406 1.406-2.094 2.094-1.406-1.406zM16 3.031c4.934-0.047 9 4.027 9 8.969 0 2.706-1.249 5.062-2.906 6.719-1.238 1.15-2 2.627-2 4.094v1.188h-0.094v4h-2.281c-0.347 0.597-0.982 1-1.719 1s-1.372-0.403-1.719-1h-2.281v-6c-0.203-1.117-0.794-2.212-1.75-3.031-2.233-1.898-3.573-4.845-3.125-8.094 0.561-4.039 3.789-7.316 7.844-7.781 0.011-0.001 0.020 0.001 0.031 0 0.336-0.041 0.671-0.059 1-0.063zM16 5.031c-0.258 0.004-0.518 0.030-0.781 0.063-3.131 0.348-5.687 2.881-6.125 6.031-0.352 2.552 0.702 4.811 2.469 6.313 1.388 1.19 2.124 2.848 2.344 4.563h4.375c0.236-1.792 1.094-3.434 2.438-4.688l-0.031-0.031c1.343-1.343 2.313-3.187 2.313-5.281 0-3.861-3.135-7.024-7-6.969zM2 12h3v2h-3v-2zM27 12h3v2h-3v-2zM7.5 20.094l1.406 1.406-2.094 2.094-1.406-1.406zM24.5 20.094l2.094 2.094-1.406 1.406-2.094-2.094zM14 24v2h4v-2h-4z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/media.svg b/webapp/assets/_new/icons/svgs/media.svg
new file mode 100644
index 000000000..d63c98610
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/media.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M31.7,29.2L29.8,23V7.1c0-1.1-1-2.1-2.1-2.1H4.8c-1.1,0-2.1,1-2.1,2.1V23l-2,6.1c-0.2,0.6-0.1,1.3,0.2,1.9
+		c0.4,0.6,1,0.9,1.7,0.9h27.1c0.7,0,1.3-0.3,1.7-0.9C31.8,30.4,31.9,29.7,31.7,29.2z M4.2,7.1c0-0.3,0.3-0.6,0.6-0.6h22.8
+		c0.3,0,0.6,0.3,0.6,0.6v15.3h-24V7.1z M30.2,30.2c-0.1,0.1-0.2,0.2-0.5,0.2H2.6c-0.3,0-0.4-0.2-0.5-0.2C2.1,30,2,29.8,2.1,29.6
+		L4,23.9h24.4l1.8,5.8C30.4,29.8,30.3,30,30.2,30.2z"/>
+	<rect x="13.5" y="27.8" width="5.6" height="1.5"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/miscellaneous.svg b/webapp/assets/_new/icons/svgs/miscellaneous.svg
new file mode 100644
index 000000000..07f8dbe3f
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/miscellaneous.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M7.5,4.9c0.1-0.1,0.2-0.2,0.3-0.2l0.7-0.6l-1-1.4L6.8,3.1C6.7,3.3,6.6,3.4,6.5,3.5L5.8,4.1l1,1.3L7.5,4.9z"/>
+	<path d="M31.5,19.2c0.2-1,0.3-2.1,0.3-3.2c0-8.6-7-15.8-15.8-15.8c-1.7,0-3.3,0.2-5,0.8l-0.8,0.2l0.6,1.6l0.8-0.2
+		c1.5-0.5,3-0.7,4.5-0.7c3.6,0,6.9,1.4,9.4,3.7C22.7,6,21.3,7.3,21,9.7c-0.2,1.3,0.6,2.4,1.4,3.3c0.3,0.5,1,1.3,0.9,1.5
+		c0,0.2-0.2,0.3-0.6,0.6c-0.8,0.6-2,1.3-1.7,3.6c0.2,1.6,0.9,2.8,2.2,3.1c0.2,0.1,0.6,0.1,0.8,0.1c1,0,2.1-0.6,2.9-1.5
+		c0.8-1,0.8-1,2-0.5c0.2,0.1,0.4,0.2,0.6,0.3c-1.8,5.7-7.1,9.8-13.4,9.8c-1.7,0-3.4-0.3-4.9-0.9l-0.1-0.1c-0.7-1.8,1-4.3,2.9-5.9
+		c2.1-1.8,2.9-4.6,2.1-7.1c-0.5-1.2-1.4-2.1-2.7-2.3C12,13.5,10.6,14,9.7,15c-1,1.3-1.8,2-3,2c-1.3-0.1-3.3-2-4.3-3.1l-0.2-0.3
+		c0.4-2.1,1.2-4,2.4-5.7L5,7.2l-1.4-1L3.1,6.8c-1.8,2.8-2.9,5.9-2.9,9.2c0,8.6,7.1,15.8,15.9,15.8c7.3,0,13.5-5.1,15.2-11.9
+		L31.5,19.2L31.5,19.2z M2,16.1c0,0,0-0.1,0-0.1c1.1,1.1,2.9,2.6,4.5,2.6c2.1,0.1,3.3-1.3,4.5-2.5c0.5-0.6,1.3-0.8,2.1-0.7
+		c0.3,0.1,1,0.3,1.3,1.2c0.6,1.8,0,4-1.5,5.3c-0.9,0.9-3.7,3.6-3.5,6.5C5,26,2,21.3,2,16.1z M29.6,18.4c-1.7-0.9-2.7-1-4.1,0.9
+		c-0.6,0.7-1.3,1-1.8,0.9s-0.8-0.7-0.9-1.6c-0.1-1.3,0.3-1.5,0.9-2c0.5-0.3,1-0.7,1.3-1.5c0.3-1.2-0.5-2.2-1.2-3.1
+		c-0.5-0.7-1.2-1.5-1-2.1c0.1-1,0.3-2.6,4.3-2.7c1.9,2.4,3.1,5.5,3.1,8.8c0,0.8-0.1,1.6-0.2,2.4C29.8,18.4,29.7,18.4,29.6,18.4z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/mobility.svg b/webapp/assets/_new/icons/svgs/mobility.svg
new file mode 100644
index 000000000..9e36ec21e
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/mobility.svg
@@ -0,0 +1,11 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+<path d="M31.8,20c0-6.8-5.6-9.1-8.2-9.1h-3.2c-0.3-1.6-1.7-2.9-3.5-2.9h-2.2v1.1h-3.4v1.5h3.4v2.1h-3.4v1.5h3.4v0.9h2.2
+	c1.7,0,3.1-1.2,3.4-2.7h3.3c1.3,0,6.7,1.3,6.7,7.6c0,6.9-7.2,7.2-7.2,7.2h-0.8h-0.1V28c0,1.3-1.1,2.4-2.5,2.4
+	c-1.4,0-2.5-1.1-2.5-2.4v-0.8H8.6V28c0,1.3-1.1,2.4-2.4,2.4c-1.5,0-2.4-1.2-2.4-2.4v-0.8H1.8v-2.6c0-0.1,0-0.8,0.5-1
+	c0.5-0.1,1.3-0.4,2.2-0.7c0.5-0.2,1.1-0.4,1.2-0.4c0.4,0,0.8-0.3,1.4-1l0.1-0.1c0.1-0.1,0.5-0.7,0.9-1.1c0.8-0.9,1-1.2,1.1-1.4
+	c0.1-0.1,0.5-0.4,1-0.4h8.6c0.6,0,0.8,0.2,1,0.4c0.4,0.5,1.9,2.5,1.9,2.5l1.2-0.9c0,0-1.5-2-1.9-2.5c-0.5-0.7-1.2-1-2.2-1h-8.6
+	c-1,0-2,0.6-2.2,1.1c-0.1,0.1-0.6,0.8-1,1.2c-0.5,0.6-0.8,1-0.9,1.2c-0.2,0.2-0.5,0.4-0.6,0.6c-0.2,0-0.5,0.2-1.5,0.5
+	c-0.7,0.3-1.6,0.6-2,0.7c-1,0.3-1.7,1.2-1.7,2.4v4.1h2.2c0.3,1.8,1.9,3.2,3.8,3.2c1.9,0,3.5-1.4,3.9-3.2h5.7
+	c0.3,1.8,1.9,3.2,3.9,3.2c1.9,0,3.5-1.4,3.9-3.2C26.2,28.5,31.8,26.6,31.8,20z M16.9,13.6h-0.8V9.6h0.8c1.1,0,2.1,0.9,2.1,2
+	S18,13.6,16.9,13.6z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/movement.svg b/webapp/assets/_new/icons/svgs/movement.svg
new file mode 100644
index 000000000..81052875d
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/movement.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M16,9.9c-2.7,0-4.8-2.2-4.8-4.8s2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8S18.6,9.9,16,9.9z M16,1.8c-1.8,0-3.3,1.5-3.3,3.3
+		s1.5,3.3,3.3,3.3c1.8,0,3.3-1.5,3.3-3.3S17.8,1.8,16,1.8z"/>
+	<path d="M19.6,32c-3.3,0-5.4-0.1-6-0.3c-2.6-1.1-2.6-2.5-2.4-3.1c0.5-2,4.1-3.1,8.7-2.6l0.3,0c0.4,0,0.8,0.3,0.8,0.8
+		s-0.3,0.8-0.8,0.8h-0.3c-4.7-0.4-7,0.8-7.1,1.5c-0.1,0.3,0.4,0.9,1.5,1.4c0.8,0.3,7.5,0.2,10.1,0.2c0.7,0,1.3,0,1.7,0
+		c0.6,0,1.3-0.5,1.3-1.3c0-1.6-2-3.1-3.6-4.2c-0.5-0.3-0.9-0.7-1.3-1c-0.2-0.2-0.4-0.4-0.7-0.6c-0.9-0.8-1.9-1.5-2-2.5
+		c-0.1-0.5,0-1.1,0.2-1.8c0.2-0.6,0.3-1.2,0.3-2c0-0.4,0.3-0.7,0.6-0.7c0.4-0.1,0.7,0.1,0.8,0.5c0.9,2.3,1.4,2.7,2.7,3.9
+		c0.6,0.5,1.3,1.1,2.4,2.1c0.5,0.5,1.2,0.5,1.6,0c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.5-0.3-0.8l-2.9-2.8c-1.3-1.2-1.9-2.8-2.5-4
+		c-0.7-1.7-1.1-2.5-2.1-2.5h-9c-0.9,0-1.3,0.7-2.1,2.5c-0.5,1.2-1.2,2.8-2.5,4l-2.9,2.8c-0.2,0.2-0.3,0.5-0.3,0.8
+		c0,0.3,0.1,0.5,0.3,0.8c0.5,0.5,1.2,0.5,1.6,0c0.5-0.5,1-1,1.6-1.5c1.6-1.3,3.2-2.7,3.5-4.4c0.1-0.4,0.4-0.6,0.8-0.6
+		c0.4,0,0.7,0.4,0.7,0.7c0,0.8,0.2,1.4,0.3,2c0.2,0.6,0.3,1.3,0.2,1.9c-0.2,0.9-1.2,1.7-2.1,2.5c-0.2,0.2-0.4,0.3-0.5,0.5
+		c-0.4,0.3-0.8,0.7-1.3,1c-1.6,1.2-3.6,2.7-3.6,4.2c0,0.6,0.5,1.3,1.3,1.3h4c0.4,0,0.8,0.3,0.8,0.8S11.3,32,10.9,32h-4
+		c-1.5,0-2.8-1.3-2.8-2.8c0-2.4,2.3-4.1,4.2-5.5c0.4-0.3,0.9-0.6,1.2-0.9c0.2-0.1,0.3-0.3,0.5-0.5c0.7-0.6,1.5-1.3,1.6-1.7
+		c0.1-0.2,0-0.6-0.1-1c-0.8,1.1-1.9,2-2.9,2.9c-0.6,0.5-1.1,0.9-1.5,1.4c-1.1,1.1-2.7,1.1-3.7,0c-0.5-0.5-0.8-1.2-0.8-1.8
+		s0.3-1.3,0.8-1.8l2.9-2.8c1.1-1,1.6-2.3,2.1-3.5c0.7-1.7,1.4-3.4,3.5-3.4h9c2,0,2.7,1.7,3.5,3.4c0.5,1.2,1.1,2.5,2.1,3.5l2.9,2.8
+		c0.5,0.5,0.8,1.2,0.8,1.8s-0.3,1.3-0.8,1.8c-1.1,1.1-2.7,1-3.7,0c-1-0.9-1.7-1.5-2.3-2c-0.9-0.8-1.5-1.3-2.1-2.3
+		c-0.1,0.4-0.2,0.8-0.2,1c0.1,0.5,0.9,1.1,1.5,1.6c0.2,0.2,0.5,0.4,0.7,0.6c0.3,0.3,0.8,0.6,1.2,0.9c1.9,1.4,4.2,3.1,4.2,5.5
+		c0,1.5-1.3,2.8-2.8,2.8c-0.3,0-0.9,0-1.7,0C22.5,32,20.9,32,19.6,32z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/music.svg b/webapp/assets/_new/icons/svgs/music.svg
new file mode 100644
index 000000000..b84b87800
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/music.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>music</title>
+<path d="M27 3.781v17.219c0 2.197-1.803 4-4 4s-4-1.803-4-4 1.803-4 4-4c0.732 0 1.407 0.214 2 0.563v-7.375l-14 2.625v11.188c0 2.197-1.803 4-4 4s-4-1.803-4-4 1.803-4 4-4c0.732 0 1.407 0.214 2 0.563v-13.406l0.813-0.125 16-3zM25 6.188l-14 2.625v2l14-2.625v-2zM23 19c-1.116 0-2 0.884-2 2s0.884 2 2 2 2-0.884 2-2-0.884-2-2-2zM7 22c-1.116 0-2 0.884-2 2s0.884 2 2 2 2-0.884 2-2-0.884-2-2-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/nature.svg b/webapp/assets/_new/icons/svgs/nature.svg
new file mode 100644
index 000000000..d40250af4
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/nature.svg
@@ -0,0 +1,18 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M31,20.4c-0.4-0.3-1-0.5-1.6-0.5l-0.2-0.4c-0.5-1.4-2.1-1.6-3.6-1.1c-0.2,0.1-0.6,0.3-1,0.6c-0.7-0.8-2-0.9-3.2-0.5
+		c-0.5,0.2-1.8,0.9-2.5,1.3c-2.6-0.5-5.8-1.1-6.5-1.2c-2-0.2-3.3-0.2-4.9,0.3c-0.6,0.2-5.2,2.3-6.1,2.7L0.9,22l0.6,1.4l0.7-0.3
+		c2.5-1.2,5.5-2.5,5.9-2.6c1.4-0.4,2.4-0.4,4.3-0.2c0.9,0.1,8.1,1.5,9.4,1.8c0.9,0.2,0.9,0.7,0.9,0.8c0,0.3-0.1,0.4-0.1,0.4
+		s0,0-0.1,0h-8.6v1.5h2l0.5,0.3c0.1,0,1.4,0.9,2.4,1.3c1,0.4,2,0.4,2.7-0.2c2.6-1.7,6.7-4.4,7-4.6c0.6-0.4,1.4-0.4,1.6-0.2
+		c0.1,0.1,0.2,0.2,0.2,0.3s-0.1,0.2-0.2,0.3c-2.8,2-10.3,7.5-11.2,8c-1.2,0.7-2.8,0.3-3.6,0.1c-1.2-0.4-7.1-2.5-7.6-2.7
+		c-0.7-0.2-2.4-0.6-3.9,0C2.7,28,1,29,0.9,29l-0.7,0.3l0.7,1.3l0.7-0.3c0,0,1.7-0.9,2.8-1.4c0.9-0.4,2.2-0.2,2.6,0
+		c0.5,0.2,6.4,2.3,7.7,2.7c0.5,0.1,1.3,0.3,2.2,0.3c0.8,0,1.7-0.2,2.5-0.3c1.1-0.6,10.9-7.8,11.3-8.1c0.5-0.4,0.8-0.9,0.8-1.5
+		S31.5,20.8,31,20.4z M22,20c0,0,0.7-0.2,1.2-0.1c-0.4,0.3-0.8,0.5-1.1,0.7c0,0,0,0,0,0c-0.2-0.1-0.5-0.1-0.9-0.2
+		C21.6,20.2,21.9,20.1,22,20z M19.3,25.2c-0.2-0.1-0.4-0.2-0.6-0.3h2.1c-0.1,0.1-0.2,0.2-0.3,0.2C20.3,25.3,19.9,25.5,19.3,25.2z
+		 M24.2,22.7c0-0.5-0.2-0.9-0.5-1.2c1.2-0.7,2.4-1.5,2.7-1.6c0,0,1.4-0.4,1.7,0.3l0,0.1c-0.2,0.1-0.3,0.1-0.5,0.2
+		C27.5,20.5,25.8,21.6,24.2,22.7z"/>
+	<path d="M15.9,16c3,0,4.5-1.3,5.3-2.3c1.3,1.4,1.5,3,1.5,3.1l0.1,0.7l1.6-0.1l-0.1-0.7c-0.1-0.1-0.3-2.5-2.5-4.4
+		c0.4-1.6,0.1-3.5-1-4.9c-2.2-2.7-5.4-2.9-8.6-2.8c-2.9,0-4.6,0-6.4-0.9L4.9,3.2L4.7,4.2C4.3,6.3,5.2,9,7.1,11.5
+		C9.4,14.4,12.7,16,15.9,16z M12.3,6.1c3-0.1,5.7,0,7.4,2.2c0.7,0.8,1,2,0.8,3c-2-1.1-4-1.6-5.6-2.1c-1.2-0.3-2.3-0.6-2.7-1
+		l-0.6-0.5l-1,1.1l0.6,0.5c0.7,0.6,1.9,0.9,3.4,1.3c1.6,0.4,3.6,1,5.5,2.1c-0.7,1.2-2.1,1.8-4.1,1.8c-2.8,0-5.6-1.4-7.6-4
+		C7,8.9,6.2,7,6.2,5.5C8,6.1,9.7,6.1,12.3,6.1z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/networking.svg b/webapp/assets/_new/icons/svgs/networking.svg
new file mode 100644
index 000000000..b8d35da69
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/networking.svg
@@ -0,0 +1,22 @@
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+<path d="M31.6,16c-0.6-6.4-1.9-6.4-2.4-6.4c-0.4,0-0.8,0.1-1.1,0.4c-0.8,0.8-0.8,2.5-0.8,4.2c0,0.5,0,1.2,0,1.7h-0.1
+	C26,15.5,25.1,17,24.5,18c-0.1,0.2-0.2,0.4-0.3,0.5c-0.8,0.9-1.2,1.2-2.2,2c-0.4,0.4-1,0.6-1.5,0.9c-0.6,0.3-1.2,0.6-1.8,1.1
+	c-2.3,1.9-1.8,4.1-1.4,6.1c0.2,0.8,0.3,1.5,0.3,2.3v0.8h1.5v-0.8c0-0.9-0.2-1.7-0.4-2.6c-0.4-2.1-0.6-3.4,0.9-4.6
+	c0.4-0.4,1-0.6,1.5-0.9c0.6-0.3,1.2-0.6,1.8-1.1c1-0.8,1.5-1.2,2.4-2.2c0.1-0.1,0.3-0.4,0.4-0.7c0.2-0.3,0.7-1.2,1-1.4
+	c0.3,0.2,0.4,1.3,0.3,1.7c-0.3,1-1.1,1.9-1.9,2.8c-0.7,0.8-1.4,1.6-1.8,2.5L23,25l1.3,0.7l0.3-0.7c0.4-0.7,1-1.4,1.6-2.2
+	c0.9-1,1.8-2.1,2.2-3.3c0.2-0.5,0.2-1.4-0.1-2.2c0.4-0.5,0.4-1.4,0.4-3c0-0.8,0-2.5,0.3-3c0.3,0.5,0.7,1.8,1,4.9
+	c0.2,2,0.2,4.8-1.2,7.1c-0.5,0.9-1.3,1.7-2,2.4c-1.3,1.4-2.7,2.9-3,5.2l-0.1,0.7l1.5,0.2l0.1-0.7c0.2-1.7,1.4-3,2.6-4.3
+	c0.8-0.8,1.5-1.7,2.2-2.7C31.9,21.4,31.9,18.2,31.6,16z"/>
+<path d="M26.3,7.2c0-2.9-2.4-5.2-5.2-5.2c-2.4,0-3.9,1.4-4.5,2c-0.6-0.6-2.1-2-4.5-2C9.3,2,6.9,4.3,6.9,7.1c0,1,0.5,1.9,1,2.4
+	c0.4,0.6,0.8,1,0.8,1l7.4,7.5l0.6,0.6l7.9-7.9C24.6,10.7,26.3,9.2,26.3,7.2z M16.6,16.7l-7-7c0,0-0.4-0.3-0.7-0.8
+	C8.6,8.4,8.3,7.7,8.3,7.2c0-2.1,1.7-3.8,3.8-3.8c2,0,3.9,2,3.9,2L16.6,6l0.5-0.6c0,0,1.9-2,4-2s3.8,1.7,3.8,3.8
+	c0,1.1-1.3,2.5-1.3,2.5L16.6,16.7z"/>
+<path d="M13.4,22.6c-0.6-0.4-1.2-0.8-1.8-1.1c-0.6-0.3-1.1-0.6-1.5-0.9c-1-0.8-1.4-1.2-2.2-2c-0.1-0.1-0.2-0.3-0.3-0.5
+	c-0.6-1-1.5-2.5-2.7-2.1c-0.1,0-0.1,0.1-0.2,0.1c0-0.5,0-1.2,0-1.7c0-1.8,0-3.5-0.8-4.2c-0.3-0.3-0.7-0.4-1-0.4
+	c-0.5,0-1.8,0-2.4,6.4c-0.3,2.2-0.2,5.4,1.4,8.1c0.6,1,1.4,1.9,2.2,2.7c1.3,1.3,2.4,2.6,2.7,4.3L6.9,32l1.5-0.2L8.1,31
+	c-0.3-2.2-1.7-3.7-3.1-5.1c-0.7-0.8-1.5-1.6-2-2.5c-1.4-2.3-1.4-5.2-1.2-7.1c0.3-3.1,0.8-4.5,1-4.9c0.3,0.5,0.3,2.2,0.3,3
+	c0,1.7,0,2.6,0.5,3.1c-0.2,0.8-0.2,1.7-0.1,2.1C4,20.9,4.9,22,5.8,23c0.6,0.7,1.3,1.4,1.6,2.2l0.3,0.7L9,25.2l-0.3-0.7
+	c-0.5-0.9-1.2-1.7-1.8-2.5c-0.8-0.9-1.6-1.8-1.9-2.8c-0.1-0.4,0-1.5,0.3-1.7c0.3,0.2,0.8,1.1,1,1.4s0.3,0.6,0.5,0.7
+	c0.8,0.9,1.4,1.4,2.4,2.2c0.6,0.4,1.2,0.8,1.8,1.1c0.6,0.3,1.1,0.6,1.5,0.9c1.5,1.3,1.3,2.6,0.9,4.6C13.1,29.3,13,30.1,13,31v0.8
+	h1.5V31c0-0.7,0.2-1.5,0.3-2.3C15.2,26.8,15.7,24.5,13.4,22.6z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/peace.svg b/webapp/assets/_new/icons/svgs/peace.svg
new file mode 100644
index 000000000..408601cae
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/peace.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px">
+<path d="M27.3,5c-1.5-1.5-3.1-2.6-5-3.4c-2-0.8-4-1.2-6.2-1.2c-2.1,0-4.2,0.4-6.2,1.2C8,2.4,6.3,3.5,4.9,5c-1.5,1.5-2.6,3.1-3.4,5
+	c-0.8,2-1.2,4-1.2,6.2c0,2.1,0.4,4.2,1.2,6.2c0.8,1.9,1.9,3.6,3.4,5c1.5,1.5,3.1,2.6,5,3.4c2,0.8,4,1.2,6.2,1.2
+	c2.1,0,4.2-0.4,6.2-1.2c1.9-0.8,3.6-1.9,5-3.4c1.5-1.5,2.6-3.1,3.4-5c0.8-2,1.2-4,1.2-6.2c0-2.1-0.4-4.2-1.2-6.2
+	C29.8,8.1,28.7,6.4,27.3,5z M15.1,2.4v13.4L5.4,25c-2-2.4-3.2-5.5-3.2-8.8C2.2,8.9,7.9,2.9,15.1,2.4z M6.8,26.4l8.3-7.9V30
+	C11.9,29.7,9,28.4,6.8,26.4z M17.1,30V18.5l8.3,7.9C23.1,28.4,20.2,29.7,17.1,30z M26.7,25l-9.7-9.2V2.4c7.2,0.5,12.8,6.5,12.8,13.8
+	C29.9,19.5,28.7,22.6,26.7,25z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/politics.svg b/webapp/assets/_new/icons/svgs/politics.svg
new file mode 100644
index 000000000..35322097d
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/politics.svg
@@ -0,0 +1,12 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M19.3,15.4c0.3,0.2,0.9,0.5,1.1,0.8c0.5,0.6,0.6,1.2,0.6,1.3l0.8,3.1l1.4-0.4l-0.8-3c0-0.1-0.2-0.9-0.9-1.8
+		c-0.5-0.6-1.5-1.1-1.6-1.2l-8.5-4.7l-0.7,1.3L19.3,15.4z"/>
+	<path d="M7.4,19.1c0.4,2.2,2.5,4.1,3.4,4.8l0.9-1.2c-1.7-1.4-2.8-2.9-2.9-4.2l0-0.4l-2.3-1.3L11,7.8c0.1-0.2,0.1-0.4,0-0.6
+		c-0.1-0.2-0.2-0.3-0.4-0.4L6.5,4.9L5.9,6.3l3.4,1.6L4.4,17.9l-3.4-1.6l-0.6,1.4l4.1,1.9c0.1,0,0.2,0.1,0.3,0.1
+		c0.3,0,0.5-0.2,0.7-0.4l0.5-1L7.4,19.1z"/>
+	<path d="M28.9,30.5l-2.8-10.1l-5.6,1.5l-1.1-4c-0.1-0.4-0.5-0.6-0.9-0.5c-0.4,0.1-0.6,0.5-0.5,0.9l2.1,7.6c0.2,0.7-0.2,1.4-1,1.6
+		c-0.3,0.1-0.7,0-0.9-0.1c-0.3-0.2-0.5-0.4-0.6-0.8l-1.4-5c-0.1-0.3-0.4-0.5-0.7-0.6c-0.1,0-2.4,0-3.8-3.5c-0.2-0.4-0.6-0.6-1-0.4
+		c-0.4,0.2-0.6,0.6-0.4,1c1.4,3.4,3.6,4.2,4.6,4.4l0.2,0.9l-6.8,1.9l1.2,4.4l1.4-0.4l-0.8-2.9l5.3-1.5l0.6,2.1
+		c0.2,0.7,0.7,1.3,1.3,1.7c0.4,0.2,0.9,0.4,1.3,0.4c0.3,0,0.5,0,0.8-0.1c1.5-0.4,2.3-1.9,1.9-3.4L21,23.4l4.1-1.1l2.2,8.2h-20V32
+		h24.5v-1.5H28.9z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/psyche.svg b/webapp/assets/_new/icons/svgs/psyche.svg
new file mode 100644
index 000000000..8c285d5ca
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/psyche.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+<path class="st0" d="M30.8,12C30.5,7.4,27.9,3.5,24,1.8c-2-0.9-4.3-1.4-6.4-1.4v0.1c0,0,0,0,0,0V0.4c-2,0-3.9,0.4-5.7,1.2
+	c-1.8,0.8-3.4,2-4.7,3.6c0,0,0,0,0,0c-0.1,0.1-2.6,3.3-2.5,8.5l-3.4,6.3C1,20.7,1,21.4,1.4,22c0.3,0.6,1,0.9,1.6,0.9h1.9v2.8
+	c0,1.7,1.4,3.1,3.1,3.1h2.8v1.7c0,0.7,0,1.3,0,1.3l1.4,0v-4.3h-4c-1,0-1.9-0.8-1.9-1.9v-4H3.2c-0.5,0-0.8-0.5-0.6-1L6.2,14
+	c-0.2-5,2.2-8,2.2-8c1.2-1.4,2.6-2.5,4.2-3.2c1.5-0.6,3.2-1,4.8-1c2,0,4,0.4,5.9,1.3c3.7,1.6,5.7,5.3,6,9.2c0.1,2.1-0.3,4.3-1.1,6.2
+	c-0.4,1-0.9,1.9-1.5,2.8c-0.3,0.5-1.8,1.9-1.8,2.4c0,0,0,6,0,6.8l0,1.3c0.2,0,1.5,0,1.5,0s0-0.8,0-1.3c0,0,0-5.4,0-6.6
+	c0.2-0.3,0.6-0.7,0.9-1c0.4-0.4,0.6-0.7,0.8-0.9c0.7-1,1.2-2,1.6-3.1C30.5,16.6,30.9,14.3,30.8,12z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/save.svg b/webapp/assets/_new/icons/svgs/save.svg
new file mode 100644
index 000000000..31c1d8459
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/save.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>save</title>
+<path d="M5 5h17.406l0.313 0.281 4 4 0.281 0.313v17.406h-22v-22zM7 7v18h2v-9h14v9h2v-14.563l-3-3v5.563h-12v-6h-3zM12 7v4h8v-4h-2v2h-2v-2h-4zM11 18v7h10v-7h-10z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/science.svg b/webapp/assets/_new/icons/svgs/science.svg
new file mode 100644
index 000000000..9d3211223
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/science.svg
@@ -0,0 +1,25 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M28.4,16.1c1-1.7,1.9-3.3,2.5-4.9c1.5-4,1.3-7.3-0.6-9.2C27.5-0.8,22,0.1,16.1,3.7C10.3,0.1,4.7-0.8,2,1.9
+		c-2.8,2.8-1.9,8.3,1.8,14.1c-3.3,5.3-4.4,10.4-2.5,13.4C1.5,29.7,1.7,30,2,30.2c1.1,1.1,2.6,1.6,4.4,1.6c1.4,0,3-0.3,4.8-1
+		c1.6-0.6,3.2-1.4,4.9-2.5c2.6,1.6,5.1,2.7,7.4,3.2c0,0,0.1,0,0.1,0c0.3,0.1,0.7,0.1,1,0.2c0.1,0,0.1,0,0.2,0c0.4,0,0.7,0.1,1,0.1
+		c0,0,0,0,0,0c0,0,0,0,0,0c0.3,0,0.5,0,0.8-0.1c0.2,0,0.4,0,0.5,0c0.3,0,0.6-0.1,0.9-0.2c0.1,0,0.2,0,0.3-0.1
+		c0.3-0.1,0.5-0.2,0.8-0.4c0.1,0,0.2-0.1,0.3-0.1c0.3-0.2,0.6-0.4,0.9-0.7c1.9-1.9,2.1-5.2,0.6-9.2C30.3,19.4,29.5,17.7,28.4,16.1z
+		 M29.5,21.5c1.3,3.4,1.1,6.2-0.3,7.6c-0.2,0.2-0.4,0.3-0.6,0.5c-0.2,0.1-0.4,0.2-0.6,0.3c0,0-0.1,0-0.1,0.1
+		c-0.3,0.1-0.5,0.2-0.8,0.2c0,0,0,0,0,0c-0.3,0.1-0.6,0.1-0.9,0.1c0,0,0,0,0,0c-0.3,0-0.6,0-0.8,0c-0.1,0-0.1,0-0.2,0
+		c-0.2,0-0.5-0.1-0.7-0.1c-0.2,0-0.3,0-0.5-0.1c-0.1,0-0.3-0.1-0.4-0.1c-0.3-0.1-0.6-0.1-0.9-0.2c0,0-0.1,0-0.1,0
+		c-1.5-0.5-3.2-1.3-4.9-2.3c1.9-1.3,3.7-2.8,5.4-4.6c1.7-1.7,3.3-3.6,4.6-5.5C28.3,18.8,29,20.2,29.5,21.5z M5.6,16.1
+		c1.3-1.9,2.9-3.9,4.7-5.8c1.9-1.9,3.8-3.5,5.8-4.7c0,0,0,0,0.1,0c0.1,0.1,0.2,0.2,0.4,0.2c0.4,0.3,0.8,0.6,1.2,0.8c0,0,0,0,0.1,0.1
+		c0.4,0.3,0.8,0.6,1.2,1c0.1,0.1,0.2,0.2,0.4,0.3c0.3,0.3,0.6,0.5,0.9,0.8c0.1,0.1,0.2,0.2,0.4,0.3c0.4,0.4,0.8,0.8,1.2,1.2
+		c1.8,1.8,3.5,3.8,4.8,5.8c-1.3,2-2.9,3.9-4.8,5.8c-1.8,1.8-3.8,3.4-5.8,4.8c-1.9-1.3-3.9-2.9-5.8-4.8C8.5,20,6.9,18,5.6,16.1z
+		 M25.8,1.8c1.4,0,2.6,0.4,3.4,1.2c1.4,1.4,1.5,4.2,0.3,7.6c-0.5,1.3-1.2,2.7-2,4c-1.3-1.9-2.8-3.7-4.6-5.5
+		c-1.8-1.8-3.6-3.3-5.4-4.6C20.6,2.8,23.5,1.8,25.8,1.8z M3,3c0.2-0.2,0.4-0.4,0.7-0.5C3.8,2.4,3.9,2.4,4,2.3
+		c0.1-0.1,0.3-0.1,0.4-0.2C4.6,2.1,4.8,2,4.9,2c0.1,0,0.3-0.1,0.4-0.1c0.2,0,0.4,0,0.5,0c0.1,0,0.3,0,0.4,0c0.3,0,0.6,0,1,0.1
+		c0.1,0,0.1,0,0.2,0C7.8,1.9,8.1,2,8.4,2c0.1,0,0.2,0,0.3,0.1c0.3,0.1,0.7,0.2,1,0.3c0,0,0.1,0,0.1,0c0.4,0.1,0.8,0.3,1.2,0.4
+		c0.1,0,0.2,0.1,0.3,0.1c0.3,0.1,0.6,0.3,0.9,0.4c0.1,0,0.2,0.1,0.3,0.1c0.4,0.2,0.8,0.4,1.1,0.6c0,0,0.1,0,0.1,0
+		c0.4,0.2,0.7,0.4,1.1,0.6c-1.8,1.3-3.7,2.8-5.4,4.6C7.5,11,6,12.8,4.7,14.7C1.8,9.7,0.9,5.1,3,3z M10.7,29.4
+		c-3.4,1.3-6.2,1.1-7.6-0.3C0.9,27,1.8,22.4,4.7,17.5c1.3,1.8,2.8,3.7,4.6,5.4c0.4,0.4,0.9,0.8,1.3,1.2c0.1,0.1,0.2,0.2,0.3,0.3
+		c0.4,0.3,0.8,0.7,1.1,1c0.1,0.1,0.1,0.1,0.2,0.2c0.8,0.7,1.7,1.3,2.5,1.9C13.4,28.3,12,28.9,10.7,29.4z"/>
+	<path d="M19.4,19.3c1.8-1.8,1.8-4.8,0-6.6c-1.8-1.8-4.8-1.8-6.6,0c-1.8,1.8-1.8,4.8,0,6.6c0.9,0.9,2.1,1.4,3.3,1.4
+		C17.3,20.7,18.5,20.3,19.4,19.3z M13.9,13.8c0.6-0.6,1.4-0.9,2.2-0.9s1.6,0.3,2.2,0.9c1.2,1.2,1.2,3.2,0,4.4s-3.2,1.2-4.4,0
+		S12.7,15.1,13.9,13.8z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/spirituality.svg b/webapp/assets/_new/icons/svgs/spirituality.svg
new file mode 100644
index 000000000..0c2757071
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/spirituality.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M15.9,18.6c-1.4,0-2.7-0.5-3.7-1.5c-1.4-1.4-1.9-3.3-1.4-5.2c0.5-1.8,1.9-3.2,3.7-3.7c1.9-0.5,3.8,0,5.2,1.4
+	c1.3,1.3,1.9,3.3,1.4,5.2c-0.5,1.8-1.9,3.2-3.7,3.7c0,0,0,0,0,0C16.9,18.5,16.4,18.6,15.9,18.6z M17.2,17.7L17.2,17.7
+	L17.2,17.7z M15.9,9.5c-0.3,0-0.7,0-1,0.1c-1.2,0.3-2.3,1.4-2.6,2.6c-0.4,1.4,0,2.7,1,3.7s2.4,1.3,3.7,1
+	c1.2-0.3,2.3-1.4,2.6-2.6c0.4-1.4,0-2.7-1-3.7C17.9,9.9,16.9,9.5,15.9,9.5z"/>
+	<path d="M27.8,32H4v-2.2c0-5.5,4.4-9.9,9.9-9.9h4c5.5,0,9.9,4.4,9.9,9.9V32z M5.5,30.5h20.8v-0.7c0-4.6-3.8-8.4-8.4-8.4h-4
+	c-4.6,0-8.4,3.8-8.4,8.4V30.5z"/>
+	<rect x="15.6" y="0.5" width="1.5" height="4.3"/>
+	<rect x="23.6" y="7.2" transform="matrix(0.8679 -0.4968 0.4968 0.8679 -0.5339 13.83)" width="4.3" height="1.5"/>
+	<rect x="5.9" y="5.9" transform="matrix(0.4969 -0.8678 0.8678 0.4969 -3.6304 9.7958)" width="1.5" height="4.3"/>
+	<rect x="9.4" y="1.8" transform="matrix(0.8207 -0.5714 0.5714 0.8207 -0.4488 6.4807)" width="1.5" height="4.3"/>
+	<rect x="20.1" y="3.2" transform="matrix(0.5712 -0.8208 0.8208 0.5712 6.3227 19.9037)" width="4.3" height="1.5"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/suitcase.svg b/webapp/assets/_new/icons/svgs/suitcase.svg
new file mode 100644
index 000000000..ceca5cbad
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/suitcase.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>suitcase</title>
+<path d="M14 3h4c1.093 0 2 0.907 2 2v1h3v-1h2v1h2c1.093 0 2 0.907 2 2v16c0 1.093-0.907 2-2 2h-22c-1.093 0-2-0.907-2-2v-16c0-1.093 0.907-2 2-2h2v-1h2v1h3v-1c0-1.093 0.907-2 2-2zM14 5v1h4v-1h-4zM5 8v16h2v-15h2v15h14v-15h2v15h2v-16h-22z"></path>
+</svg>
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 53abd01f8..180f9c820 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -268,6 +268,7 @@ $size-avatar-large: 114px;
  * @presenter Spacing
  */
 
+ $size-button-large: 50px;
  $size-button-base: 36px;
  $size-button-small: 26px;
 
@@ -356,3 +357,22 @@ $media-query-x-large: (min-width: 1200px);
 /** 
  * @tokens Background Images
  */
+
+/** 
+ * @tokens Header Color
+ */
+
+$color-header-background: $color-neutral-100;
+
+/** 
+ * @tokens Footer Color
+ */
+
+$color-footer-background: $color-neutral-100;
+$color-footer-link: $color-primary;
+
+/** 
+ * @tokens Locale Menu Color
+ */
+
+$color-locale-menu: $text-color-soft;
\ No newline at end of file
diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss
new file mode 100644
index 000000000..75058595d
--- /dev/null
+++ b/webapp/assets/styles/imports/_branding.scss
@@ -0,0 +1,5 @@
+/* 
+    *
+    * Here, all SCSS variables and classes can be adapted to your custom design. 
+    *
+*/
\ No newline at end of file
diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index d6821e013..144701f83 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -179,4 +179,4 @@ hr {
 
 .dropdown-arrow {
   font-size: $font-size-xx-small;
-}
+}
\ No newline at end of file
diff --git a/webapp/components/AvatarMenu/AvatarMenu.spec.js b/webapp/components/AvatarMenu/AvatarMenu.spec.js
index 85f5c32a8..5495c9ae6 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.spec.js
+++ b/webapp/components/AvatarMenu/AvatarMenu.spec.js
@@ -42,9 +42,9 @@ describe('AvatarMenu.vue', () => {
       wrapper = Wrapper()
     })
 
-    it('renders the UserAvatar component', () => {
+    it('renders the ProfileAvatar component', () => {
       wrapper.find('.avatar-menu-trigger').trigger('click')
-      expect(wrapper.find('.user-avatar').exists()).toBe(true)
+      expect(wrapper.find('.profile-avatar').exists()).toBe(true)
     })
 
     describe('given a userName', () => {
@@ -90,6 +90,13 @@ describe('AvatarMenu.vue', () => {
           expect(profileLink.exists()).toBe(true)
         })
 
+        it('displays a link to "Groups"', () => {
+          const profileLink = wrapper
+            .findAll('.ds-menu-item span')
+            .at(wrapper.vm.routes.findIndex((route) => route.path === '/groups'))
+          expect(profileLink.exists()).toBe(true)
+        })
+
         it('displays a link to the notifications page', () => {
           const notificationsLink = wrapper
             .findAll('.ds-menu-item span')
@@ -103,6 +110,11 @@ describe('AvatarMenu.vue', () => {
             .at(wrapper.vm.routes.findIndex((route) => route.path === '/settings'))
           expect(settingsLink.exists()).toBe(true)
         })
+
+        it('displays a total of 4 links', () => {
+          const allLinks = wrapper.findAll('.ds-menu-item')
+          expect(allLinks).toHaveLength(4)
+        })
       })
 
       describe('role moderator', () => {
@@ -125,9 +137,9 @@ describe('AvatarMenu.vue', () => {
           expect(moderationLink.exists()).toBe(true)
         })
 
-        it('displays a total of 4 links', () => {
+        it('displays a total of 5 links', () => {
           const allLinks = wrapper.findAll('.ds-menu-item')
-          expect(allLinks).toHaveLength(4)
+          expect(allLinks).toHaveLength(5)
         })
       })
 
@@ -151,9 +163,9 @@ describe('AvatarMenu.vue', () => {
           expect(adminLink.exists()).toBe(true)
         })
 
-        it('displays a total of 5 links', () => {
+        it('displays a total of 6 links', () => {
           const allLinks = wrapper.findAll('.ds-menu-item')
-          expect(allLinks).toHaveLength(5)
+          expect(allLinks).toHaveLength(6)
         })
       })
     })
diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index d47eb2d68..a5b56ba43 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -11,7 +11,7 @@
         "
         @click.prevent="toggleMenu"
       >
-        <user-avatar :user="user" size="small" />
+        <profile-avatar :profile="user" size="small" />
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
@@ -50,12 +50,12 @@
 <script>
 import { mapGetters } from 'vuex'
 import Dropdown from '~/components/Dropdown'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   components: {
     Dropdown,
-    UserAvatar,
+    ProfileAvatar,
   },
   props: {
     placement: { type: String, default: 'top-end' },
@@ -72,10 +72,15 @@ export default {
       }
       const routes = [
         {
-          name: this.$t('profile.name'),
+          name: this.$t('header.avatarMenu.myProfile'),
           path: `/profile/${this.user.id}/${this.user.slug}`,
           icon: 'user',
         },
+        {
+          name: this.$t('header.avatarMenu.Groups'),
+          path: '/groups',
+          icon: 'users',
+        },
         {
           name: this.$t('notifications.pageLink'),
           path: '/notifications',
@@ -130,7 +135,7 @@ export default {
   align-items: center;
   padding-left: $space-xx-small;
 
-  > .user-avatar {
+  > .profile-avatar {
     margin-right: $space-xx-small;
   }
 }
diff --git a/webapp/components/FollowButton.spec.js b/webapp/components/Button/FollowButton.spec.js
similarity index 100%
rename from webapp/components/FollowButton.spec.js
rename to webapp/components/Button/FollowButton.spec.js
diff --git a/webapp/components/FollowButton.vue b/webapp/components/Button/FollowButton.vue
similarity index 99%
rename from webapp/components/FollowButton.vue
rename to webapp/components/Button/FollowButton.vue
index 126a3891d..a0807ed6c 100644
--- a/webapp/components/FollowButton.vue
+++ b/webapp/components/Button/FollowButton.vue
@@ -19,7 +19,6 @@ import { followUserMutation, unfollowUserMutation } from '~/graphql/User'
 
 export default {
   name: 'HcFollowButton',
-
   props: {
     followId: { type: String, default: null },
     isFollowed: { type: Boolean, default: false },
diff --git a/webapp/components/Button/JoinLeaveButton.vue b/webapp/components/Button/JoinLeaveButton.vue
new file mode 100644
index 000000000..9bcb5042a
--- /dev/null
+++ b/webapp/components/Button/JoinLeaveButton.vue
@@ -0,0 +1,136 @@
+<template>
+  <base-button
+    class="join-leave-button"
+    :disabled="disabled"
+    :loading="localLoading"
+    :icon="icon"
+    :filled="isMember && !hovered"
+    :danger="isMember && hovered"
+    @mouseenter.native="onHover"
+    @mouseleave.native="hovered = false"
+    @click.prevent="toggle"
+  >
+    {{ label }}
+  </base-button>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import { joinGroupMutation, leaveGroupMutation } from '~/graphql/groups'
+
+export default {
+  name: 'JoinLeaveButton',
+  props: {
+    group: { type: Object, required: true },
+    userId: { type: String, required: true },
+    isMember: { type: Boolean, required: true },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      localLoading: this.loading,
+      hovered: false,
+    }
+  },
+  computed: {
+    icon() {
+      if (this.isMember && this.hovered) {
+        return 'close'
+      } else {
+        return this.isMember ? 'check' : 'plus'
+      }
+    },
+    label() {
+      if (this.isMember) {
+        return this.$t('group.joinLeaveButton.iAmMember')
+      } else {
+        return this.$t('group.joinLeaveButton.join')
+      }
+    },
+  },
+  watch: {
+    isMember() {
+      this.localLoading = false
+      this.hovered = false
+    },
+    loading() {
+      this.localLoading = this.loading
+    },
+  },
+  methods: {
+    ...mapMutations({
+      commitModalData: 'modal/SET_OPEN',
+    }),
+    onHover() {
+      if (!this.disabled && !this.localLoading) {
+        this.hovered = true
+      }
+    },
+    toggle() {
+      if (this.isMember) {
+        this.openLeaveModal()
+      } else {
+        this.joinLeave()
+      }
+    },
+    openLeaveModal() {
+      this.commitModalData(this.leaveModalData())
+    },
+    leaveModalData() {
+      return {
+        name: 'confirm',
+        data: {
+          type: '',
+          resource: { id: '' },
+          modalData: {
+            titleIdent: 'group.leaveModal.title',
+            messageIdent: 'group.leaveModal.message',
+            messageParams: {
+              name: this.group.name,
+            },
+            buttons: {
+              confirm: {
+                danger: true,
+                icon: 'sign-out',
+                textIdent: 'group.leaveModal.confirmButton',
+                callback: this.joinLeave,
+              },
+              cancel: {
+                icon: 'close',
+                textIdent: 'actions.cancel',
+                callback: () => {},
+              },
+            },
+          },
+        },
+      }
+    },
+    async joinLeave() {
+      const join = !this.isMember
+      const mutation = join ? joinGroupMutation() : leaveGroupMutation()
+
+      this.hovered = false
+      this.$emit('prepare', join)
+
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation,
+          variables: { groupId: this.group.id, userId: this.userId },
+        })
+        const joinedLeftGroupResult = join ? data.JoinGroup : data.LeaveGroup
+        this.$emit('update', joinedLeftGroupResult)
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.join-leave-button {
+  display: block;
+  width: 100%;
+}
+</style>
diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index b7d71de2d..7fc9bcf1c 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -9,6 +9,10 @@
       :disabled="isDisabled(category.id)"
       :icon="category.icon"
       size="small"
+      v-tooltip="{
+        content: $t(`contribution.category.description.${category.slug}`),
+        placement: 'bottom-start',
+      }"
     >
       {{ $t(`contribution.category.name.${category.slug}`) }}
     </base-button>
@@ -17,6 +21,7 @@
 
 <script>
 import CategoryQuery from '~/graphql/CategoryQuery'
+import { CATEGORIES_MAX } from '~/constants/categories.js'
 import xor from 'lodash/xor'
 
 export default {
@@ -32,7 +37,7 @@ export default {
   data() {
     return {
       categories: null,
-      selectedMax: 3,
+      selectedMax: CATEGORIES_MAX,
       selectedCategoryIds: this.existingCategoryIds,
     }
   },
diff --git a/webapp/components/CommentCard/CommentCard.story.js b/webapp/components/CommentCard/CommentCard.story.js
index 467a125d5..75078657e 100644
--- a/webapp/components/CommentCard/CommentCard.story.js
+++ b/webapp/components/CommentCard/CommentCard.story.js
@@ -18,8 +18,7 @@ const comment = {
   author: {
     id: '1',
     avatar: {
-      url:
-        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     slug: 'jenny-rostock',
     name: 'Rainer Unsinn',
diff --git a/webapp/components/ContentMenu/ContentMenu.vue b/webapp/components/ContentMenu/ContentMenu.vue
index 88d83d059..60bcccf43 100644
--- a/webapp/components/ContentMenu/ContentMenu.vue
+++ b/webapp/components/ContentMenu/ContentMenu.vue
@@ -7,7 +7,6 @@
           icon="ellipsis-v"
           size="small"
           circle
-          ghost
           @click.prevent="toggleMenu()"
         />
       </slot>
diff --git a/webapp/components/ContentMenu/GroupContentMenu.spec.js b/webapp/components/ContentMenu/GroupContentMenu.spec.js
new file mode 100644
index 000000000..8b17b24b1
--- /dev/null
+++ b/webapp/components/ContentMenu/GroupContentMenu.spec.js
@@ -0,0 +1,38 @@
+import { config, mount } from '@vue/test-utils'
+import GroupContentMenu from './GroupContentMenu.vue'
+
+const localVue = global.localVue
+
+config.stubs['router-link'] = '<span><slot /></span>'
+
+const propsData = {
+  usage: 'groupTeaser',
+  resource: {},
+  group: {},
+  resourceType: 'group',
+}
+
+describe('GroupContentMenu', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupContentMenu, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-content-menu')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/components/ContentMenu/GroupContentMenu.vue b/webapp/components/ContentMenu/GroupContentMenu.vue
new file mode 100644
index 000000000..7a7737320
--- /dev/null
+++ b/webapp/components/ContentMenu/GroupContentMenu.vue
@@ -0,0 +1,98 @@
+<template>
+  <dropdown class="group-content-menu" :placement="placement" offset="5">
+    <template #default="{ toggleMenu }">
+      <slot name="button" :toggleMenu="toggleMenu">
+        <base-button
+          icon="ellipsis-v"
+          size="small"
+          circle
+          @click.prevent="toggleMenu()"
+          data-test="group-menu-button"
+        />
+      </slot>
+    </template>
+    <template #popover="{ toggleMenu }">
+      <div class="group-menu-popover">
+        <ds-menu :routes="routes">
+          <template #menuitem="item">
+            {{ item.parents }}
+            <ds-menu-item
+              :route="item.route"
+              :parents="item.parents"
+              @click.stop.prevent="openItem(item.route, toggleMenu)"
+            >
+              <base-icon :name="item.route.icon" />
+              {{ item.route.label }}
+            </ds-menu-item>
+          </template>
+        </ds-menu>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  name: 'GroupContentMenu',
+  components: {
+    Dropdown,
+  },
+  props: {
+    usage: {
+      type: String,
+      required: true,
+      validator: (value) => {
+        return value.match(/(groupTeaser|groupProfile)/)
+      },
+    },
+    group: { type: Object, required: true },
+    placement: { type: String, default: 'bottom-end' },
+  },
+  computed: {
+    routes() {
+      const routes = []
+
+      if (this.usage !== 'groupProfile') {
+        routes.push({
+          label: this.$t('group.contentMenu.visitGroupPage'),
+          icon: 'home',
+          name: 'group-id-slug',
+          params: { id: this.group.id, slug: this.group.slug },
+        })
+      }
+      if (this.group.myRole === 'owner') {
+        routes.push({
+          label: this.$t('admin.settings.name'),
+          path: `/group/edit/${this.group.id}`,
+          icon: 'edit',
+        })
+      }
+
+      return routes
+    },
+  },
+  methods: {
+    openItem(route, toggleMenu) {
+      if (route.callback) {
+        route.callback()
+      } else {
+        this.$router.push(route)
+      }
+      toggleMenu()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.group-menu-popover {
+  nav {
+    margin-top: -$space-xx-small;
+    margin-bottom: -$space-xx-small;
+    margin-left: -$space-x-small;
+    margin-right: -$space-x-small;
+  }
+}
+</style>
diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index cce187a63..1ef1777fe 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -4,7 +4,7 @@ import ContributionForm from './ContributionForm.vue'
 import Vuex from 'vuex'
 import PostMutations from '~/graphql/PostMutations.js'
 
-import ImageUploader from '~/components/ImageUploader/ImageUploader'
+import ImageUploader from '~/components/Uploader/ImageUploader'
 import MutationObserver from 'mutation-observer'
 
 global.MutationObserver = MutationObserver
@@ -58,6 +58,9 @@ describe('ContributionForm.vue', () => {
         back: jest.fn(),
         push: jest.fn(),
       },
+      $env: {
+        CATEGORIES_ACTIVE: false,
+      },
     }
     propsData = {}
   })
@@ -132,8 +135,10 @@ describe('ContributionForm.vue', () => {
             variables: {
               title: postTitle,
               content: postContent,
+              categoryIds: [],
               id: null,
               image: null,
+              groupId: null,
             },
           }
           postTitleInput = wrapper.find('.ds-input')
@@ -198,7 +203,7 @@ describe('ContributionForm.vue', () => {
         beforeEach(async () => {
           jest.useFakeTimers()
           mocks.$apollo.mutate = jest.fn().mockRejectedValueOnce({
-            message: 'Not Authorised!',
+            message: 'Not Authorized!',
           })
           wrapper = Wrapper()
           postTitleInput = wrapper.find('.ds-input')
@@ -209,7 +214,7 @@ describe('ContributionForm.vue', () => {
         it('shows an error toaster when apollo mutation rejects', async () => {
           await wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
-          await expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorised!')
+          await expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorized!')
         })
       })
     })
@@ -254,7 +259,9 @@ describe('ContributionForm.vue', () => {
             variables: {
               title: propsData.contribution.title,
               content: propsData.contribution.content,
+              categoryIds: [],
               id: propsData.contribution.id,
+              groupId: null,
               image: {
                 sensitive: false,
               },
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index a06679149..0428b2e23 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -51,6 +51,19 @@
           {{ contentLength }}
           <base-icon v-if="errors && errors.content" name="warning" />
         </ds-chip>
+        <categories-select
+          v-if="categoriesActive"
+          model="categoryIds"
+          :existingCategoryIds="formData.categoryIds"
+        />
+        <ds-chip
+          v-if="categoriesActive"
+          size="base"
+          :color="errors && errors.categoryIds && 'danger'"
+        >
+          {{ formData.categoryIds.length }} / 3
+          <base-icon v-if="errors && errors.categoryIds" name="warning" />
+        </ds-chip>
         <div class="buttons">
           <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
             {{ $t('actions.cancel') }}
@@ -69,7 +82,8 @@ import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
 import HcEditor from '~/components/Editor/Editor'
 import PostMutations from '~/graphql/PostMutations.js'
-import ImageUploader from '~/components/ImageUploader/ImageUploader'
+import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+import ImageUploader from '~/components/Uploader/ImageUploader'
 import links from '~/constants/links.js'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 
@@ -78,15 +92,20 @@ export default {
     HcEditor,
     ImageUploader,
     PageParamsLink,
+    CategoriesSelect,
   },
   props: {
     contribution: {
       type: Object,
       default: () => ({}),
     },
+    groupId: {
+      type: String,
+      default: () => null,
+    },
   },
   data() {
-    const { title, content, image } = this.contribution
+    const { title, content, image, categories } = this.contribution
     const {
       sensitive: imageBlurred = false,
       aspectRatio: imageAspectRatio = null,
@@ -94,6 +113,7 @@ export default {
     } = image || {}
 
     return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
       links,
       formData: {
         title: title || '',
@@ -102,11 +122,22 @@ export default {
         imageAspectRatio,
         imageType,
         imageBlurred,
+        categoryIds: categories ? categories.map((category) => category.id) : [],
       },
       formSchema: {
         title: { required: true, min: 3, max: 100 },
         content: { required: true },
         imageBlurred: { required: false },
+        categoryIds: {
+          type: 'array',
+          required: this.categoriesActive,
+          validator: (_, value = []) => {
+            if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
+              return [new Error(this.$t('common.validations.categories'))]
+            }
+            return []
+          },
+        },
       },
       loading: false,
       users: [],
@@ -125,7 +156,7 @@ export default {
   methods: {
     submit() {
       let image = null
-      const { title, content } = this.formData
+      const { title, content, categoryIds } = this.formData
       if (this.formData.image) {
         image = {
           sensitive: this.formData.imageBlurred,
@@ -143,8 +174,10 @@ export default {
           variables: {
             title,
             content,
+            categoryIds,
             id: this.contribution.id || null,
             image,
+            groupId: this.groupId,
           },
         })
         .then(({ data }) => {
diff --git a/webapp/components/DeleteData/DeleteData.spec.js b/webapp/components/DeleteData/DeleteData.spec.js
index 70f98424a..c540c9832 100644
--- a/webapp/components/DeleteData/DeleteData.spec.js
+++ b/webapp/components/DeleteData/DeleteData.spec.js
@@ -29,7 +29,7 @@ describe('DeleteData.vue', () => {
               },
             },
           })
-          .mockRejectedValue({ message: 'Not authorised!' }),
+          .mockRejectedValue({ message: 'Not Authorized!' }),
       },
       $toast: {
         error: jest.fn(),
@@ -180,7 +180,7 @@ describe('DeleteData.vue', () => {
         // second submission causes mutation to reject
         await deleteAccountBtn.trigger('click')
         await mocks.$apollo.mutate
-        expect(mocks.$toast.error).toHaveBeenCalledWith('Not authorised!')
+        expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorized!')
       })
     })
   })
diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue
index 21b842fe6..a0cdcf29b 100644
--- a/webapp/components/DeleteData/DeleteData.vue
+++ b/webapp/components/DeleteData/DeleteData.vue
@@ -103,7 +103,7 @@ export default {
       this.$apollo
         .mutate({
           mutation: gql`
-            mutation($id: ID!, $resource: [Deletable]) {
+            mutation ($id: ID!, $resource: [Deletable]) {
               DeleteUser(id: $id, resource: $resource) {
                 id
               }
diff --git a/webapp/components/Dropdown.vue b/webapp/components/Dropdown.vue
index c01b12bd9..7e4d21223 100644
--- a/webapp/components/Dropdown.vue
+++ b/webapp/components/Dropdown.vue
@@ -8,7 +8,7 @@
     :offset="offset"
   >
     <slot :toggleMenu="toggleMenu" :openMenu="openMenu" :closeMenu="closeMenu" :isOpen="isOpen" />
-    <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoveMouseLeave">
+    <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoverMouseLeave">
       <slot
         name="popover"
         :toggleMenu="toggleMenu"
@@ -97,7 +97,7 @@ export default {
       }
       this.clearTimeouts()
       if (useTimeout === true) {
-        this.popoveMouseLeave()
+        this.popoverMouseLeave()
       } else {
         this.isPopoverOpen = false
       }
@@ -113,7 +113,7 @@ export default {
         }, 500)
       }
     },
-    popoveMouseLeave() {
+    popoverMouseLeave() {
       if (this.developerNoAutoClosing) return
       if (this.disabled) {
         return
diff --git a/webapp/components/Editor/Editor.story.js b/webapp/components/Editor/Editor.story.js
index dfcc3cdf4..6e38eab7f 100644
--- a/webapp/components/Editor/Editor.story.js
+++ b/webapp/components/Editor/Editor.story.js
@@ -9,8 +9,7 @@ const embed = {
   title: 'Video Titel',
   // html: null,
   description: 'Video Description',
-  html:
-    '<iframe width="auto" height="250" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+  html: '<iframe width="auto" height="250" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
 }
 
 const plugins = [
diff --git a/webapp/components/Editor/nodes/Embed.spec.js b/webapp/components/Editor/nodes/Embed.spec.js
index e87ee1570..372b189f9 100644
--- a/webapp/components/Editor/nodes/Embed.spec.js
+++ b/webapp/components/Editor/nodes/Embed.spec.js
@@ -33,8 +33,7 @@ describe('Embed.vue', () => {
             video: null,
             lang: 'de',
             sources: ['resource', 'oembed'],
-            html:
-              '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+            html: '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
           }),
         }
       })
diff --git a/webapp/components/Embed/EmbedComponent.spec.js b/webapp/components/Embed/EmbedComponent.spec.js
index fd7452c01..cd3526368 100644
--- a/webapp/components/Embed/EmbedComponent.spec.js
+++ b/webapp/components/Embed/EmbedComponent.spec.js
@@ -114,8 +114,7 @@ describe('EmbedComponent.vue', () => {
             video: null,
             lang: 'de',
             sources: ['resource', 'oembed'],
-            html:
-              '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>',
+            html: '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>',
           }
           wrapper = Wrapper()
         })
diff --git a/webapp/components/Emotions/Emotions.vue b/webapp/components/Emotions/Emotions.vue
index e75c8848d..b4dc14a61 100644
--- a/webapp/components/Emotions/Emotions.vue
+++ b/webapp/components/Emotions/Emotions.vue
@@ -83,7 +83,7 @@ export default {
       this.$apollo
         .query({
           query: gql`
-            query($postId: ID!, $data: _EMOTEDInput!) {
+            query ($postId: ID!, $data: _EMOTEDInput!) {
               PostsEmotionsCountByEmotion(postId: $postId, data: $data)
             }
           `,
diff --git a/webapp/components/FilterMenu/CategoriesFilter.spec.js b/webapp/components/FilterMenu/CategoriesFilter.spec.js
index ef0f2ad90..677217585 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.spec.js
+++ b/webapp/components/FilterMenu/CategoriesFilter.spec.js
@@ -15,8 +15,19 @@ describe('CategoriesFilter.vue', () => {
     'posts/filteredCategoryIds': jest.fn(() => []),
   }
 
+  const apolloMutationMock = jest.fn().mockResolvedValue({
+    data: { saveCategorySettings: true },
+  })
+
   const mocks = {
     $t: jest.fn((string) => string),
+    $apollo: {
+      mutate: apolloMutationMock,
+    },
+    $toast: {
+      success: jest.fn(),
+      error: jest.fn(),
+    },
   }
 
   const Wrapper = () => {
@@ -48,20 +59,22 @@ describe('CategoriesFilter.vue', () => {
 
   describe('mount', () => {
     it('starts with all categories button active', () => {
-      const allCategoriesButton = wrapper.find('.categories-filter .sidebar .base-button')
+      const allCategoriesButton = wrapper.find('.categories-filter .item-all-topics .base-button')
       expect(allCategoriesButton.attributes().class).toContain('--filled')
     })
 
     it('sets category button attribute `filled` when corresponding category is filtered', async () => {
       getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
       wrapper = await Wrapper()
-      democracyAndPoliticsButton = wrapper.findAll('.categories-filter .item .base-button').at(2)
+      democracyAndPoliticsButton = wrapper.find('.categories-filter .item-save-topics .base-button')
       expect(democracyAndPoliticsButton.attributes().class).toContain('--filled')
     })
 
     describe('click on an "catetories-buttons" button', () => {
       it('calls TOGGLE_CATEGORY when clicked', () => {
-        environmentAndNatureButton = wrapper.findAll('.categories-filter .item .base-button').at(0)
+        environmentAndNatureButton = wrapper
+          .findAll('.categories-filter .item-category .base-button')
+          .at(0)
         environmentAndNatureButton.trigger('click')
         expect(mutations['posts/TOGGLE_CATEGORY']).toHaveBeenCalledWith({}, 'cat4')
       })
@@ -71,10 +84,19 @@ describe('CategoriesFilter.vue', () => {
       it('when all button is clicked', async () => {
         getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
         wrapper = await Wrapper()
-        const allCategoriesButton = wrapper.find('.categories-filter .sidebar .base-button')
+        const allCategoriesButton = wrapper.find('.categories-filter .item-all-topics .base-button')
         allCategoriesButton.trigger('click')
         expect(mutations['posts/RESET_CATEGORIES']).toHaveBeenCalledTimes(1)
       })
     })
+
+    describe('save categories', () => {
+      it('calls the API', async () => {
+        wrapper = await Wrapper()
+        const saveButton = wrapper.find('.categories-filter .item-save-topics .base-button')
+        saveButton.trigger('click')
+        expect(apolloMutationMock).toBeCalled()
+      })
+    })
   })
 })
diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index 47e4bcc10..0d27507f9 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -1,20 +1,32 @@
 <template>
   <filter-menu-section :title="$t('filter-menu.categories')" class="categories-filter">
-    <template #sidebar>
-      <labeled-button
-        :filled="!filteredCategoryIds.length"
-        :label="$t('filter-menu.all')"
-        icon="check"
-        @click="resetCategories"
-      />
+    <template #filter-topics>
+      <li class="item item-all-topics">
+        <labeled-button
+          :filled="!filteredCategoryIds.length"
+          :label="$t('filter-menu.all')"
+          icon="check"
+          @click="resetCategories"
+        />
+      </li>
+      <li class="item item-save-topics">
+        <labeled-button filled :label="$t('actions.save')" icon="save" @click="saveCategories" />
+      </li>
+      <hr />
+      <ds-space margin="base" />
     </template>
+
     <template #filter-list>
-      <li v-for="category in categories" :key="category.id" class="item">
+      <li v-for="category in categories" :key="category.id" class="item item-category">
         <labeled-button
           :icon="category.icon"
           :filled="filteredCategoryIds.includes(category.id)"
           :label="$t(`contribution.category.name.${category.slug}`)"
           @click="toggleCategory(category.id)"
+          v-tooltip="{
+            content: $t(`contribution.category.description.${category.slug}`),
+            placement: 'bottom-start',
+          }"
         />
       </li>
     </template>
@@ -24,6 +36,7 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import CategoryQuery from '~/graphql/CategoryQuery.js'
+import SaveCategories from '~/graphql/SaveCategories.js'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
@@ -32,6 +45,9 @@ export default {
     FilterMenuSection,
     LabeledButton,
   },
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
   data() {
     return {
       categories: [],
@@ -47,6 +63,19 @@ export default {
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
+    saveCategories() {
+      this.$apollo
+        .mutate({
+          mutation: SaveCategories(),
+          variables: { activeCategories: this.filteredCategoryIds },
+        })
+        .then(() => {
+          this.$toast.success(this.$t('filter-menu.save.success'))
+        })
+        .catch(() => {
+          this.$toast.error(this.$t('filter-menu.save.error'))
+        })
+    },
   },
   apollo: {
     Category: {
diff --git a/webapp/components/FilterMenu/CategoriesMenu.vue b/webapp/components/FilterMenu/CategoriesMenu.vue
new file mode 100644
index 000000000..0b5505503
--- /dev/null
+++ b/webapp/components/FilterMenu/CategoriesMenu.vue
@@ -0,0 +1,53 @@
+<template>
+  <dropdown ref="category-menu" placement="top-start" :offset="8" class="category-menu">
+    <a href="#" slot="default" slot-scope="{ toggleMenu }" @click.prevent="toggleMenu()">
+      <ds-text bold size="large">{{ $t('admin.categories.name') }}</ds-text>
+    </a>
+    <template slot="popover">
+      <div class="category-menu-options">
+        <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+        <categories-filter v-if="categoriesActive" />
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+import { mapGetters } from 'vuex'
+import CategoriesFilter from './CategoriesFilter'
+
+export default {
+  name: 'CategoriesMenu',
+  components: {
+    Dropdown,
+    CategoriesFilter,
+  },
+  props: {
+    placement: { type: String },
+    offset: { type: [String, Number] },
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      // TODO: implement visibility of active filter later on
+      filterActive: 'posts/isActive',
+    }),
+  },
+}
+</script>
+
+<style lang="scss">
+.category-menu-options {
+  max-width: $size-max-width-filter-menu;
+  padding: $space-small $space-x-small;
+
+  > .title {
+    font-size: $font-size-large;
+  }
+}
+</style>
diff --git a/webapp/components/FilterMenu/EmotionsFilter.spec.js b/webapp/components/FilterMenu/EmotionsFilter.spec.js
index fb5b17dac..f854c182b 100644
--- a/webapp/components/FilterMenu/EmotionsFilter.spec.js
+++ b/webapp/components/FilterMenu/EmotionsFilter.spec.js
@@ -1,64 +1,79 @@
 import { mount } from '@vue/test-utils'
-import Vuex from 'vuex'
+// import Vuex from 'vuex'
 import EmotionsFilter from './EmotionsFilter'
 
 const localVue = global.localVue
 
-let wrapper, happyEmotionButton
-
-describe('EmotionsFilter', () => {
-  const mutations = {
-    'posts/TOGGLE_EMOTION': jest.fn(),
-    'posts/RESET_EMOTIONS': jest.fn(),
-  }
-  const getters = {
-    'posts/filteredByEmotions': jest.fn(() => []),
-  }
-
-  const mocks = {
-    $t: jest.fn((string) => string),
-  }
+// let wrapper, happyEmotionButton
 
+describe('mount', () => {
+  let wrapper
   const Wrapper = () => {
-    const store = new Vuex.Store({ mutations, getters })
-    return mount(EmotionsFilter, { mocks, localVue, store })
+    return mount(EmotionsFilter, { localVue })
   }
 
   beforeEach(() => {
     wrapper = Wrapper()
   })
 
-  describe('mount', () => {
-    it('starts with all emotions button active', () => {
-      const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button')
-      expect(allEmotionsButton.attributes().class).toContain('--filled')
-    })
-
-    describe('click on an "emotion-button" button', () => {
-      it('calls TOGGLE_EMOTION when clicked', () => {
-        const wrapper = Wrapper()
-        happyEmotionButton = wrapper.findAll('.emotion-button > .base-button').at(1)
-        happyEmotionButton.trigger('click')
-        expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy')
-      })
-
-      it('sets the attribute `src` to colorized image', () => {
-        getters['posts/filteredByEmotions'] = jest.fn(() => ['happy'])
-        const wrapper = Wrapper()
-        happyEmotionButton = wrapper.findAll('.emotion-button > .base-button').at(1)
-        const happyEmotionButtonImage = happyEmotionButton.find('img')
-        expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg')
-      })
-    })
-
-    describe('clears filter', () => {
-      it('when all button is clicked', async () => {
-        getters['posts/filteredByEmotions'] = jest.fn(() => ['happy'])
-        wrapper = await Wrapper()
-        const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button')
-        allEmotionsButton.trigger('click')
-        expect(mutations['posts/RESET_EMOTIONS']).toHaveBeenCalledTimes(1)
-      })
-    })
+  it('renders button DIV', () => {
+    expect(wrapper.find('div').exists()).toBe(true)
   })
 })
+
+// describe('EmotionsFilter', () => {
+//   const mutations = {
+//     'posts/TOGGLE_EMOTION': jest.fn(),
+//     'posts/RESET_EMOTIONS': jest.fn(),
+//   }
+//   const getters = {
+//     'posts/filteredByEmotions': jest.fn(() => []),
+//   }
+
+//   const mocks = {
+//     $t: jest.fn((string) => string),
+//   }
+
+//   const Wrapper = () => {
+//     const store = new Vuex.Store({ mutations, getters })
+//     return mount(EmotionsFilter, { mocks, localVue, store })
+//   }
+
+//   beforeEach(() => {
+//     wrapper = Wrapper()
+//   })
+
+//   describe('mount', () => {
+//     it('starts with all emotions button active', () => {
+//       const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button')
+//       expect(allEmotionsButton.attributes().class).toContain('--filled')
+//     })
+
+//     describe('click on an "emotion-button" button', () => {
+//       it('calls TOGGLE_EMOTION when clicked', () => {
+//         const wrapper = Wrapper()
+//         happyEmotionButton = wrapper.findAll('.emotion-button > .base-button').at(1)
+//         happyEmotionButton.trigger('click')
+//         expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy')
+//       })
+
+//       it('sets the attribute `src` to colorized image', () => {
+//         getters['posts/filteredByEmotions'] = jest.fn(() => ['happy'])
+//         const wrapper = Wrapper()
+//         happyEmotionButton = wrapper.findAll('.emotion-button > .base-button').at(1)
+//         const happyEmotionButtonImage = happyEmotionButton.find('img')
+//         expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg')
+//       })
+//     })
+
+//     describe('clears filter', () => {
+//       it('when all button is clicked', async () => {
+//         getters['posts/filteredByEmotions'] = jest.fn(() => ['happy'])
+//         wrapper = await Wrapper()
+//         const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button')
+//         allEmotionsButton.trigger('click')
+//         expect(mutations['posts/RESET_EMOTIONS']).toHaveBeenCalledTimes(1)
+//       })
+//     })
+//   })
+// })
diff --git a/webapp/components/FilterMenu/EmotionsFilter.vue b/webapp/components/FilterMenu/EmotionsFilter.vue
index 491dd57a8..802eaeb57 100644
--- a/webapp/components/FilterMenu/EmotionsFilter.vue
+++ b/webapp/components/FilterMenu/EmotionsFilter.vue
@@ -1,5 +1,6 @@
 <template>
-  <filter-menu-section :title="$t('filter-menu.emotions')" class="emotions-filter">
+  <div>
+    <!-- <filter-menu-section :title="$t('filter-menu.emotions')" class="emotions-filter">
     <template #sidebar>
       <labeled-button
         :filled="!filteredByEmotions.length"
@@ -17,43 +18,44 @@
         />
       </li>
     </template>
-  </filter-menu-section>
+  </filter-menu-section> -->
+  </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
-import EmotionButton from '~/components/EmotionButton/EmotionButton'
-import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
-import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+// import { mapGetters, mapMutations } from 'vuex'
+// import EmotionButton from '~/components/EmotionButton/EmotionButton'
+// import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
+// import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
-export default {
-  components: {
-    EmotionButton,
-    FilterMenuSection,
-    LabeledButton,
-  },
-  data() {
-    return {
-      emotionsArray: ['funny', 'happy', 'surprised', 'cry', 'angry'],
-    }
-  },
-  computed: {
-    ...mapGetters({
-      filteredByEmotions: 'posts/filteredByEmotions',
-      currentUser: 'auth/user',
-    }),
-  },
-  methods: {
-    ...mapMutations({
-      resetEmotions: 'posts/RESET_EMOTIONS',
-      toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION',
-    }),
-    iconPath(emotion) {
-      if (this.filteredByEmotions.includes(emotion)) {
-        return `/img/svg/emoji/${emotion}_color.svg`
-      }
-      return `/img/svg/emoji/${emotion}.svg`
-    },
-  },
-}
+// export default {
+//   components: {
+//     EmotionButton,
+//     FilterMenuSection,
+//     LabeledButton,
+//   },
+//   data() {
+//     return {
+//       emotionsArray: ['funny', 'happy', 'surprised', 'cry', 'angry'],
+//     }
+//   },
+//   computed: {
+//     ...mapGetters({
+//       filteredByEmotions: 'posts/filteredByEmotions',
+//       currentUser: 'auth/user',
+//     }),
+//   },
+//   methods: {
+//     ...mapMutations({
+//       resetEmotions: 'posts/RESET_EMOTIONS',
+//       toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION',
+//     }),
+//     iconPath(emotion) {
+//       if (this.filteredByEmotions.includes(emotion)) {
+//         return `/img/svg/emoji/${emotion}_color.svg`
+//       }
+//       return `/img/svg/emoji/${emotion}.svg`
+//     },
+//   },
+// }
 </script>
diff --git a/webapp/components/FilterMenu/FilterMenu.spec.js b/webapp/components/FilterMenu/FilterMenu.spec.js
index 9e7ebfec0..6e9741e79 100644
--- a/webapp/components/FilterMenu/FilterMenu.spec.js
+++ b/webapp/components/FilterMenu/FilterMenu.spec.js
@@ -8,6 +8,9 @@ let wrapper
 describe('FilterMenu.vue', () => {
   const mocks = {
     $t: jest.fn((string) => string),
+    $env: {
+      CATEGORIES_ACTIVE: true,
+    },
   }
 
   const getters = {
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 9e211ccf9..28cda6669 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -14,6 +14,7 @@
       <div class="filter-menu-options">
         <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
         <following-filter />
+        <categories-filter v-if="categoriesActive" :showMobileMenu="showMobileMenu" />
       </div>
       <div class="filter-menu-options">
         <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
@@ -28,16 +29,24 @@ import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import FollowingFilter from './FollowingFilter'
 import OrderByFilter from './OrderByFilter'
+import CategoriesFilter from './CategoriesFilter'
 
 export default {
   components: {
     Dropdown,
     FollowingFilter,
     OrderByFilter,
+    CategoriesFilter,
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
   },
   props: {
     placement: { type: String },
     offset: { type: [String, Number] },
+    showMobileMenu: { type: Boolean, default: false },
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/FilterMenuSection.vue b/webapp/components/FilterMenu/FilterMenuSection.vue
index f4397701f..921bafff0 100644
--- a/webapp/components/FilterMenu/FilterMenuSection.vue
+++ b/webapp/components/FilterMenu/FilterMenuSection.vue
@@ -1,10 +1,17 @@
 <template>
   <section class="filter-menu-section">
     <h3 v-if="title" class="title">{{ title }}</h3>
-    <aside class="sidebar">
+
+    <ul class="filter-list">
+      <slot name="filter-follower" />
+    </ul>
+    <ul class="filter-list">
+      <slot name="filter-topics" />
+    </ul>
+    <!-- <aside class="sidebar">
       <slot name="sidebar" />
-    </aside>
-    <div v-if="divider" class="divider" />
+    </aside> -->
+    <!-- <div v-if="divider" class="divider" /> -->
     <ul class="filter-list">
       <slot name="filter-list" />
     </ul>
@@ -14,10 +21,10 @@
 <script>
 export default {
   props: {
-    divider: {
-      type: Boolean,
-      default: true,
-    },
+    // divider: {
+    //   type: Boolean,
+    //   default: true,
+    // },
     title: {
       type: String,
     },
@@ -37,42 +44,35 @@ export default {
     font-size: $font-size-base;
   }
 
-  > .sidebar {
-    display: flex;
-    flex-wrap: wrap;
-    flex-basis: 80%;
-    flex-grow: 1;
-    max-width: $size-width-filter-sidebar;
-  }
+  // > .sidebar {
+  //   display: flex;
+  //   flex-wrap: wrap;
+  //   flex-basis: 80%;
+  //   flex-grow: 1;
+  //   max-width: $size-width-filter-sidebar;
+  // }
 
-  > .divider {
-    border-left: $border-size-base solid $border-color-soft;
-    margin: $space-small;
-    margin-left: 0;
-  }
+  // > .divider {
+  //   // border-left: $border-size-base solid $border-color-soft;
+  //   margin: $space-small;
+  //   margin-left: 0;
+  //   border-top: $border-size-base solid $border-color-soft;
+  // }
 
   > .filter-list {
     display: flex;
     flex-wrap: wrap;
-    flex-basis: 80%;
+    flex-basis: 100%;
     flex-grow: 1;
 
     > .item {
-      width: 50%;
+      width: 30%;
       padding: 0 $space-x-small;
       margin-bottom: $space-small;
       text-align: center;
 
-      @media only screen and (max-width: 800px) {
-        width: 50%;
-      }
-
-      @media only screen and (max-width: 630px) {
-        width: 40%;
-      }
-
-      @media only screen and (max-width: 440px) {
-        width: 30%;
+      @media only screen and (min-width: 800px) {
+        width: 20%;
       }
     }
   }
@@ -84,14 +84,14 @@ export default {
       text-align: center;
     }
 
-    > .sidebar {
-      max-width: none;
-    }
+    // > .sidebar {
+    //   max-width: none;
+    // }
 
-    > .divider {
-      border-top: $border-size-base solid $border-color-soft;
-      margin: $space-small;
-    }
+    // > .divider {
+    //   border-top: $border-size-base solid $border-color-soft;
+    //   margin: $space-small;
+    // }
   }
 }
 </style>
diff --git a/webapp/components/FilterMenu/FollowingFilter.spec.js b/webapp/components/FilterMenu/FollowingFilter.spec.js
index 695f4afd4..4d4a827e5 100644
--- a/webapp/components/FilterMenu/FollowingFilter.spec.js
+++ b/webapp/components/FilterMenu/FollowingFilter.spec.js
@@ -35,12 +35,16 @@ describe('FollowingFilter', () => {
     it('sets "filter-by-followed" button attribute `filled`', () => {
       getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
       const wrapper = Wrapper()
-      expect(wrapper.find('.following-filter .sidebar .base-button').classes('--filled')).toBe(true)
+      expect(
+        wrapper
+          .find('.following-filter .filter-list .follower-item .base-button')
+          .classes('--filled'),
+      ).toBe(true)
     })
 
     describe('click "filter-by-followed" button', () => {
       it('calls TOGGLE_FILTER_BY_FOLLOWED', () => {
-        wrapper.find('.following-filter .sidebar .base-button').trigger('click')
+        wrapper.find('.following-filter .filter-list .follower-item .base-button').trigger('click')
         expect(mutations['posts/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34')
       })
     })
diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index 677e9a1d2..7c2c2a282 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -1,13 +1,15 @@
 <template>
   <filter-menu-section :divider="false" class="following-filter">
-    <template #sidebar>
-      <labeled-button
-        icon="user-plus"
-        :label="$t('filter-menu.following')"
-        :filled="filteredByUsersFollowed"
-        :title="$t('contribution.filterFollow')"
-        @click="toggleFilteredByFollowed(currentUser.id)"
-      />
+    <template #filter-follower>
+      <li class="item follower-item">
+        <labeled-button
+          icon="user-plus"
+          :label="$t('filter-menu.following')"
+          :filled="filteredByUsersFollowed"
+          :title="$t('contribution.filterFollow')"
+          @click="toggleFilteredByFollowed(currentUser.id)"
+        />
+      </li>
     </template>
   </filter-menu-section>
 </template>
diff --git a/webapp/components/FilterMenu/LanguagesFilter.spec.js b/webapp/components/FilterMenu/LanguagesFilter.spec.js
index d7998ce8f..41fc72ccd 100644
--- a/webapp/components/FilterMenu/LanguagesFilter.spec.js
+++ b/webapp/components/FilterMenu/LanguagesFilter.spec.js
@@ -1,70 +1,85 @@
 import { mount } from '@vue/test-utils'
-import Vuex from 'vuex'
-import locales from '~/locales'
-import orderBy from 'lodash/orderBy'
+// import Vuex from 'vuex'
+// import locales from '~/locales'
+// import orderBy from 'lodash/orderBy'
 import LanguagesFilter from './LanguagesFilter'
 const localVue = global.localVue
 
-let wrapper, englishButton, spanishButton
+// let wrapper, englishButton, spanishButton
 
-const languages = orderBy(locales, 'name')
-
-describe('LanguagesFilter.vue', () => {
-  const mutations = {
-    'posts/TOGGLE_LANGUAGE': jest.fn(),
-    'posts/RESET_LANGUAGES': jest.fn(),
-  }
-  const getters = {
-    'posts/filteredLanguageCodes': jest.fn(() => []),
-  }
-
-  const mocks = {
-    $t: jest.fn((string) => string),
-  }
+// const languages = orderBy(locales, 'name')
 
+describe('mount', () => {
+  let wrapper
   const Wrapper = () => {
-    const store = new Vuex.Store({ mutations, getters })
-    return mount(LanguagesFilter, { mocks, localVue, store })
+    return mount(LanguagesFilter, { localVue })
   }
 
   beforeEach(() => {
     wrapper = Wrapper()
   })
 
-  describe('mount', () => {
-    it('starts with all categories button active', () => {
-      const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button')
-      expect(allLanguagesButton.attributes().class).toContain('--filled')
-    })
-
-    it('sets language button attribute `filled` when corresponding language is filtered', () => {
-      getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es'])
-      const wrapper = Wrapper()
-      spanishButton = wrapper
-        .findAll('.languages-filter .item .base-button')
-        .at(languages.findIndex((l) => l.code === 'es'))
-      expect(spanishButton.attributes().class).toContain('--filled')
-    })
-
-    describe('click on an "language-button" button', () => {
-      it('calls TOGGLE_LANGUAGE when clicked', () => {
-        const wrapper = Wrapper()
-        englishButton = wrapper
-          .findAll('.languages-filter .item .base-button')
-          .at(languages.findIndex((l) => l.code === 'en'))
-        englishButton.trigger('click')
-        expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en')
-      })
-    })
-
-    describe('clears filter', () => {
-      it('when all button is clicked', async () => {
-        getters['posts/filteredLanguageCodes'] = jest.fn(() => ['en'])
-        wrapper = await Wrapper()
-        const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button')
-        allLanguagesButton.trigger('click')
-        expect(mutations['posts/RESET_LANGUAGES']).toHaveBeenCalledTimes(1)
-      })
-    })
+  it('renders button DIV', () => {
+    expect(wrapper.find('div').exists()).toBe(true)
   })
 })
+
+// describe('LanguagesFilter.vue', () => {
+//   const mutations = {
+//     'posts/TOGGLE_LANGUAGE': jest.fn(),
+//     'posts/RESET_LANGUAGES': jest.fn(),
+//   }
+//   const getters = {
+//     'posts/filteredLanguageCodes': jest.fn(() => []),
+//   }
+
+//   const mocks = {
+//     $t: jest.fn((string) => string),
+//   }
+
+//   const Wrapper = () => {
+//     const store = new Vuex.Store({ mutations, getters })
+//     return mount(LanguagesFilter, { mocks, localVue, store })
+//   }
+
+//   beforeEach(() => {
+//     wrapper = Wrapper()
+//   })
+
+//   describe('mount', () => {
+//     it('starts with all categories button active', () => {
+//       const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button')
+//       expect(allLanguagesButton.attributes().class).toContain('--filled')
+//     })
+
+//     it('sets language button attribute `filled` when corresponding language is filtered', () => {
+//       getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es'])
+//       const wrapper = Wrapper()
+//       spanishButton = wrapper
+//         .findAll('.languages-filter .item .base-button')
+//         .at(languages.findIndex((l) => l.code === 'es'))
+//       expect(spanishButton.attributes().class).toContain('--filled')
+//     })
+
+//     describe('click on an "language-button" button', () => {
+//       it('calls TOGGLE_LANGUAGE when clicked', () => {
+//         const wrapper = Wrapper()
+//         englishButton = wrapper
+//           .findAll('.languages-filter .item .base-button')
+//           .at(languages.findIndex((l) => l.code === 'en'))
+//         englishButton.trigger('click')
+//         expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en')
+//       })
+//     })
+
+//     describe('clears filter', () => {
+//       it('when all button is clicked', async () => {
+//         getters['posts/filteredLanguageCodes'] = jest.fn(() => ['en'])
+//         wrapper = await Wrapper()
+//         const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button')
+//         allLanguagesButton.trigger('click')
+//         expect(mutations['posts/RESET_LANGUAGES']).toHaveBeenCalledTimes(1)
+//       })
+//     })
+//   })
+// })
diff --git a/webapp/components/FilterMenu/LanguagesFilter.vue b/webapp/components/FilterMenu/LanguagesFilter.vue
index 10a6778a0..fc67eeb3f 100644
--- a/webapp/components/FilterMenu/LanguagesFilter.vue
+++ b/webapp/components/FilterMenu/LanguagesFilter.vue
@@ -1,7 +1,9 @@
 <template>
-  <filter-menu-section :title="$t('filter-menu.languages')" class="languages-filter">
-    <template #sidebar>
+  <div>
+    <!-- <filter-menu-section :title="$t('filter-menu.languages')" class="languages-filter">
+    <template>
       <labeled-button
+        class="filter-languages"
         :filled="!filteredLanguageCodes.length"
         :label="$t('filter-menu.all')"
         icon="check"
@@ -19,36 +21,37 @@
         </base-button>
       </li>
     </template>
-  </filter-menu-section>
+  </filter-menu-section> -->
+  </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
-import orderBy from 'lodash/orderBy'
-import locales from '~/locales'
-import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
-import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+// import { mapGetters, mapMutations } from 'vuex'
+// import orderBy from 'lodash/orderBy'
+// import locales from '~/locales'
+// import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
+// import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
-export default {
-  components: {
-    FilterMenuSection,
-    LabeledButton,
-  },
-  computed: {
-    ...mapGetters({
-      filteredLanguageCodes: 'posts/filteredLanguageCodes',
-    }),
-  },
-  methods: {
-    ...mapMutations({
-      resetLanguages: 'posts/RESET_LANGUAGES',
-      toggleLanguage: 'posts/TOGGLE_LANGUAGE',
-    }),
-  },
-  data() {
-    return {
-      locales: orderBy(locales, 'name'),
-    }
-  },
-}
+// export default {
+//   components: {
+//     FilterMenuSection,
+//     LabeledButton,
+//   },
+//   computed: {
+//     ...mapGetters({
+//       filteredLanguageCodes: 'posts/filteredLanguageCodes',
+//     }),
+//   },
+//   methods: {
+//     ...mapMutations({
+//       resetLanguages: 'posts/RESET_LANGUAGES',
+//       toggleLanguage: 'posts/TOGGLE_LANGUAGE',
+//     }),
+//   },
+//   data() {
+//     return {
+//       locales: orderBy(locales, 'name'),
+//     }
+//   },
+// }
 </script>
diff --git a/webapp/components/Group/GroupButton.vue b/webapp/components/Group/GroupButton.vue
new file mode 100644
index 000000000..db72467ef
--- /dev/null
+++ b/webapp/components/Group/GroupButton.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <nuxt-link to="/groups"><base-button icon="users" circle ghost /></nuxt-link>
+  </div>
+</template>
diff --git a/webapp/components/Group/GroupForm.spec.js b/webapp/components/Group/GroupForm.spec.js
new file mode 100644
index 000000000..0300bacd0
--- /dev/null
+++ b/webapp/components/Group/GroupForm.spec.js
@@ -0,0 +1,39 @@
+import { config, mount } from '@vue/test-utils'
+import GroupForm from './GroupForm.vue'
+
+const localVue = global.localVue
+
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+const propsData = {
+  update: false,
+  group: {},
+}
+
+describe('GroupForm', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      $env: {
+        CATEGORIES_ACTIVE: true,
+      },
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupForm, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-form')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
new file mode 100644
index 000000000..7b0f7840c
--- /dev/null
+++ b/webapp/components/Group/GroupForm.vue
@@ -0,0 +1,440 @@
+<template>
+  <div>
+    <ds-form
+      class="group-form"
+      ref="groupForm"
+      v-model="formData"
+      :schema="formSchema"
+      @submit="submit"
+    >
+      <!-- "errors" is only working if you use a submit event on the form -->
+      <template #default="{ errors }">
+        <!-- group Name -->
+        <ds-input
+          name="name"
+          :label="$t('group.name')"
+          model="name"
+          autofocus
+          :placeholder="`${$t('group.name')} …`"
+        />
+        <ds-chip size="base" :color="errors && errors.name ? 'danger' : 'medium'">
+          {{ `${formData.name.length} / ${formSchema.name.min}–${formSchema.name.max}` }}
+          <base-icon v-if="errors && errors.name" name="warning" />
+        </ds-chip>
+
+        <!-- group Slug -->
+        <ds-input
+          v-if="update"
+          :label="$t('group.labelSlug')"
+          model="slug"
+          icon="at"
+          :placeholder="`${$t('group.labelSlug')} …`"
+        ></ds-input>
+
+        <ds-space v-if="update" margin-top="small" />
+
+        <!-- groupType -->
+        <ds-text class="select-label">
+          {{ $t('group.type') }}
+        </ds-text>
+        <!-- TODO: change it has to be implemented later -->
+        <!-- TODO: move 'ds-select' from style guide to main code and implement missing translation etc. functionality -->
+        <select
+          class="select ds-input appearance--auto"
+          name="groupType"
+          model="groupType"
+          :value="formData.groupType"
+          :disabled="update"
+          @change="changeGroupType($event)"
+        >
+          <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
+            {{ $t(`group.types.${groupType}`) }}
+          </option>
+        </select>
+        <ds-chip
+          size="base"
+          :color="errors && errors.groupType && formData.groupType === '' ? 'danger' : 'medium'"
+        >
+          {{ `${formData.groupType === '' ? 0 : 1} / 1` }}
+          <base-icon
+            v-if="errors && errors.groupType && formData.groupType === ''"
+            name="warning"
+          />
+        </ds-chip>
+
+        <!-- goal -->
+        <ds-input
+          name="about"
+          :label="$t('group.goal')"
+          v-model="formData.about"
+          :placeholder="$t('group.goal') + ' …'"
+          rows="3"
+        />
+
+        <ds-space margin-top="small" />
+
+        <!-- description -->
+        <ds-text class="select-label">
+          {{ $t('group.description') }}
+        </ds-text>
+        <editor
+          name="description"
+          model="description"
+          :users="null"
+          :value="formData.description"
+          :hashtags="null"
+          @input="updateEditorDescription"
+        />
+        <ds-chip size="base" :color="errors && errors.description ? 'danger' : 'medium'">
+          {{ `${descriptionLength} / ${formSchema.description.min}` }}
+          <base-icon v-if="errors && errors.description" name="warning" />
+        </ds-chip>
+
+        <!-- actionRadius -->
+        <ds-text class="select-label">
+          {{ $t('group.actionRadius') }}
+        </ds-text>
+        <!-- TODO: move 'ds-select' from styleguide to main code and implement missing translation etc. functionality -->
+        <select
+          class="select ds-input appearance--auto"
+          name="actionRadius"
+          :value="formData.actionRadius"
+          @change="changeActionRadius($event)"
+        >
+          <option
+            v-for="actionRadius in actionRadiusOptions"
+            :key="actionRadius"
+            :value="actionRadius"
+          >
+            {{ $t(`group.actionRadii.${actionRadius}`) }}
+          </option>
+        </select>
+        <ds-chip
+          size="base"
+          :color="
+            errors && errors.actionRadius && formData.actionRadius === '' ? 'danger' : 'medium'
+          "
+        >
+          {{ `${formData.actionRadius === '' ? 0 : 1} / 1` }}
+          <base-icon
+            v-if="errors && errors.actionRadius && formData.actionRadius === ''"
+            name="warning"
+          />
+        </ds-chip>
+
+        <!-- location -->
+        <ds-select
+          id="city"
+          :label="$t('settings.data.labelCity') + locationNameLabelAddOnOldName"
+          v-model="formData.locationName"
+          :options="cities"
+          icon="map-marker"
+          :icon-right="null"
+          :placeholder="$t('settings.data.labelCity') + ' …'"
+          :loading="loadingGeo"
+          @input.native="handleCityInput"
+        />
+        <base-button
+          v-if="formLocationName !== ''"
+          icon="close"
+          ghost
+          size="small"
+          style="position: relative; display: inline-block; right: -96%; top: -33px; width: 26px"
+          @click="formData.locationName = ''"
+        ></base-button>
+
+        <ds-space margin-top="small" />
+
+        <!-- category -->
+        <categories-select
+          v-if="categoriesActive"
+          model="categoryIds"
+          name="categoryIds"
+          :existingCategoryIds="formData.categoryIds"
+        />
+        <ds-chip
+          v-if="categoriesActive"
+          size="base"
+          :color="errors && errors.categoryIds ? 'danger' : 'medium'"
+        >
+          {{ formData.categoryIds.length }} / 3
+          <base-icon v-if="errors && errors.categoryIds" name="warning" />
+        </ds-chip>
+
+        <!-- submit -->
+        <ds-space margin-top="large">
+          <nuxt-link to="/groups">
+            <ds-button>{{ $t('actions.cancel') }}</ds-button>
+          </nuxt-link>
+          <ds-button type="submit" icon="save" primary :disabled="checkFormError(errors)" fill>
+            {{ update ? $t('group.update') : $t('group.save') }}
+          </ds-button>
+        </ds-space>
+      </template>
+    </ds-form>
+  </div>
+</template>
+
+<script>
+import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
+import {
+  NAME_LENGTH_MIN,
+  NAME_LENGTH_MAX,
+  DESCRIPTION_WITHOUT_HTML_LENGTH_MIN,
+} from '~/constants/groups.js'
+import Editor from '~/components/Editor/Editor'
+import { queryLocations } from '~/graphql/location'
+
+let timeout
+
+export default {
+  name: 'GroupForm',
+  components: {
+    CategoriesSelect,
+    Editor,
+  },
+  props: {
+    update: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    group: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    const { name, slug, groupType, about, description, actionRadius, locationName, categories } =
+      this.group
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+      disabled: false,
+      groupTypeOptions: ['public', 'closed', 'hidden'],
+      actionRadiusOptions: ['regional', 'national', 'continental', 'global'],
+      loadingGeo: false,
+      cities: [],
+      formData: {
+        name: name || '',
+        slug: slug || '',
+        groupType: groupType || '',
+        about: about || '',
+        description: description || '',
+        // from database 'locationName' comes as "string | null"
+        // 'formData.locationName':
+        //   see 'created': tries to set it to a "requestGeoData" object and fills the menu if possible
+        //   if user selects one from menu we get a "requestGeoData" object here
+        //   "requestGeoData" object: "{ id: String, label: String, value: String }"
+        //   otherwise it's a string: empty or none empty
+        locationName: locationName || '',
+        actionRadius: actionRadius || '',
+        categoryIds: categories ? categories.map((category) => category.id) : [],
+      },
+      formSchema: {
+        name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
+        slug: { required: false, min: NAME_LENGTH_MIN },
+        groupType: { required: true, min: 1 },
+        about: { required: false },
+        description: {
+          type: 'string',
+          required: true,
+          min: DESCRIPTION_WITHOUT_HTML_LENGTH_MIN,
+          validator: (_, value = '') => {
+            if (this.$filters.removeHtml(value).length < this.formSchema.description.min) {
+              return [new Error()]
+            }
+            return []
+          },
+        },
+        actionRadius: { required: true, min: 1 },
+        locationName: { required: false },
+        categoryIds: {
+          type: 'array',
+          required: this.categoriesActive,
+          validator: (_, value = []) => {
+            if (
+              this.categoriesActive &&
+              (value.length < CATEGORIES_MIN || value.length > CATEGORIES_MAX)
+            ) {
+              return [new Error(this.$t('common.validations.categories'))]
+            }
+            return []
+          },
+        },
+      },
+    }
+  },
+  async created() {
+    // set to "requestGeoData" object and fill select menu if possible
+    this.formData.locationName =
+      (await this.requestGeoData(this.formLocationName)) || this.formLocationName
+  },
+  computed: {
+    formLocationName() {
+      const isNestedValue =
+        typeof this.formData.locationName === 'object' &&
+        typeof this.formData.locationName.value === 'string'
+      const isDirectString = typeof this.formData.locationName === 'string'
+      return isNestedValue
+        ? this.formData.locationName.value
+        : isDirectString
+        ? this.formData.locationName
+        : ''
+    },
+    locationNameLabelAddOnOldName() {
+      return this.formLocationName !== '' ? ' — ' + this.formLocationName : ''
+    },
+    descriptionLength() {
+      return this.$filters.removeHtml(this.formData.description).length
+    },
+    sameLocation() {
+      const dbLocationName = this.group.locationName || ''
+      return dbLocationName === this.formLocationName
+    },
+    sameCategories() {
+      if (this.group.categories.length !== this.formData.categoryIds.length) return false
+      const groupCategories = []
+      this.group.categories.forEach((categories) => {
+        groupCategories.push(categories.id)
+        const some = this.formData.categoryIds.some((item) => item === categories.id)
+        if (!some) return false
+      })
+
+      return true
+    },
+    disableButtonByUpdate() {
+      if (!this.update) return true
+      return (
+        this.group.name === this.formData.name &&
+        this.group.slug === this.formData.slug &&
+        this.group.about === this.formData.about &&
+        this.group.description === this.formData.description &&
+        this.group.actionRadius === this.formData.actionRadius &&
+        this.sameLocation &&
+        this.sameCategories
+      )
+    },
+  },
+  methods: {
+    checkFormError(error) {
+      if (!this.update && error && !!error && this.disableButtonByUpdate) return true
+      if (this.update && !error && this.disableButtonByUpdate) return true
+      return false
+    },
+    changeGroupType(event) {
+      this.formData.groupType = event.target.value
+    },
+    changeActionRadius(event) {
+      this.formData.actionRadius = event.target.value
+    },
+    updateEditorDescription(value) {
+      this.$refs.groupForm.update('description', value)
+    },
+    submit() {
+      const { name, slug, about, description, groupType, actionRadius, categoryIds } = this.formData
+      const variables = {
+        name,
+        slug,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        locationName: this.formLocationName,
+        categoryIds,
+      }
+      this.update
+        ? this.$emit('updateGroup', {
+            ...variables,
+            id: this.group.id,
+          })
+        : this.$emit('createGroup', variables)
+    },
+    handleCityInput(event) {
+      clearTimeout(timeout)
+      timeout = setTimeout(
+        () => this.requestGeoData(event.target ? event.target.value.trim() : ''),
+        500,
+      )
+    },
+    processLocationsResult(places) {
+      if (!places.length) {
+        return []
+      }
+      const result = []
+      places.forEach((place) => {
+        result.push({
+          label: place.place_name,
+          value: place.place_name,
+          id: place.id,
+        })
+      })
+
+      return result
+    },
+    async requestGeoData(value) {
+      if (value === '') {
+        this.cities = []
+        return
+      }
+      this.loadingGeo = true
+
+      const place = encodeURIComponent(value)
+      const lang = this.$i18n.locale()
+
+      const {
+        data: { queryLocations: result },
+      } = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
+
+      this.cities = this.processLocationsResult(result)
+      this.loadingGeo = false
+
+      return this.cities.find((city) => city.value === value)
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.appearance--auto {
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  appearance: auto;
+}
+
+.select-label {
+  margin-bottom: 0;
+  padding-bottom: 4px;
+  color: #70677e;
+  font-size: 1rem;
+}
+
+.textarea-label {
+  padding-bottom: 14px;
+}
+
+.group-form {
+  display: flex;
+  flex-direction: column;
+
+  > .ds-form-item {
+    margin: 0;
+  }
+
+  > .ds-chip {
+    align-self: flex-end;
+    margin: $space-xx-small 0 $space-base;
+    cursor: default;
+  }
+
+  > .select-field {
+    align-self: flex-end;
+  }
+
+  > .buttons {
+    align-self: flex-end;
+    margin-top: $space-base;
+  }
+}
+</style>
diff --git a/webapp/components/Group/GroupLink.vue b/webapp/components/Group/GroupLink.vue
new file mode 100644
index 000000000..4fcc7983d
--- /dev/null
+++ b/webapp/components/Group/GroupLink.vue
@@ -0,0 +1,15 @@
+<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>
+  </div>
+</template>
+<script>
+export default {
+  name: 'GroupLink',
+}
+</script>
diff --git a/webapp/components/Group/GroupList.spec.js b/webapp/components/Group/GroupList.spec.js
new file mode 100644
index 000000000..ca6909de7
--- /dev/null
+++ b/webapp/components/Group/GroupList.spec.js
@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils'
+import GroupList from './GroupList.vue'
+
+const localVue = global.localVue
+
+const propsData = {
+  groups: [],
+}
+
+describe('GroupList', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupList, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-list')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
new file mode 100644
index 000000000..7618e5b57
--- /dev/null
+++ b/webapp/components/Group/GroupList.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="group-list">
+    <ds-space margin-bottom="small" v-for="group in groups" :key="group.id">
+      <group-teaser :group="group" />
+    </ds-space>
+  </div>
+</template>
+
+<script>
+import GroupTeaser from '~/components/Group/GroupTeaser'
+
+export default {
+  name: 'GroupList',
+  components: {
+    GroupTeaser,
+  },
+  props: {
+    groups: { type: Array, default: () => [] },
+  },
+}
+</script>
diff --git a/webapp/components/Group/GroupMember.spec.js b/webapp/components/Group/GroupMember.spec.js
new file mode 100644
index 000000000..0c0b46e43
--- /dev/null
+++ b/webapp/components/Group/GroupMember.spec.js
@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import GroupMember from './GroupMember.vue'
+
+const localVue = global.localVue
+
+const propsData = {
+  groupId: '',
+  groupMembers: [],
+}
+
+describe('GroupMember', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupMember, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-member')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
new file mode 100644
index 000000000..db5635c1f
--- /dev/null
+++ b/webapp/components/Group/GroupMember.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="group-member">
+    <base-card>
+      <h2 class="title">{{ $t('group.addUser') }}</h2>
+      <ds-form v-model="form" @submit="submit">
+        <ds-flex gutter="small">
+          <ds-flex-item width="90%">
+            <ds-input
+              name="query"
+              model="query"
+              :placeholder="$t('group.addUserPlaceholder')"
+              icon="search"
+            />
+          </ds-flex-item>
+          <ds-flex-item width="30px">
+            <!-- <base-button filled circle type="submit" icon="search" :loading="$apollo.loading" /> -->
+            <base-button filled circle type="submit" icon="search" />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-form>
+      <div v-if="noSlug">Kein User mit diesem Slug gefunden!</div>
+      <div v-if="slugUser.length > 0">
+        <ds-space margin="base" />
+        <ds-flex>
+          <ds-flex-item>
+            <ds-avatar online size="small" :name="slugUser[0].name"></ds-avatar>
+          </ds-flex-item>
+          <ds-flex-item>{{ slugUser[0].name }}</ds-flex-item>
+          <ds-flex-item>{{ slugUser[0].slug }}</ds-flex-item>
+          <ds-flex-item>
+            <ds-button size="small" primary @click="addMemberToGroup(slugUser)">
+              {{ $t('group.addMemberToGroup') }}
+            </ds-button>
+          </ds-flex-item>
+        </ds-flex>
+        <ds-space margin="base" />
+      </div>
+    </base-card>
+    <ds-table :fields="tableFields" :data="groupMembers" condensed>
+      <template #avatar="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <ds-avatar online size="small" :name="scope.row.name"></ds-avatar>
+        </nuxt-link>
+      </template>
+      <template #name="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <ds-text>
+            <b>{{ scope.row.name | truncate(20) }}</b>
+          </ds-text>
+        </nuxt-link>
+      </template>
+      <template #slug="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <ds-text>
+            <b>{{ `@${scope.row.slug}` | truncate(20) }}</b>
+          </ds-text>
+        </nuxt-link>
+      </template>
+      <template #roleInGroup="scope">
+        <select
+          v-if="scope.row.myRoleInGroup !== 'owner'"
+          :options="['pending', 'usual', 'admin', 'owner']"
+          :value="`${scope.row.myRoleInGroup}`"
+          @change="changeMemberRole(scope.row.id, $event)"
+        >
+          <option v-for="role in ['pending', 'usual', 'admin', 'owner']" :key="role" :value="role">
+            {{ $t(`group.roles.${role}`) }}
+          </option>
+        </select>
+        <ds-chip v-else color="primary">
+          {{ $t(`group.roles.${scope.row.myRoleInGroup}`) }}
+        </ds-chip>
+      </template>
+      <template #edit="scope">
+        <ds-button v-if="scope.row.myRoleInGroup !== 'owner'" size="small" primary disabled>
+          <!-- TODO: implement removal of group members -->
+          <!--           :disabled="scope.row.myRoleInGroup === 'owner'"
+ -->
+          {{ $t('group.removeMemberButton') }}
+        </ds-button>
+      </template>
+    </ds-table>
+    <!-- TODO: implement removal of group members -->
+    <!-- TODO: change to ocelot.social modal -->
+    <!-- <ds-modal
+      v-if="isOpen"
+      v-model="isOpen"
+      :title="`${$t('group.removeMember')}`"
+      force
+      extended
+      :confirm-label="$t('group.removeMember')"
+      :cancel-label="$t('actions.cancel')"
+      @confirm="deleteMember(memberId)"
+    /> -->
+  </div>
+</template>
+<script>
+import { minimisedUserQuery } from '~/graphql/User'
+import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
+
+export default {
+  name: 'GroupMember',
+  props: {
+    groupId: {
+      type: String,
+      required: true,
+    },
+    groupMembers: {
+      type: Array,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+      memberId: null,
+      noSlug: false,
+      slugUser: [],
+      form: {
+        query: '',
+      },
+    }
+  },
+  computed: {
+    tableFields() {
+      return {
+        avatar: {
+          label: this.$t('group.membersAdministrationList.avatar'),
+          align: 'left',
+        },
+        name: {
+          label: this.$t('group.membersAdministrationList.name'),
+          align: 'left',
+        },
+        slug: {
+          label: this.$t('group.membersAdministrationList.slug'),
+          align: 'left',
+        },
+        roleInGroup: {
+          label: this.$t('group.membersAdministrationList.roleInGroup'),
+          align: 'left',
+        },
+        edit: {
+          label: '',
+          align: 'left',
+        },
+      }
+    },
+  },
+  methods: {
+    async changeMemberRole(id, event) {
+      const newRole = event.target.value
+      try {
+        await this.$apollo.mutate({
+          mutation: changeGroupMemberRoleMutation(),
+          variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
+        })
+        this.$toast.success(
+          this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
+        )
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
+    async addMemberToGroup() {
+      const newRole = 'usual'
+      try {
+        await this.$apollo.mutate({
+          mutation: changeGroupMemberRoleMutation(),
+          variables: { groupId: this.groupId, userId: this.slugUser[0].id, roleInGroup: newRole },
+        })
+        // this.$apollo.queries.GroupMembers.refetch()
+        this.$emit('loadGroupMembers')
+        this.slugUser = []
+        this.form.query = ''
+        this.$toast.success(
+          this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
+        )
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
+    async submit() {
+      try {
+        const {
+          data: { User },
+        } = await this.$apollo.query({
+          query: minimisedUserQuery(),
+          variables: {
+            slug: this.form.query,
+          },
+        })
+        if (User.length === 0) {
+          this.noSlug = true
+        } else {
+          this.noSlug = false
+          this.slugUser = User
+        }
+      } catch (error) {
+        this.noSlug = true
+      } finally {
+      }
+    },
+  },
+}
+</script>
diff --git a/webapp/components/Group/GroupTeaser.vue b/webapp/components/Group/GroupTeaser.vue
new file mode 100644
index 000000000..791845c75
--- /dev/null
+++ b/webapp/components/Group/GroupTeaser.vue
@@ -0,0 +1,178 @@
+<template>
+  <nuxt-link
+    class="group-teaser"
+    :to="{ name: 'group-id-slug', params: { id: group.id, slug: group.slug } }"
+  >
+    <base-card
+      :class="{
+        'disabled-content': group.disabled,
+      }"
+    >
+      <h2 class="title hyphenate-text">{{ group.name }}</h2>
+      <div class="slug-location">
+        <!-- group slug -->
+        <div>
+          <ds-text color="soft">
+            <!-- <base-icon name="at" data-test="ampersand" /> -->
+            {{ `&${group.slug}` }}
+          </ds-text>
+        </div>
+        <!-- group location -->
+        <div class="location-item">
+          <ds-text v-if="group && group.location" color="soft">
+            <base-icon name="map-marker" />
+            {{ group && group.location ? group.location.name : '' }}
+          </ds-text>
+        </div>
+      </div>
+      <!-- TODO: replace editor content with tiptap render view -->
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div class="content hyphenate-text" v-html="descriptionExcerpt" />
+      <footer class="footer">
+        <div>
+          <!-- group my role in group -->
+          <ds-chip v-if="group && group.myRole" color="primary">
+            {{ group && group.myRole ? $t('group.roles.' + group.myRole) : '' }}
+          </ds-chip>
+          <!-- group type -->
+          <ds-chip color="primary">
+            {{ group && group.groupType ? $t('group.types.' + group.groupType) : '' }}
+          </ds-chip>
+          <!-- group action radius -->
+          <ds-chip color="primary">
+            {{ group && group.actionRadius ? $t('group.actionRadii.' + group.actionRadius) : '' }}
+          </ds-chip>
+        </div>
+        <!-- group categories -->
+        <div class="categories" v-if="categoriesActive">
+          <category
+            v-for="category in group.categories"
+            :key="category.id"
+            v-tooltip="{
+              content: $t(`contribution.category.description.${category.slug}`),
+              placement: 'bottom-start',
+            }"
+            :icon="category.icon"
+          />
+        </div>
+        <div v-else class="categories-placeholder"></div>
+        <!-- group context menu -->
+        <client-only>
+          <group-content-menu :usage="'groupTeaser'" :group="group || {}" placement="bottom-end" />
+        </client-only>
+      </footer>
+      <footer class="footer">
+        <!-- group goal -->
+        <div class="labeled-chip">
+          <ds-text class="label-text hyphenate-text" color="soft" size="small">
+            {{ $t('group.goal') }}
+          </ds-text>
+          <div class="chip">
+            <ds-chip v-if="group && group.about">{{ group ? group.about : '' }}</ds-chip>
+          </div>
+        </div>
+      </footer>
+    </base-card>
+  </nuxt-link>
+</template>
+
+<script>
+import Category from '~/components/Category'
+import GroupContentMenu from '~/components/ContentMenu/GroupContentMenu'
+
+export default {
+  name: 'GroupTeaser',
+  components: {
+    Category,
+    GroupContentMenu,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    width: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  computed: {
+    descriptionExcerpt() {
+      return this.$filters.removeLinks(this.group.descriptionExcerpt)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.group-teaser,
+.group-teaser:hover,
+.group-teaser:active {
+  position: relative;
+  display: block;
+  height: 100%;
+  color: $text-color-base;
+
+  > .ribbon {
+    position: absolute;
+    top: 50%;
+    right: -7px;
+  }
+}
+
+.group-teaser > .base-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  > .title {
+    font-size: 32px;
+  }
+
+  > .slug-location {
+    display: flex;
+    margin-bottom: $space-small;
+
+    > .location-item {
+      margin-left: $space-small;
+    }
+  }
+
+  > .content {
+    flex-grow: 1;
+    margin-bottom: $space-small;
+  }
+
+  > .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    > .categories-placeholder {
+      flex-grow: 1;
+    }
+
+    > .labeled-chip {
+      margin-top: $space-xx-small;
+
+      > .chip {
+        margin-top: -$space-small + $space-x-small;
+      }
+    }
+
+    > .content-menu {
+      position: relative;
+      z-index: $z-index-post-teaser-link;
+    }
+  }
+
+  .user-teaser {
+    margin-bottom: $space-small;
+  }
+}
+</style>
diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
new file mode 100644
index 000000000..9db597e03
--- /dev/null
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -0,0 +1,314 @@
+<template>
+  <ds-container class="main-navigation-container" style="padding: 10px 10px">
+    <div>
+      <!-- header menu -->
+      <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
+        <!-- logo -->
+        <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
+          <a
+            v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
+            :href="LOGOS.LOGO_HEADER_CLICK.externalLink.url"
+            :target="LOGOS.LOGO_HEADER_CLICK.externalLink.target"
+          >
+            <logo logoType="header" />
+          </a>
+          <nuxt-link
+            v-else
+            :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
+            v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
+          >
+            <logo logoType="header" />
+          </nuxt-link>
+        </ds-flex-item>
+        <!-- dynamic-brand-menu -->
+        <ds-flex-item
+          v-for="item in menu"
+          :key="item.name"
+          class="branding-menu"
+          :width="{ base: 'auto' }"
+          style="margin-right: 20px"
+        >
+          <a v-if="item.url" :href="item.url" :target="item.target">
+            <ds-text size="large" bold>
+              {{ $t(item.nameIdent) }}
+            </ds-text>
+          </a>
+          <nuxt-link v-else :to="item.path">
+            <ds-text size="large" bold>
+              {{ $t(item.nameIdent) }}
+            </ds-text>
+          </nuxt-link>
+        </ds-flex-item>
+
+        <!-- search-field -->
+        <ds-flex-item
+          v-if="isLoggedIn"
+          id="nav-search-box"
+          class="header-search"
+          :width="{
+            base: '45%',
+            sm: '40%',
+            md: isHeaderMenu ? 'auto' : '40%',
+            lg: isHeaderMenu ? 'auto' : '50%',
+          }"
+          style="flex-shrink: 0; flex-grow: 1"
+        >
+          <search-field />
+        </ds-flex-item>
+        <!-- filter-menu 
+                TODO: Filter is only visible on index    
+            -->
+        <ds-flex-item v-if="isLoggedIn" style="flex-grow: 0; flex-basis: auto">
+          <client-only>
+            <filter-menu v-show="showFilterMenuDropdown" />
+          </client-only>
+        </ds-flex-item>
+        <!-- locale-switch -->
+        <ds-flex-item style="flex-basis: auto">
+          <div class="main-navigation-right" style="flex-basis: auto">
+            <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
+            <template v-if="isLoggedIn">
+              <client-only>
+                <!-- notification-menu -->
+                <notification-menu placement="top" />
+              </client-only>
+              <div v-if="inviteRegistration">
+                <client-only>
+                  <!-- invite-button -->
+                  <invite-button placement="top" />
+                </client-only>
+              </div>
+              <!-- group button -->
+              <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
+                <group-button />
+              </client-only>
+              <!-- avatar-menu -->
+              <client-only>
+                <avatar-menu placement="top" />
+              </client-only>
+            </template>
+          </div>
+        </ds-flex-item>
+      </ds-flex>
+
+      <!-- mobile header menu -->
+      <div v-else class="mobil-header-box">
+        <!-- logo, hamburger-->
+        <ds-flex>
+          <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
+            <a
+              v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
+              :href="LOGOS.LOGO_HEADER_CLICK.externalLink.url"
+              :target="LOGOS.LOGO_HEADER_CLICK.externalLink.target"
+            >
+              <logo logoType="header" />
+            </a>
+            <nuxt-link
+              v-else
+              :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
+              v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
+            >
+              <logo logoType="header" />
+            </nuxt-link>
+          </ds-flex-item>
+
+          <!-- hamburger button -->
+          <ds-flex-item class="mobile-hamburger-menu">
+            <client-only>
+              <div style="display: inline-flex; padding-right: 20px">
+                <notification-menu />
+              </div>
+            </client-only>
+            <base-button icon="bars" @click="toggleMobileMenuView" circle />
+          </ds-flex-item>
+        </ds-flex>
+        <!-- search, filter-->
+        <ds-flex class="mobile-menu">
+          <!-- search-field mobile-->
+          <ds-flex-item
+            v-if="isLoggedIn"
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="padding: 20px"
+          >
+            <search-field />
+          </ds-flex-item>
+          <!-- filter menu mobile-->
+          <ds-flex-item
+            v-if="isLoggedIn"
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
+          >
+            <client-only>
+              <filter-menu v-show="showFilterMenuDropdown" :showMobileMenu="showMobileMenu" />
+            </client-only>
+          </ds-flex-item>
+        </ds-flex>
+        <!-- switch language, notification, invite, profil -->
+        <ds-flex style="margin: 0 20px">
+          <!-- locale-switch mobile-->
+          <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
+            <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
+          </ds-flex-item>
+          <!-- invite-button mobile-->
+          <ds-flex-item
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="text-align: center"
+          >
+            <client-only>
+              <invite-button placement="top" />
+            </client-only>
+          </ds-flex-item>
+          <!-- group button -->
+          <ds-flex-item
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="text-align: center"
+          >
+            <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
+              <group-button />
+            </client-only>
+          </ds-flex-item>
+          <!-- avatar-menu mobile-->
+          <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end">
+            <client-only>
+              <avatar-menu placement="top" />
+            </client-only>
+          </ds-flex-item>
+        </ds-flex>
+        <div :class="{ 'hide-mobile-menu': !toggleMobileMenu }" class="mobile-menu footer-mobile">
+          <!-- dynamic branding menu  -->
+          <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
+            <li v-for="item in menu" :key="item.name">
+              <a v-if="item.url" :href="item.url" :target="item.target">
+                <ds-text size="large" bold>
+                  {{ $t(item.nameIdent) }}
+                </ds-text>
+              </a>
+              <nuxt-link v-else :to="item.path">
+                <ds-text size="large" bold>
+                  {{ $t(item.nameIdent) }}
+                </ds-text>
+              </nuxt-link>
+            </li>
+          </ul>
+          <hr />
+          <!-- dynamic footer menu in header  -->
+          <ul class="dynamic-footer-mobil">
+            <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
+              <page-params-link :pageParams="pageParams">
+                {{ $t(pageParams.internalPage.footerIdent) }}
+              </page-params-link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </ds-container>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
+import LOGOS from '~/constants/logos.js'
+import headerMenu from '~/constants/headerMenu.js'
+import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
+import GroupButton from '~/components/Group/GroupButton'
+import InviteButton from '~/components/InviteButton/InviteButton'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import Logo from '~/components/Logo/Logo'
+import SearchField from '~/components/features/SearchField/SearchField.vue'
+import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
+import links from '~/constants/links.js'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
+
+export default {
+  components: {
+    AvatarMenu,
+    FilterMenu,
+    GroupButton,
+    InviteButton,
+    LocaleSwitch,
+    Logo,
+    NotificationMenu,
+    PageParamsLink,
+    SearchField,
+  },
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      links,
+      LOGOS,
+      SHOW_GROUP_BUTTON_IN_HEADER,
+      isHeaderMenu: headerMenu.MENU.length > 0,
+      menu: headerMenu.MENU,
+      mobileSearchVisible: false,
+      toggleMobileMenu: false,
+      inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      isLoggedIn: 'auth/isLoggedIn',
+    }),
+    showFilterMenuDropdown() {
+      const [firstRoute] = this.$route.matched
+      return firstRoute && firstRoute.name === 'index'
+    },
+  },
+  methods: {
+    toggleMobileMenuView() {
+      this.toggleMobileMenu = !this.toggleMobileMenu
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.margin-right-20 {
+  margin-right: 20px;
+}
+.margin-x {
+  margin-left: 20px;
+  margin-right: 20px;
+  white-space: nowrap;
+}
+.topbar-locale-switch {
+  display: flex;
+  margin-right: $space-xx-small;
+  align-self: center;
+  display: inline-flex;
+}
+.main-navigation-flex {
+  align-items: center;
+}
+.main-navigation-right {
+  display: flex;
+  justify-content: flex-end;
+}
+.main-navigation-right .desktop-view {
+  float: right;
+}
+.ds-flex-item.mobile-hamburger-menu {
+  margin-left: auto;
+  text-align: right;
+}
+.mobile-menu {
+  margin: 0 20px;
+}
+.mobile-search {
+  margin-top: 20px;
+}
+.dynamic-branding-mobil,
+.dynamic-footer-mobil {
+  line-height: 30px;
+  font-size: large;
+}
+.dynamic-branding-mobil li {
+  margin: 17px 0;
+}
+.hide-mobile-menu {
+  display: none;
+}
+</style>
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index 47e53028b..2535ca145 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -82,7 +82,7 @@ export default {
       try {
         await this.$apollo.mutate({
           mutation: gql`
-            mutation($id: ID!, $locale: String) {
+            mutation ($id: ID!, $locale: String) {
               UpdateUser(id: $id, locale: $locale) {
                 id
                 locale
@@ -117,7 +117,7 @@ export default {
   align-items: center;
   height: 100%;
   padding: $space-xx-small;
-  color: $text-color-soft;
+  color: $color-locale-menu;
 
   > .label {
     margin: 0 $space-xx-small;
diff --git a/webapp/components/LoginForm/LoginForm.spec.js b/webapp/components/LoginForm/LoginForm.spec.js
index 430fdbe21..10fc2c622 100644
--- a/webapp/components/LoginForm/LoginForm.spec.js
+++ b/webapp/components/LoginForm/LoginForm.spec.js
@@ -12,6 +12,8 @@ config.stubs['nuxt-link'] = '<span><slot /></span>'
 config.stubs['locale-switch'] = '<span><slot /></span>'
 config.stubs['client-only'] = '<span><slot /></span>'
 
+const authUserMock = jest.fn().mockReturnValue({ activeCategories: [] })
+
 describe('LoginForm', () => {
   let mocks
   let propsData
@@ -26,10 +28,15 @@ describe('LoginForm', () => {
       storeMocks = {
         getters: {
           'auth/pending': () => false,
+          'auth/user': authUserMock,
         },
         actions: {
           'auth/login': jest.fn(),
         },
+        mutations: {
+          'posts/TOGGLE_CATEGORY': jest.fn(),
+          'posts/RESET_CATEGORIES': jest.fn(),
+        },
       }
       const store = new Vuex.Store(storeMocks)
       mocks = {
@@ -43,20 +50,46 @@ describe('LoginForm', () => {
     }
 
     describe('fill in email and password and submit', () => {
-      const fillIn = (wrapper, opts = {}) => {
+      const fillIn = async (wrapper, opts = {}) => {
         const { email = 'email@example.org', password = '1234' } = opts
         wrapper.find('input[name="email"]').setValue(email)
         wrapper.find('input[name="password"]').setValue(password)
-        wrapper.find('form').trigger('submit')
+        await wrapper.find('form').trigger('submit')
       }
 
-      it('dispatches login with form data', () => {
-        fillIn(Wrapper())
+      it('dispatches login with form data', async () => {
+        await fillIn(Wrapper())
         expect(storeMocks.actions['auth/login']).toHaveBeenCalledWith(expect.any(Object), {
           email: 'email@example.org',
           password: '1234',
         })
       })
+
+      describe('setting saved categories', () => {
+        beforeEach(() => {
+          jest.clearAllMocks()
+        })
+
+        describe('no categories saved', () => {
+          it('resets the categories', async () => {
+            await fillIn(Wrapper())
+            expect(storeMocks.mutations['posts/RESET_CATEGORIES']).toBeCalled()
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).not.toBeCalled()
+          })
+        })
+
+        describe('categories saved', () => {
+          it('sets the categories', async () => {
+            authUserMock.mockReturnValue({ activeCategories: ['cat1', 'cat9', 'cat12'] })
+            await fillIn(Wrapper())
+            expect(storeMocks.mutations['posts/RESET_CATEGORIES']).toBeCalled()
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledTimes(3)
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat1')
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat9')
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat12')
+          })
+        })
+      })
     })
 
     describe('Visibility of password', () => {
diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 0d85ca33a..59a6d7a24 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -58,6 +58,7 @@ import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParams
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
 import ShowPassword from '../ShowPassword/ShowPassword.vue'
+import { mapGetters, mapMutations } from 'vuex'
 
 export default {
   components: {
@@ -84,12 +85,27 @@ export default {
     iconName() {
       return this.showPassword ? 'eye-slash' : 'eye'
     },
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
   },
   methods: {
+    ...mapMutations({
+      toggleCategory: 'posts/TOGGLE_CATEGORY',
+      resetCategories: 'posts/RESET_CATEGORIES',
+    }),
     async onSubmit() {
       const { email, password } = this.form
       try {
         await this.$store.dispatch('auth/login', { email, password })
+        if (this.currentUser && this.currentUser.activeCategories) {
+          this.resetCategories()
+          if (this.currentUser.activeCategories.length > 0) {
+            this.currentUser.activeCategories.forEach((categoryId) => {
+              this.toggleCategory(categoryId)
+            })
+          }
+        }
         this.$toast.success(this.$t('login.success'))
         this.$emit('success')
       } catch (err) {
diff --git a/webapp/components/Logo/Logo.vue b/webapp/components/Logo/Logo.vue
index ed5c147e8..3d7d336ce 100644
--- a/webapp/components/Logo/Logo.vue
+++ b/webapp/components/Logo/Logo.vue
@@ -59,7 +59,11 @@ export default {
   },
   data() {
     const logosObject = {
-      header: { path: logos.LOGO_HEADER_PATH, alt: 'Header', widthDefault: '130px' },
+      header: {
+        path: logos.LOGO_HEADER_PATH,
+        alt: 'Header',
+        widthDefault: logos.LOGO_HEADER_WIDTH,
+      },
       welcome: { path: logos.LOGO_WELCOME_PATH, alt: 'Welcome', widthDefault: '200px' },
       signup: { path: logos.LOGO_SIGNUP_PATH, alt: 'Sign Up', widthDefault: '200px' },
       logout: { path: logos.LOGO_LOGOUT_PATH, alt: 'Logging Out', widthDefault: '200px' },
@@ -107,7 +111,6 @@ export default {
 }
 
 .ds-logo-svg {
-  width: 130px;
   height: auto;
   fill: #000000;
 }
diff --git a/webapp/components/Logo/style.scss b/webapp/components/Logo/style.scss
index 305e907c5..69897422f 100644
--- a/webapp/components/Logo/style.scss
+++ b/webapp/components/Logo/style.scss
@@ -8,10 +8,4 @@
 
 .ds-logo-inverse {
   color: $text-color-primary-inverse;
-}
-
-.ds-logo-svg {
-  width: 130px;
-  height: auto;
-  fill: currentColor;
 }
\ No newline at end of file
diff --git a/webapp/components/Modal/DeleteUserModal.vue b/webapp/components/Modal/DeleteUserModal.vue
index 87aa557d8..8618582ee 100644
--- a/webapp/components/Modal/DeleteUserModal.vue
+++ b/webapp/components/Modal/DeleteUserModal.vue
@@ -127,7 +127,7 @@ export default {
       this.$apollo
         .mutate({
           mutation: gql`
-            mutation($id: ID!, $resource: [Deletable]) {
+            mutation ($id: ID!, $resource: [Deletable]) {
               DeleteUser(id: $id, resource: $resource) {
                 id
               }
diff --git a/webapp/components/Modal/DisableModal.spec.js b/webapp/components/Modal/DisableModal.spec.js
index ed306a6cc..b7e52b5a0 100644
--- a/webapp/components/Modal/DisableModal.spec.js
+++ b/webapp/components/Modal/DisableModal.spec.js
@@ -25,7 +25,7 @@ describe('DisableModal.vue', () => {
       $t: jest.fn(),
       $apollo: {
         mutate: jest.fn().mockResolvedValueOnce().mockRejectedValue({
-          message: 'Not Authorised!',
+          message: 'Not Authorized!',
         }),
       },
       location: {
@@ -184,7 +184,7 @@ describe('DisableModal.vue', () => {
           })
 
           it('shows an error toaster when mutation rejects', async () => {
-            await expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorised!')
+            await expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorized!')
           })
         })
       })
diff --git a/webapp/components/Modal/DisableModal.vue b/webapp/components/Modal/DisableModal.vue
index 19ef64332..d28033ff8 100644
--- a/webapp/components/Modal/DisableModal.vue
+++ b/webapp/components/Modal/DisableModal.vue
@@ -53,7 +53,7 @@ export default {
         // await this.modalData.buttons.confirm.callback()
         await this.$apollo.mutate({
           mutation: gql`
-            mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
+            mutation ($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
               review(resourceId: $resourceId, disable: $disable, closed: $closed) {
                 disable
               }
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index ec991f0ef..4256278af 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -112,16 +112,6 @@ export default {
 </script>
 
 <style lang="scss">
-.notifications-menu {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-
-  .base-button {
-    overflow: visible;
-  }
-}
-
 .notifications-menu-popover {
   max-width: 500px;
   margin-bottom: $size-height-base;
diff --git a/webapp/components/PageFooter/PageFooter.spec.js b/webapp/components/PageFooter/PageFooter.spec.js
index 95be76630..53302192a 100644
--- a/webapp/components/PageFooter/PageFooter.spec.js
+++ b/webapp/components/PageFooter/PageFooter.spec.js
@@ -100,21 +100,41 @@ describe('PageFooter.vue', () => {
         const links = {
           ...linksDefault,
           ORGANIZATION: linksDefault.ORGANIZATION.overwrite({
-            externalLink: 'https://ocelot.social',
+            externalLink: {
+              url: 'https://ocelot.social',
+              target: '_blank',
+            },
           }),
           IMPRINT: linksDefault.IMPRINT.overwrite({
-            externalLink: 'https://ocelot.social/IMPRINT',
+            externalLink: {
+              url: 'https://ocelot.social/IMPRINT',
+              target: '_blank',
+            },
           }),
           TERMS_AND_CONDITIONS: linksDefault.TERMS_AND_CONDITIONS.overwrite({
-            externalLink: 'https://ocelot.social/TERMS_AND_CONDITIONS',
+            externalLink: {
+              url: 'https://ocelot.social/TERMS_AND_CONDITIONS',
+              target: '_blank',
+            },
           }),
           CODE_OF_CONDUCT: linksDefault.CODE_OF_CONDUCT.overwrite({
-            externalLink: 'https://ocelot.social/CODE_OF_CONDUCT',
+            externalLink: {
+              url: 'https://ocelot.social/CODE_OF_CONDUCT',
+              target: '_blank',
+            },
           }),
           DATA_PRIVACY: linksDefault.DATA_PRIVACY.overwrite({
-            externalLink: 'https://ocelot.social/DATA_PRIVACY',
+            externalLink: {
+              url: 'https://ocelot.social/DATA_PRIVACY',
+              target: '_blank',
+            },
+          }),
+          FAQ: linksDefault.FAQ.overwrite({
+            externalLink: {
+              url: 'https://ocelot.social/FAQ',
+              target: '_blank',
+            },
           }),
-          FAQ: linksDefault.FAQ.overwrite({ externalLink: 'https://ocelot.social/FAQ' }),
         }
         wrapper = Wrapper()
         wrapper.setData({ links })
diff --git a/webapp/components/PageFooter/PageFooter.vue b/webapp/components/PageFooter/PageFooter.vue
index 586843b81..c71fc4b5c 100644
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/webapp/components/PageFooter/PageFooter.vue
@@ -9,7 +9,7 @@
     </span>
     <!-- version -->
     <a
-      href="https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/CHANGELOG.md"
+      href="https://github.com/Ocelot-Social-Community/Ocelot-Social/releases"
       target="_blank"
       data-test="version-link"
     >
@@ -38,11 +38,14 @@ export default {
   position: fixed;
   bottom: 0px;
   z-index: 10;
-  background-color: white;
+  background-color: $color-footer-background;
   width: 100%;
   padding: 10px 10px;
   box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);
 }
+.ds-footer a {
+  color: $color-footer-link;
+}
 .division-line {
   margin-left: 0.2rem;
   margin-right: 0.2rem;
diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index cd955973f..94b69a8f6 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -65,7 +65,7 @@ export default {
     async handleSubmit(data) {
       this.loading = true
       const mutation = gql`
-        mutation($oldPassword: String!, $password: String!) {
+        mutation ($oldPassword: String!, $password: String!) {
           changePassword(oldPassword: $oldPassword, newPassword: $password)
         }
       `
diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index e65a7a04f..c53afcc01 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -93,7 +93,7 @@ export default {
   methods: {
     async handleSubmitPassword() {
       const mutation = gql`
-        mutation($nonce: String!, $email: String!, $password: String!) {
+        mutation ($nonce: String!, $email: String!, $password: String!) {
           resetPassword(nonce: $nonce, email: $email, newPassword: $password)
         }
       `
diff --git a/webapp/components/PasswordReset/Request.vue b/webapp/components/PasswordReset/Request.vue
index 5f4baf357..5398c13ed 100644
--- a/webapp/components/PasswordReset/Request.vue
+++ b/webapp/components/PasswordReset/Request.vue
@@ -85,7 +85,7 @@ export default {
     },
     async handleSubmit() {
       const mutation = gql`
-        mutation($email: String!) {
+        mutation ($email: String!) {
           requestPasswordReset(email: $email)
         }
       `
diff --git a/webapp/components/PostTeaser/PostTeaser.spec.js b/webapp/components/PostTeaser/PostTeaser.spec.js
index 7a37d710f..546c4581d 100644
--- a/webapp/components/PostTeaser/PostTeaser.spec.js
+++ b/webapp/components/PostTeaser/PostTeaser.spec.js
@@ -47,6 +47,9 @@ describe('PostTeaser', () => {
           data: { DeletePost: { id: 'deleted-post-id' } },
         }),
       },
+      $env: {
+        CATEGORIES_ACTIVE: false,
+      },
     }
     getters = {
       'auth/isModerator': () => false,
diff --git a/webapp/components/PostTeaser/PostTeaser.story.js b/webapp/components/PostTeaser/PostTeaser.story.js
index c82396101..e77e85585 100644
--- a/webapp/components/PostTeaser/PostTeaser.story.js
+++ b/webapp/components/PostTeaser/PostTeaser.story.js
@@ -17,8 +17,7 @@ export const post = {
   author: {
     id: 'u3',
     avatar: {
-      url:
-        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     slug: 'jenny-rostock',
     name: 'Rainer Unsinn',
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 949c7032e..2bd63e6ed 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -15,18 +15,28 @@
         <img :src="post.image | proxyApiUrl" class="image" />
       </template>
       <client-only>
-        <user-teaser :user="post.author" :date-time="post.createdAt" />
+        <user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" />
       </client-only>
       <h2 class="title hyphenate-text">{{ post.title }}</h2>
       <!-- TODO: replace editor content with tiptap render view -->
-      <!-- eslint-disable vue/no-v-html -->
+      <!-- eslint-disable-next-line vue/no-v-html -->
       <div class="content hyphenate-text" v-html="excerpt" />
-      <!-- eslint-enable vue/no-v-html -->
       <footer
         class="footer"
         v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, post.id)"
       >
-        <div class="categories-placeholder"></div>
+        <div class="categories" v-if="categoriesActive">
+          <hc-category
+            v-for="category in post.categories"
+            :key="category.id"
+            v-tooltip="{
+              content: $t(`contribution.category.description.${category.slug}`),
+              placement: 'bottom-start',
+            }"
+            :icon="category.icon"
+          />
+        </div>
+        <div v-else class="categories-placeholder"></div>
         <counter-icon
           icon="bullhorn"
           :count="post.shoutedCount"
@@ -70,6 +80,7 @@
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import HcRibbon from '~/components/Ribbon'
+import HcCategory from '~/components/Category'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import { mapGetters } from 'vuex'
 import PostMutations from '~/graphql/PostMutations'
@@ -79,6 +90,7 @@ export default {
   name: 'PostTeaser',
   components: {
     UserTeaser,
+    HcCategory,
     HcRibbon,
     ContentMenu,
     CounterIcon,
@@ -93,6 +105,11 @@ export default {
       default: () => {},
     },
   },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
   mounted() {
     const { image } = this.post
     if (!image) return
diff --git a/webapp/components/ProgressBar/ProgressBar.vue b/webapp/components/ProgressBar/ProgressBar.vue
index dd904e5b1..41183b798 100644
--- a/webapp/components/ProgressBar/ProgressBar.vue
+++ b/webapp/components/ProgressBar/ProgressBar.vue
@@ -2,7 +2,10 @@
   <div class="progress-bar-component">
     <div class="progress-bar">
       <div class="progress-bar__goal"></div>
-      <div class="progress-bar__progress" :style="progressBarWidth"></div>
+      <div
+        :class="['progress-bar__progress', progressBarColorClass]"
+        :style="progressBarWidth"
+      ></div>
       <div class="progress-bar__border" style="width: 100%">
         <span v-if="label" class="progress-bar__label">{{ label }}</span>
       </div>
@@ -14,6 +17,8 @@
 </template>
 
 <script>
+import { PROGRESS_BAR_COLOR_TYPE } from '~/constants/donation.js'
+
 export default {
   props: {
     goal: {
@@ -32,6 +37,11 @@ export default {
     progressBarWidth() {
       return `width: ${(this.progress / this.goal) * 100}%;`
     },
+    progressBarColorClass() {
+      return PROGRESS_BAR_COLOR_TYPE === 'gradient'
+        ? 'color-repeating-linear-gradient'
+        : 'color-uni'
+    },
   },
 }
 </script>
@@ -66,15 +76,22 @@ export default {
   left: 0px;
   height: 26px; // styleguide-button-size
   max-width: 100%;
-  background: repeating-linear-gradient(
-    120deg,
-    $color-primary 0px,
-    $color-primary 30px,
-    $color-primary-light 50px,
-    $color-primary-light 75px,
-    $color-primary 95px
-  );
   border-radius: $border-radius-base;
+
+  &.color-uni {
+    background: $color-primary-light;
+  }
+
+  &.color-repeating-linear-gradient {
+    background: repeating-linear-gradient(
+      120deg,
+      $color-primary 0px,
+      $color-primary 30px,
+      $color-primary-light 50px,
+      $color-primary-light 75px,
+      $color-primary 95px
+    );
+  }
 }
 
 .progress-bar__border {
diff --git a/webapp/components/Registration/RegistrationSlideCreate.vue b/webapp/components/Registration/RegistrationSlideCreate.vue
index 35bba6614..0906fc8a4 100644
--- a/webapp/components/Registration/RegistrationSlideCreate.vue
+++ b/webapp/components/Registration/RegistrationSlideCreate.vue
@@ -6,6 +6,7 @@
     <ds-text align="center" bold color="success">
       {{ $t('components.registration.create-user-account.success') }}
     </ds-text>
+    <ds-space margin="xxx-small" />
   </div>
   <div v-else-if="response === 'error'">
     <transition name="ds-transition-fade">
@@ -21,6 +22,7 @@
     <ds-space centered>
       <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
     </ds-space>
+    <ds-space margin="xxx-small" />
   </div>
   <div v-else class="create-account-card">
     <ds-form
@@ -112,6 +114,7 @@
           </label>
         </ds-text>
       </template>
+      <ds-space margin="xxx-small" />
     </ds-form>
   </div>
 </template>
diff --git a/webapp/components/Registration/RegistrationSlideEmail.vue b/webapp/components/Registration/RegistrationSlideEmail.vue
index 045269f00..6d6454ac9 100644
--- a/webapp/components/Registration/RegistrationSlideEmail.vue
+++ b/webapp/components/Registration/RegistrationSlideEmail.vue
@@ -24,6 +24,7 @@
         {{ $t('components.registration.email.form.sendEmailAgain') }}
       </label>
     </ds-text>
+    <ds-space margin="xxx-small" />
   </ds-form>
 </template>
 
@@ -35,7 +36,7 @@ import normalizeEmail from '~/components/utils/NormalizeEmail'
 import translateErrorMessage from '~/components/utils/TranslateErrorMessage'
 
 export const SignupMutation = gql`
-  mutation($email: String!, $inviteCode: String) {
+  mutation ($email: String!, $inviteCode: String) {
     Signup(email: $email, inviteCode: $inviteCode) {
       email
     }
@@ -165,9 +166,8 @@ export default {
             })
             this.setButtonValues()
 
-            const { email: responseEmail } = this.sliderData.sliders[
-              this.sliderIndex
-            ].data.response.Signup
+            const { email: responseEmail } =
+              this.sliderData.sliders[this.sliderIndex].data.response.Signup
             this.$toast.success(
               this.$t('components.registration.email.form.success', { email: responseEmail }),
             )
diff --git a/webapp/components/Registration/RegistrationSlideInvite.vue b/webapp/components/Registration/RegistrationSlideInvite.vue
index f9ce15ee9..723071510 100644
--- a/webapp/components/Registration/RegistrationSlideInvite.vue
+++ b/webapp/components/Registration/RegistrationSlideInvite.vue
@@ -17,6 +17,7 @@
       {{ $t('components.registration.invite-code.form.description') }}
     </ds-text>
     <slot></slot>
+    <ds-space margin="xxx-small" />
   </ds-form>
 </template>
 
@@ -25,7 +26,7 @@ import gql from 'graphql-tag'
 import CONSTANTS_REGISTRATION from './../../constants/registration'
 
 export const isValidInviteCodeQuery = gql`
-  query($code: ID!) {
+  query ($code: ID!) {
     isValidInviteCode(code: $code)
   }
 `
diff --git a/webapp/components/Registration/RegistrationSlideNoPublic.vue b/webapp/components/Registration/RegistrationSlideNoPublic.vue
index 1d26cc8e2..c5f815ef4 100644
--- a/webapp/components/Registration/RegistrationSlideNoPublic.vue
+++ b/webapp/components/Registration/RegistrationSlideNoPublic.vue
@@ -2,6 +2,7 @@
   <ds-space centered>
     <hc-empty icon="events" :message="$t('components.registration.signup.unavailable')" />
     <slot></slot>
+    <ds-space margin="xxx-small" />
   </ds-space>
 </template>
 
diff --git a/webapp/components/Registration/RegistrationSlideNonce.vue b/webapp/components/Registration/RegistrationSlideNonce.vue
index 147e84336..604d9b132 100644
--- a/webapp/components/Registration/RegistrationSlideNonce.vue
+++ b/webapp/components/Registration/RegistrationSlideNonce.vue
@@ -19,6 +19,7 @@
       {{ $t('components.registration.email-nonce.form.description') }}
     </ds-text>
     <slot></slot>
+    <ds-space margin="xxx-small" />
   </ds-form>
 </template>
 
@@ -30,7 +31,7 @@ import CONSTANTS_REGISTRATION from './../../constants/registration'
 import EmailDisplayAndVerify from './EmailDisplayAndVerify'
 
 export const verifyNonceQuery = gql`
-  query($email: String!, $nonce: String!) {
+  query ($email: String!, $nonce: String!) {
     VerifyNonce(email: $email, nonce: $nonce)
   }
 `
diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
index 86142c338..91b9ecd61 100644
--- a/webapp/components/Registration/Signup.vue
+++ b/webapp/components/Registration/Signup.vue
@@ -70,7 +70,7 @@ import { SweetalertIcon } from 'vue-sweetalert-icons'
 import translateErrorMessage from '~/components/utils/TranslateErrorMessage'
 
 export const SignupMutation = gql`
-  mutation($email: String!, $inviteCode: String) {
+  mutation ($email: String!, $inviteCode: String) {
     Signup(email: $email, inviteCode: $inviteCode) {
       email
     }
diff --git a/webapp/components/ReleaseModal/ReleaseModal.spec.js b/webapp/components/ReleaseModal/ReleaseModal.spec.js
index d1dafa5c9..9cded646f 100644
--- a/webapp/components/ReleaseModal/ReleaseModal.spec.js
+++ b/webapp/components/ReleaseModal/ReleaseModal.spec.js
@@ -25,7 +25,7 @@ describe('ReleaseModal.vue', () => {
       },
       $t: jest.fn(),
       $apollo: {
-        mutate: jest.fn().mockResolvedValueOnce().mockRejectedValue({ message: 'Not Authorised!' }),
+        mutate: jest.fn().mockResolvedValueOnce().mockRejectedValue({ message: 'Not Authorized!' }),
       },
       location: {
         reload: jest.fn(),
@@ -181,7 +181,7 @@ describe('ReleaseModal.vue', () => {
           })
 
           it('shows an error toaster when mutation rejects', async () => {
-            await expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorised!')
+            await expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorized!')
           })
         })
       })
diff --git a/webapp/components/ReleaseModal/ReleaseModal.vue b/webapp/components/ReleaseModal/ReleaseModal.vue
index fef0d79d0..fceb4b7a1 100644
--- a/webapp/components/ReleaseModal/ReleaseModal.vue
+++ b/webapp/components/ReleaseModal/ReleaseModal.vue
@@ -52,7 +52,7 @@ export default {
         // await this.modalData.buttons.confirm.callback()
         await this.$apollo.mutate({
           mutation: gql`
-            mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
+            mutation ($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
               review(resourceId: $resourceId, disable: $disable, closed: $closed) {
                 disable
               }
diff --git a/webapp/components/Upload/spec.js b/webapp/components/Uploader/AvatarUploader.spec.js
similarity index 88%
rename from webapp/components/Upload/spec.js
rename to webapp/components/Uploader/AvatarUploader.spec.js
index baf1a3b59..070302038 100644
--- a/webapp/components/Upload/spec.js
+++ b/webapp/components/Uploader/AvatarUploader.spec.js
@@ -1,10 +1,10 @@
 import { shallowMount } from '@vue/test-utils'
 import Vue from 'vue'
-import Upload from '.'
+import AvatarUploader from './AvatarUploader'
 
 const localVue = global.localVue
 
-describe('Upload', () => {
+describe('AvatarUploader', () => {
   let wrapper
 
   const mocks = {
@@ -26,21 +26,22 @@ describe('Upload', () => {
   }
 
   const propsData = {
-    user: {
+    profile: {
       avatar: { url: '/api/generic.jpg' },
     },
+    updateMutation: jest.fn(),
   }
 
   beforeEach(() => {
     jest.useFakeTimers()
-    wrapper = shallowMount(Upload, { localVue, propsData, mocks })
+    wrapper = shallowMount(AvatarUploader, { localVue, propsData, mocks })
   })
 
   afterEach(() => {
     jest.clearAllMocks()
   })
 
-  it('sends a the UpdateUser mutation when vddrop is called', () => {
+  it('sends the UpdateUser mutation when vddrop is called', () => {
     wrapper.vm.vddrop([{ filename: 'avatar.jpg' }])
     expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
   })
diff --git a/webapp/components/Upload/index.vue b/webapp/components/Uploader/AvatarUploader.vue
similarity index 83%
rename from webapp/components/Upload/index.vue
rename to webapp/components/Uploader/AvatarUploader.vue
index f2ef4e712..eacb44d3a 100644
--- a/webapp/components/Upload/index.vue
+++ b/webapp/components/Uploader/AvatarUploader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="avatar-uploader">
     <vue-dropzone
       id="customdropzone"
       :key="avatarUrl"
@@ -10,8 +10,8 @@
     >
       <div class="dz-message" @mouseover="hover = true" @mouseleave="hover = false">
         <slot></slot>
-        <div class="hc-attachments-upload-area">
-          <div class="hc-drag-marker">
+        <div class="avatar-attachments-upload-area">
+          <div class="avatar-drag-marker">
             <base-icon v-if="hover" name="image" />
           </div>
         </div>
@@ -21,14 +21,15 @@
 </template>
 <script>
 import vueDropzone from 'nuxt-dropzone'
-import { updateUserMutation } from '~/graphql/User.js'
 
 export default {
+  name: 'AvatarUploader',
   components: {
     vueDropzone,
   },
   props: {
-    user: { type: Object, default: null },
+    profile: { type: Object, required: true },
+    updateMutation: { type: Function, required: true },
   },
   data() {
     return {
@@ -43,7 +44,7 @@ export default {
   },
   computed: {
     avatarUrl() {
-      const { avatar } = this.user
+      const { avatar } = this.profile
       return avatar && avatar.url
     },
   },
@@ -68,16 +69,16 @@ export default {
       const avatarUpload = file[0]
       this.$apollo
         .mutate({
-          mutation: updateUserMutation(),
+          mutation: this.updateMutation(),
           variables: {
             avatar: {
               upload: avatarUpload,
             },
-            id: this.user.id,
+            id: this.profile.id,
           },
         })
         .then(() => {
-          this.$toast.success(this.$t('user.avatar.submitted'))
+          this.$toast.success(this.$t('profile.avatar.submitted'))
         })
         .catch((error) => this.$toast.error(error.message))
     },
@@ -115,7 +116,7 @@ export default {
   width: 100%;
 }
 
-.hc-attachments-upload-area {
+.avatar-attachments-upload-area {
   position: relative;
   display: flex;
   align-items: center;
@@ -123,11 +124,11 @@ export default {
   cursor: pointer;
 }
 
-.hc-attachments-upload-button {
+.avatar-attachments-upload-button {
   pointer-events: none;
 }
 
-.hc-drag-marker {
+.avatar-drag-marker {
   position: relative;
   width: 122px;
   height: 122px;
@@ -165,7 +166,7 @@ export default {
     border-radius: 100%;
     border: 1px dashed hsl(0, 0%, 25%);
   }
-  .hc-attachments-upload-area:hover & {
+  .avatar-attachments-upload-area:hover & {
     opacity: 1;
   }
 }
diff --git a/webapp/components/ImageUploader/ImageUploader.spec.js b/webapp/components/Uploader/ImageUploader.spec.js
similarity index 100%
rename from webapp/components/ImageUploader/ImageUploader.spec.js
rename to webapp/components/Uploader/ImageUploader.spec.js
diff --git a/webapp/components/ImageUploader/ImageUploader.vue b/webapp/components/Uploader/ImageUploader.vue
similarity index 100%
rename from webapp/components/ImageUploader/ImageUploader.vue
rename to webapp/components/Uploader/ImageUploader.vue
diff --git a/webapp/components/UserTeaser/UserTeaser.story.js b/webapp/components/UserTeaser/UserTeaser.story.js
index a872b1aa4..aa8be58ff 100644
--- a/webapp/components/UserTeaser/UserTeaser.story.js
+++ b/webapp/components/UserTeaser/UserTeaser.story.js
@@ -56,6 +56,41 @@ export const user = {
   followedBy: [],
   socialMedia: [],
 }
+export const group = {
+  id: 'g2',
+  name: 'Yoga Practice',
+  slug: 'yoga-practice',
+  about: null,
+  description: `<h3>What Is yoga?</h3><p>Yoga is not just about practicing asanas. It's about how we do it.</p><p class="">And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.</p><h3>What makes practicing asanas yogic?</h3><p class="">The important thing is:</p><ul><li><p>Use the exercises (consciously) for your personal development.</p></li></ul>`,
+  descriptionExcerpt: `<h3>What Is yoga?</h3><p>Yoga is not just about practicing asanas. It's about how we do it.</p><p>And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.</p><h3>What makes practicing asanas yogic?</h3><p>The important thing is:</p><ul><li><p>Use the exercises …</p></li></ul>`,
+  groupType: 'public',
+  actionRadius: 'interplanetary',
+  categories: [
+    {
+      id: 'cat4',
+      icon: 'psyche',
+      name: 'psyche',
+      slug: 'psyche',
+      description: 'Seele, Gefühle, Glück',
+    },
+    {
+      id: 'cat5',
+      icon: 'movement',
+      name: 'body-and-excercise',
+      slug: 'body-and-excercise',
+      description: 'Sport, Yoga, Massage, Tanzen, Entspannung',
+    },
+    {
+      id: 'cat17',
+      icon: 'spirituality',
+      name: 'spirituality',
+      slug: 'spirituality',
+      description: 'Religion, Werte, Ethik',
+    },
+  ],
+  locationName: null,
+  location: null,
+}
 
 storiesOf('UserTeaser', module)
   .addDecorator(withA11y)
@@ -68,7 +103,7 @@ storiesOf('UserTeaser', module)
     }),
     template: '<user-teaser :user="user" />',
   }))
-  .add('with Date', () => ({
+  .add('with date', () => ({
     components: { UserTeaser },
     store: helpers.store,
     data: () => ({
@@ -98,3 +133,21 @@ storiesOf('UserTeaser', module)
     }),
     template: '<user-teaser :user="user" :date-time="new Date()" />',
   }))
+  .add('with group and date', () => ({
+    components: { UserTeaser },
+    store: helpers.store,
+    data: () => ({
+      user,
+      group,
+    }),
+    template: '<user-teaser :user="user" :group="group" :date-time="new Date()" />',
+  }))
+  .add('with group and date – wide', () => ({
+    components: { UserTeaser },
+    store: helpers.store,
+    data: () => ({
+      user,
+      group,
+    }),
+    template: '<user-teaser :user="user" :group="group" wide :date-time="new Date()" />',
+  }))
diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue
index e80f9fb7d..c7d3df131 100644
--- a/webapp/components/UserTeaser/UserTeaser.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -1,41 +1,61 @@
 <template>
   <div class="user-teaser" v-if="displayAnonymous">
-    <user-avatar v-if="showAvatar" size="small" />
+    <profile-avatar v-if="showAvatar" size="small" />
     <span class="info anonymous">{{ $t('profile.userAnonym') }}</span>
   </div>
   <div v-else :class="[{ 'disabled-content': user.disabled }]" placement="top-start">
-    <nuxt-link :to="userLink" :class="['user-teaser']">
-      <user-avatar v-if="showAvatar" :user="user" size="small" />
-      <div class="info">
-        <span class="text">
-          <span class="slug">{{ userSlug }}</span>
-          <span v-if="dateTime">{{ userName }}</span>
-        </span>
-        <span v-if="dateTime" class="text">
+    <div :class="['user-teaser']">
+      <nuxt-link :to="userLink" data-test="avatarUserLink">
+        <profile-avatar v-if="showAvatar" :profile="user" size="small" />
+      </nuxt-link>
+      <div class="info flex-direction-column">
+        <div :class="wide ? 'flex-direction-row' : 'flex-direction-column'">
+          <nuxt-link :to="userLink">
+            <span class="text">
+              <span class="slug">{{ userSlug }}</span>
+              <span v-if="!userOnly" class="name">{{ userName }}</span>
+            </span>
+          </nuxt-link>
+          <span v-if="wide">&nbsp;</span>
+          <span v-if="group">
+            <span class="text">
+              {{ $t('group.in') }}
+            </span>
+            <nuxt-link :to="groupLink">
+              <span class="text">
+                <span class="slug">{{ groupSlug }}</span>
+                <span v-if="!userOnly" class="name">{{ groupName }}</span>
+              </span>
+            </nuxt-link>
+          </span>
+        </div>
+        <span v-if="!userOnly" class="text">
           <base-icon name="clock" />
-          <hc-relative-date-time :date-time="dateTime" />
+          <relative-date-time :date-time="dateTime" />
           <slot name="dateTime"></slot>
         </span>
         <span v-else class="text">{{ userName }}</span>
       </div>
-    </nuxt-link>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 
-import HcRelativeDateTime from '~/components/RelativeDateTime'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import RelativeDateTime from '~/components/RelativeDateTime'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   name: 'UserTeaser',
   components: {
-    HcRelativeDateTime,
-    UserAvatar,
+    RelativeDateTime,
+    ProfileAvatar,
   },
   props: {
     user: { type: Object, default: null },
+    group: { type: Object, default: null },
+    wide: { type: Boolean, default: false },
     showAvatar: { type: Boolean, default: true },
     dateTime: { type: [Date, String], default: null },
     showPopover: { type: Boolean, default: true },
@@ -64,6 +84,22 @@ export default {
       const { name } = this.user || {}
       return name || this.$t('profile.userAnonym')
     },
+    userOnly() {
+      return !this.dateTime && !this.group
+    },
+    groupLink() {
+      const { id, slug } = this.group
+      if (!(id && slug)) return ''
+      return { name: 'group-id-slug', params: { slug, id } }
+    },
+    groupSlug() {
+      const { slug } = this.group || {}
+      return slug && `&${slug}`
+    },
+    groupName() {
+      const { name } = this.group || {}
+      return name || this.$t('profile.userAnonym')
+    },
   },
   methods: {
     optimisticFollow({ followedByCurrentUser }) {
@@ -88,22 +124,16 @@ export default {
   display: flex;
   flex-wrap: nowrap;
 
-  > .user-avatar {
+  > .profile-avatar {
     flex-shrink: 0;
   }
 
   > .info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
     padding-left: $space-xx-small;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    color: $text-color-soft;
-    font-size: $font-size-small;
-
     &.anonymous {
       font-size: $font-size-base;
     }
@@ -112,6 +142,23 @@ export default {
       color: $color-primary;
       font-size: $font-size-base;
     }
+
+    .name {
+      color: $text-color-soft;
+      font-size: $font-size-small;
+    }
+  }
+
+  .flex-direction-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .flex-direction-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
   }
 
   .text {
diff --git a/webapp/components/_new/features/PageParamsLink/PageParamsLink.vue b/webapp/components/_new/features/PageParamsLink/PageParamsLink.vue
index ae01dd319..391c4722e 100644
--- a/webapp/components/_new/features/PageParamsLink/PageParamsLink.vue
+++ b/webapp/components/_new/features/PageParamsLink/PageParamsLink.vue
@@ -6,7 +6,12 @@
   >
     <slot />
   </nuxt-link>
-  <a v-else :href="pageParams.externalLink" target="_blank" :data-test="pageParams.name + '-link'">
+  <a
+    v-else
+    :href="pageParams.externalLink.url"
+    :target="pageParams.externalLink.target"
+    :data-test="pageParams.name + '-link'"
+  >
     <slot />
   </a>
 </template>
diff --git a/webapp/components/_new/features/SearchResults/SearchResults.spec.js b/webapp/components/_new/features/SearchResults/SearchResults.spec.js
index b1886a754..19653fcac 100644
--- a/webapp/components/_new/features/SearchResults/SearchResults.spec.js
+++ b/webapp/components/_new/features/SearchResults/SearchResults.spec.js
@@ -24,6 +24,9 @@ describe('SearchResults', () => {
   beforeEach(() => {
     mocks = {
       $t: jest.fn(),
+      $env: {
+        CATEGORIES_ACTIVE: false,
+      },
     }
     getters = {
       'auth/user': () => {
@@ -33,6 +36,7 @@ describe('SearchResults', () => {
     }
     propsData = {
       pageSize: 12,
+      search: '',
     }
     wrapper = Wrapper()
   })
@@ -166,7 +170,7 @@ describe('SearchResults', () => {
           await wrapper.vm.$nextTick()
           await expect(
             wrapper.vm.$options.apollo.searchPosts.variables.bind(wrapper.vm)(),
-          ).toMatchObject({ query: undefined, firstPosts: 12, postsOffset: 12 })
+          ).toMatchObject({ query: '', firstPosts: 12, postsOffset: 12 })
         })
 
         it('displays the next page button when next-button is clicked', async () => {
@@ -196,7 +200,7 @@ describe('SearchResults', () => {
           await wrapper.vm.$nextTick()
           await expect(
             wrapper.vm.$options.apollo.searchPosts.variables.bind(wrapper.vm)(),
-          ).toMatchObject({ query: undefined, firstPosts: 12, postsOffset: 24 })
+          ).toMatchObject({ query: '', firstPosts: 12, postsOffset: 24 })
         })
 
         it('deactivates next page button when next-button is clicked twice', async () => {
@@ -231,7 +235,7 @@ describe('SearchResults', () => {
           await wrapper.vm.$nextTick()
           await expect(
             wrapper.vm.$options.apollo.searchPosts.variables.bind(wrapper.vm)(),
-          ).toMatchObject({ query: undefined, firstPosts: 12, postsOffset: 0 })
+          ).toMatchObject({ query: '', firstPosts: 12, postsOffset: 0 })
         })
       })
     })
diff --git a/webapp/components/_new/features/SearchResults/SearchResults.vue b/webapp/components/_new/features/SearchResults/SearchResults.vue
index f3730f61d..20385ce64 100644
--- a/webapp/components/_new/features/SearchResults/SearchResults.vue
+++ b/webapp/components/_new/features/SearchResults/SearchResults.vue
@@ -59,6 +59,14 @@
               </base-card>
             </ds-grid-item>
           </template>
+          <!-- groups -->
+          <template v-if="activeTab === 'Group'">
+            <ds-grid-item v-for="group in activeResources" :key="group.id" :row-span="2">
+              <base-card :wideContent="true" class="group-teaser-card-wrapper">
+                <group-teaser :group="{ ...group, name: group.groupName }" />
+              </base-card>
+            </ds-grid-item>
+          </template>
           <!-- hashtags -->
           <template v-if="activeTab === 'Hashtag'">
             <ds-grid-item v-for="hashtag in activeResources" :key="hashtag.id" :row-span="2">
@@ -100,17 +108,19 @@
 
 <script>
 import postListActions from '~/mixins/postListActions'
-import { searchPosts, searchUsers, searchHashtags } from '~/graphql/Search.js'
+import { searchPosts, searchUsers, searchGroups, searchHashtags } from '~/graphql/Search.js'
 import HcEmpty from '~/components/Empty/Empty'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
 import PostTeaser from '~/components/PostTeaser/PostTeaser'
 import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
+import GroupTeaser from '~/components/Group/GroupTeaser'
 import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 
 export default {
+  name: 'SearchResults',
   components: {
     TabNavigation,
     HcEmpty,
@@ -119,6 +129,7 @@ export default {
     PostTeaser,
     PaginationButtons,
     UserTeaser,
+    GroupTeaser,
     HcHashtag,
   },
   mixins: [postListActions],
@@ -135,24 +146,29 @@ export default {
     return {
       posts: [],
       users: [],
+      groups: [],
       hashtags: [],
 
       postCount: 0,
       userCount: 0,
+      groupCount: 0,
       hashtagCount: 0,
 
       postPage: 0,
       userPage: 0,
+      groupPage: 0,
       hashtagPage: 0,
 
       activeTab: null,
 
       firstPosts: this.pageSize,
       firstUsers: this.pageSize,
+      firstGroups: this.pageSize,
       firstHashtags: this.pageSize,
 
       postsOffset: 0,
       usersOffset: 0,
+      groupsOffset: 0,
       hashtagsOffset: 0,
     }
   },
@@ -160,18 +176,21 @@ export default {
     activeResources() {
       if (this.activeTab === 'Post') return this.posts
       if (this.activeTab === 'User') return this.users
+      if (this.activeTab === 'Group') return this.groups
       if (this.activeTab === 'Hashtag') return this.hashtags
       return []
     },
     activeResourceCount() {
       if (this.activeTab === 'Post') return this.postCount
       if (this.activeTab === 'User') return this.userCount
+      if (this.activeTab === 'Group') return this.groupCount
       if (this.activeTab === 'Hashtag') return this.hashtagCount
       return 0
     },
     activePage() {
       if (this.activeTab === 'Post') return this.postPage
       if (this.activeTab === 'User') return this.userPage
+      if (this.activeTab === 'Group') return this.groupPage
       if (this.activeTab === 'Hashtag') return this.hashtagPage
       return 0
     },
@@ -189,6 +208,12 @@ export default {
           count: this.userCount,
           disabled: this.userCount === 0,
         },
+        {
+          type: 'Group',
+          title: this.$t('search.heading.Group', {}, this.groupCount),
+          count: this.groupCount,
+          disabled: this.groupCount === 0,
+        },
         {
           type: 'Hashtag',
           title: this.$t('search.heading.Tag', {}, this.hashtagCount),
@@ -200,24 +225,27 @@ export default {
     hasPrevious() {
       if (this.activeTab === 'Post') return this.postsOffset > 0
       if (this.activeTab === 'User') return this.usersOffset > 0
+      if (this.activeTab === 'Group') return this.groupsOffset > 0
       if (this.activeTab === 'Hashtag') return this.hashtagsOffset > 0
       return false
     },
     hasNext() {
       if (this.activeTab === 'Post') return (this.postPage + 1) * this.pageSize < this.postCount
       if (this.activeTab === 'User') return (this.userPage + 1) * this.pageSize < this.userCount
+      if (this.activeTab === 'Group') return (this.groupPage + 1) * this.pageSize < this.groupCount
       if (this.activeTab === 'Hashtag')
         return (this.hashtagPage + 1) * this.pageSize < this.hashtagCount
       return false
     },
     searchCount() {
-      return this.postCount + this.userCount + this.hashtagCount
+      return this.postCount + this.userCount + this.groupCount + this.hashtagCount
     },
   },
   methods: {
     clearPage() {
       this.postPage = 0
       this.userPage = 0
+      this.groupPage = 0
       this.hashtagPage = 0
     },
     switchTab(tabType) {
@@ -235,6 +263,10 @@ export default {
           this.userPage--
           this.usersOffset = this.userPage * this.pageSize
           break
+        case 'Group':
+          this.groupPage--
+          this.groupsOffset = this.groupPage * this.pageSize
+          break
         case 'Hashtag':
           this.hashtagPage--
           this.hashtagsOffset = this.hashtagPage * this.pageSize
@@ -252,6 +284,10 @@ export default {
           this.userPage++
           this.usersOffset += this.pageSize
           break
+        case 'Group':
+          this.groupPage++
+          this.groupsOffset += this.pageSize
+          break
         case 'Hashtag':
           this.hashtagPage++
           this.hashtagsOffset += this.pageSize
@@ -270,7 +306,7 @@ export default {
       variables() {
         const { firstHashtags, hashtagsOffset, search } = this
         return {
-          query: search,
+          query: search.replace(/^([!@#&])/, ''),
           firstHashtags,
           hashtagsOffset,
         }
@@ -281,7 +317,12 @@ export default {
       update({ searchHashtags }) {
         this.hashtags = searchHashtags.hashtags
         this.hashtagCount = searchHashtags.hashtagCount
-        if (this.postCount === 0 && this.userCount === 0 && this.hashtagCount > 0)
+        if (
+          this.postCount === 0 &&
+          this.userCount === 0 &&
+          this.groupCount === 0 &&
+          this.hashtagCount > 0
+        )
           this.activeTab = 'Hashtag'
       },
       fetchPolicy: 'cache-and-network',
@@ -293,7 +334,7 @@ export default {
       variables() {
         const { firstUsers, usersOffset, search } = this
         return {
-          query: search,
+          query: search.replace(/^([!@#&])/, ''),
           firstUsers,
           usersOffset,
         }
@@ -315,7 +356,7 @@ export default {
       variables() {
         const { firstPosts, postsOffset, search } = this
         return {
-          query: search,
+          query: search.replace(/^([!@#&])/, ''),
           firstPosts,
           postsOffset,
         }
@@ -330,6 +371,29 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
     },
+    searchGroups: {
+      query() {
+        return searchGroups(this.i18n)
+      },
+      variables() {
+        const { firstGroups, groupsOffset, search } = this
+        return {
+          query: search.replace(/^([!@#&])/, ''),
+          firstGroups,
+          groupsOffset,
+        }
+      },
+      skip() {
+        return !this.search
+      },
+      update({ searchGroups }) {
+        this.groups = searchGroups.groups
+        this.groupCount = searchGroups.groupCount
+        if (this.postCount === 0 && this.userCount === 0 && this.groupCount > 0)
+          this.activeTab = 'Group'
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>
@@ -365,6 +429,10 @@ export default {
       opacity: 0.8;
     }
   }
+
+  .group-teaser-card-wrapper {
+    padding: 0;
+  }
 }
 
 .grid-total-search-results {
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index d87598d76..6b8ad4f23 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     :class="buttonClass"
-    :disabled="loading"
+    :disabled="disabled || loading"
     :type="type"
     @click.capture="(event) => $emit('click', event)"
   >
@@ -46,7 +46,7 @@ export default {
       type: String,
       default: 'regular',
       validator(value) {
-        return value.match(/(small|regular)/)
+        return value.match(/(small|regular|large)/)
       },
     },
     type: {
@@ -56,6 +56,10 @@ export default {
         return value.match(/(button|submit)/)
       },
     },
+    disabled: {
+      // type: Boolean, // makes some errors that an Object was passed instead a Boolean and could not find how to solve in a acceptable time
+      default: false,
+    },
   },
   computed: {
     buttonClass() {
@@ -66,6 +70,7 @@ export default {
       if (this.danger) buttonClass += ' --danger'
       if (this.loading) buttonClass += ' --loading'
       if (this.size === 'small') buttonClass += ' --small'
+      if (this.size === 'large') buttonClass += ' --large'
 
       if (this.filled) buttonClass += ' --filled'
       else if (this.ghost) buttonClass += ' --ghost'
@@ -123,6 +128,15 @@ export default {
     }
   }
 
+  &.--large {
+    height: $size-button-large;
+    font-size: $font-size-large;
+
+    &.--circle {
+      width: $size-button-large;
+    }
+  }
+
   &:not(.--icon-only) > .base-icon {
     margin-right: $space-xx-small;
   }
diff --git a/webapp/components/_new/generic/BaseCard/BaseCard.vue b/webapp/components/_new/generic/BaseCard/BaseCard.vue
index 58ef508d0..86b1a6652 100644
--- a/webapp/components/_new/generic/BaseCard/BaseCard.vue
+++ b/webapp/components/_new/generic/BaseCard/BaseCard.vue
@@ -55,6 +55,7 @@ export default {
   padding: $space-base;
   border-radius: $border-radius-x-large;
   overflow: hidden;
+  overflow-wrap: break-word;
   background-color: $color-neutral-100;
   box-shadow: $box-shadow-base;
 
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js
similarity index 79%
rename from webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
rename to webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js
index 6d12c5ce2..44d35bd71 100644
--- a/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
+++ b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js
@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
-import UserAvatar from './UserAvatar.vue'
+import ProfileAvatar from './ProfileAvatar'
 import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon'
 
 const localVue = global.localVue
 
-describe('UserAvatar.vue', () => {
+describe('ProfileAvatar', () => {
   let propsData, wrapper
   beforeEach(() => {
     propsData = {}
@@ -12,7 +12,7 @@ describe('UserAvatar.vue', () => {
   })
 
   const Wrapper = () => {
-    return mount(UserAvatar, { propsData, localVue })
+    return mount(ProfileAvatar, { propsData, localVue })
   }
 
   it('renders no image', () => {
@@ -23,39 +23,39 @@ describe('UserAvatar.vue', () => {
     expect(wrapper.find(BaseIcon).exists()).toBe(true)
   })
 
-  describe('given a user', () => {
+  describe('given a profile', () => {
     describe('with no image', () => {
       beforeEach(() => {
         propsData = {
-          user: {
+          profile: {
             name: 'Matt Rider',
           },
         }
         wrapper = Wrapper()
       })
 
-      describe('no user name', () => {
+      describe('no profile name', () => {
         it('renders an icon', () => {
-          propsData = { user: { name: null } }
+          propsData = { profile: { name: null } }
           wrapper = Wrapper()
           expect(wrapper.find(BaseIcon).exists()).toBe(true)
         })
       })
 
-      describe("user name is 'Anonymous'", () => {
+      describe("profile name is 'Anonymous'", () => {
         it('renders an icon', () => {
-          propsData = { user: { name: 'Anonymous' } }
+          propsData = { profile: { name: 'Anonymous' } }
           wrapper = Wrapper()
           expect(wrapper.find(BaseIcon).exists()).toBe(true)
         })
       })
 
-      it('displays user initials', () => {
+      it('displays profile initials', () => {
         expect(wrapper.find('.initials').text()).toEqual('MR')
       })
 
       it('displays no more than 3 initials', () => {
-        propsData = { user: { name: 'Ana Paula Nunes Marques' } }
+        propsData = { profile: { name: 'Ana Paula Nunes Marques' } }
         wrapper = Wrapper()
         expect(wrapper.find('.initials').text()).toEqual('APN')
       })
@@ -64,7 +64,7 @@ describe('UserAvatar.vue', () => {
     describe('with a relative avatar url', () => {
       beforeEach(() => {
         propsData = {
-          user: {
+          profile: {
             name: 'Not Anonymous',
             avatar: {
               url: '/avatar.jpg',
@@ -82,7 +82,7 @@ describe('UserAvatar.vue', () => {
     describe('with an absolute avatar url', () => {
       beforeEach(() => {
         propsData = {
-          user: {
+          profile: {
             name: 'Not Anonymous',
             avatar: {
               url: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.story.js
similarity index 64%
rename from webapp/components/_new/generic/UserAvatar/UserAvatar.story.js
rename to webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.story.js
index d4830f09a..2b4bccd5e 100644
--- a/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js
+++ b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.story.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import StoryRouter from 'storybook-vue-router'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import helpers from '~/storybook/helpers'
 import { user } from '~/components/UserTeaser/UserTeaser.story.js'
 import imageFile from './storybook/critical-avatar-white-background.png'
@@ -22,56 +22,56 @@ const userWithAvatar = {
   name: 'Jochen Image',
   avatar: { url: imageFile },
 }
-storiesOf('UserAvatar', module)
+storiesOf('ProfileAvatar', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .addDecorator(StoryRouter())
   .add('normal, with image', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithAvatar,
     }),
-    template: '<user-avatar :user="user" />',
+    template: '<profile-avatar :profile="user" />',
   }))
   .add('normal without image, anonymous user', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: anonymousUser,
     }),
-    template: '<user-avatar :user="user" />',
+    template: '<profile-avatar :profile="user" />',
   }))
   .add('normal without image, user initials', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
-    template: '<user-avatar :user="user" />',
+    template: '<profile-avatar :profile="user" />',
   }))
   .add('small, with image', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithAvatar,
     }),
-    template: '<user-avatar :user="user" size="small"/>',
+    template: '<profile-avatar :profile="user" size="small"/>',
   }))
   .add('small', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
-    template: '<user-avatar :user="user" size="small"/>',
+    template: '<profile-avatar :profile="user" size="small"/>',
   }))
   .add('large, with image', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithAvatar,
     }),
-    template: '<user-avatar :user="user" size="large"/>',
+    template: '<profile-avatar :profile="user" size="large"/>',
   }))
   .add('large', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
-    template: '<user-avatar :user="user" size="large"/>',
+    template: '<profile-avatar :profile="user" size="large"/>',
   }))
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.vue b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue
similarity index 74%
rename from webapp/components/_new/generic/UserAvatar/UserAvatar.vue
rename to webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue
index 08ace07c0..46e3968fc 100644
--- a/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
+++ b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue
@@ -1,14 +1,14 @@
 <template>
-  <div :class="['user-avatar', size && `--${this.size}`, !isAvatar && '--no-image']">
+  <div :class="['profile-avatar', size && `--${this.size}`, !isAvatar && '--no-image']">
     <!-- '--no-image' is neccessary, because otherwise we still have a little unwanted boarder araund the image for images with white backgrounds -->
-    <span class="initials">{{ userInitials }}</span>
+    <span class="initials">{{ profileInitials }}</span>
     <base-icon v-if="isAnonymous" name="eye-slash" />
     <img
       v-if="isAvatar"
-      :src="user.avatar | proxyApiUrl"
+      :src="profile.avatar | proxyApiUrl"
       class="image"
-      :alt="user.name"
-      :title="user.name"
+      :alt="profile.name"
+      :title="profile.name"
       @error="$event.target.style.display = 'none'"
     />
   </div>
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'UserAvatar',
+  name: 'ProfileAvatar',
   props: {
     size: {
       type: String,
@@ -25,30 +25,30 @@ export default {
         return value.match(/(small|large)/)
       },
     },
-    user: {
+    profile: {
       type: Object,
       default: null,
     },
   },
   computed: {
     isAnonymous() {
-      return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
+      return !this.profile || !this.profile.name || this.profile.name.toLowerCase() === 'anonymous'
     },
     isAvatar() {
       // TODO may we could test as well if the image is reachable? otherwise the background gets white and the initails can not be read
-      return this.user && this.user.avatar
+      return this.profile && this.profile.avatar
     },
-    userInitials() {
+    profileInitials() {
       if (this.isAnonymous) return ''
 
-      return this.user.name.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
+      return this.profile.name.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
     },
   },
 }
 </script>
 
 <style lang="scss">
-.user-avatar {
+.profile-avatar {
   position: relative;
   height: $size-avatar-base;
   width: $size-avatar-base;
diff --git a/webapp/components/_new/generic/UserAvatar/storybook/critical-avatar-white-background.png b/webapp/components/_new/generic/ProfileAvatar/storybook/critical-avatar-white-background.png
similarity index 100%
rename from webapp/components/_new/generic/UserAvatar/storybook/critical-avatar-white-background.png
rename to webapp/components/_new/generic/ProfileAvatar/storybook/critical-avatar-white-background.png
diff --git a/webapp/components/features/FollowList/FollowList.spec.js b/webapp/components/features/ProfileList/FollowList.spec.js
similarity index 100%
rename from webapp/components/features/FollowList/FollowList.spec.js
rename to webapp/components/features/ProfileList/FollowList.spec.js
diff --git a/webapp/components/features/FollowList/FollowList.story.js b/webapp/components/features/ProfileList/FollowList.story.js
similarity index 100%
rename from webapp/components/features/FollowList/FollowList.story.js
rename to webapp/components/features/ProfileList/FollowList.story.js
diff --git a/webapp/components/features/FollowList/FollowList.story.json b/webapp/components/features/ProfileList/FollowList.story.json
similarity index 100%
rename from webapp/components/features/FollowList/FollowList.story.json
rename to webapp/components/features/ProfileList/FollowList.story.json
diff --git a/webapp/components/features/ProfileList/FollowList.vue b/webapp/components/features/ProfileList/FollowList.vue
new file mode 100644
index 000000000..7e626308b
--- /dev/null
+++ b/webapp/components/features/ProfileList/FollowList.vue
@@ -0,0 +1,41 @@
+<template>
+  <profile-list
+    :uniqueName="`${type}Filter`"
+    :title="$filters.truncate(userName, 15) + ' ' + $t(`profile.network.${type}`)"
+    :titleNobody="$filters.truncate(userName, 15) + ' ' + $t(`profile.network.${type}Nobody`)"
+    :allProfilesCount="allConnectionsCount"
+    :profiles="connections"
+    :loading="loading"
+    @fetchAllProfiles="$emit('fetchAllConnections', type)"
+  />
+</template>
+
+<script>
+import ProfileList, { profileListVisibleCount } from '~/components/features/ProfileList/ProfileList'
+
+export const followListVisibleCount = profileListVisibleCount
+
+export default {
+  name: 'FollowerList',
+  components: {
+    ProfileList,
+  },
+  props: {
+    user: { type: Object, default: null },
+    type: { type: String, default: 'following' },
+    loading: { type: Boolean, default: false },
+  },
+  computed: {
+    userName() {
+      const { name } = this.user || {}
+      return name || this.$t('profile.userAnonym')
+    },
+    allConnectionsCount() {
+      return this.user[`${this.type}Count`]
+    },
+    connections() {
+      return this.user[this.type]
+    },
+  },
+}
+</script>
diff --git a/webapp/components/features/FollowList/FollowList.vue b/webapp/components/features/ProfileList/ProfileList.vue
similarity index 70%
rename from webapp/components/features/FollowList/FollowList.vue
rename to webapp/components/features/ProfileList/ProfileList.vue
index 114a610f1..29fdb2872 100644
--- a/webapp/components/features/FollowList/FollowList.vue
+++ b/webapp/components/features/ProfileList/ProfileList.vue
@@ -1,10 +1,10 @@
 <template>
-  <base-card class="follow-list">
-    <template v-if="connections && connections.length">
+  <base-card class="profile-list">
+    <template v-if="profiles.length">
       <h5 class="title spacer-x-small">
-        {{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }}
+        {{ title }}
       </h5>
-      <ul :class="connectionsClass">
+      <ul :class="profilesClass">
         <li
           v-for="connection in filteredConnections"
           :key="connection.id"
@@ -13,30 +13,30 @@
           <user-teaser :user="connection" />
         </li>
       </ul>
-      <base-button
-        v-if="hasMore"
-        :loading="loading"
-        class="spacer-x-small"
-        size="small"
-        @click="$emit('fetchAllConnections', type)"
-      >
-        {{
-          $t('profile.network.andMore', {
-            number: allConnectionsCount - connections.length,
-          })
-        }}
-      </base-button>
       <ds-input
-        v-if="!hasMore"
-        :name="`${type}Filter`"
+        v-if="isMoreAsVisible"
+        :name="uniqueName"
         :placeholder="filter"
         class="spacer-x-small"
         icon="filter"
         size="small"
         @input.native="setFilter"
       />
+      <base-button
+        v-if="hasMore"
+        :loading="loading"
+        class="spacer-x-small"
+        size="small"
+        @click="$emit('fetchAllProfiles')"
+      >
+        {{
+          $t('profile.network.andMore', {
+            number: allProfilesCount - profiles.length,
+          })
+        }}
+      </base-button>
     </template>
-    <p v-else class="nobody-message">{{ userName }} {{ $t(`profile.network.${type}Nobody`) }}</p>
+    <p v-else-if="titleNobody" class="nobody-message">{{ titleNobody }}</p>
   </base-card>
 </template>
 
@@ -44,41 +44,40 @@
 import { escape } from 'xregexp/xregexp-all.js'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
+export const profileListVisibleCount = 7
+
 export default {
-  name: 'FollowerList',
+  name: 'ProfileList',
   components: {
     UserTeaser,
   },
   props: {
-    user: { type: Object, default: null },
-    type: { type: String, default: 'following' },
+    uniqueName: { type: String, required: true },
+    title: { type: String, required: true },
+    titleNobody: { type: String, default: null },
+    allProfilesCount: { type: Number, required: true },
+    profiles: { type: Array, required: true },
     loading: { type: Boolean, default: false },
   },
   data() {
     return {
+      profileListVisibleCount,
       filter: null,
     }
   },
   computed: {
-    userName() {
-      const { name } = this.user || {}
-      return name || this.$t('profile.userAnonym')
-    },
-    allConnectionsCount() {
-      return this.user[`${this.type}Count`]
-    },
-    connections() {
-      return this.user[this.type]
-    },
     hasMore() {
-      return this.allConnectionsCount > this.connections.length
+      return this.allProfilesCount > this.profiles.length
     },
-    connectionsClass() {
-      return `connections${this.hasMore ? '' : ' --overflow'}`
+    isMoreAsVisible() {
+      return this.profiles.length > this.profileListVisibleCount
+    },
+    profilesClass() {
+      return `profiles${this.isMoreAsVisible ? ' --overflow' : ''}`
     },
     filteredConnections() {
       if (!this.filter) {
-        return this.connections
+        return this.profiles
       }
 
       // @example
@@ -89,7 +88,7 @@ export default {
         'i',
       )
 
-      const fuzzyScores = this.connections
+      const fuzzyScores = this.profiles
         .map((user) => {
           const match = user.name.match(fuzzyExpression)
 
@@ -122,7 +121,7 @@ export default {
 </script>
 
 <style lang="scss">
-.follow-list {
+.profile-list {
   display: flex;
   flex-direction: column;
   position: relative;
@@ -133,7 +132,7 @@ export default {
     font-size: $font-size-base;
   }
 
-  .connections {
+  .profiles {
     height: $size-height-connections;
     padding: $space-none;
     list-style-type: none;
diff --git a/webapp/components/generic/SearchGroup/SearchGroup.vue b/webapp/components/generic/SearchGroup/SearchGroup.vue
new file mode 100644
index 000000000..652c2743f
--- /dev/null
+++ b/webapp/components/generic/SearchGroup/SearchGroup.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="search-group">
+    <p class="label">{{ option.groupName | truncate(70) }}</p>
+    <div class="metadata"></div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'SearchGroup',
+  props: {
+    option: { type: Object, required: true },
+  },
+}
+</script>
+
+<style lang="scss">
+.search-group {
+  display: flex;
+
+  > .label {
+    flex-grow: 1;
+    padding: 0 $space-x-small;
+  }
+
+  > .metadata {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    color: $text-color-softer;
+    font-size: $font-size-small;
+
+    > .counts > .counter-icon {
+      margin: 0 $space-x-small;
+    }
+  }
+}
+</style>
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.story.js b/webapp/components/generic/SearchableInput/SearchableInput.story.js
index 62e422a67..f483129eb 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.story.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.story.js
@@ -78,8 +78,7 @@ export const searchResults = [
     id: 'u1',
     __typename: 'User',
     avatar: {
-      url:
-        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Peter Lustig',
     slug: 'peter-lustig',
@@ -88,8 +87,7 @@ export const searchResults = [
     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
     __typename: 'User',
     avatar: {
-      url:
-        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Herbert Schultz',
     slug: 'herbert-schultz',
@@ -98,8 +96,7 @@ export const searchResults = [
     id: 'u2',
     __typename: 'User',
     avatar: {
-      url:
-        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Bob der Baumeister',
     slug: 'bob-der-baumeister',
@@ -108,8 +105,7 @@ export const searchResults = [
     id: '7b654f72-f4da-4315-8bed-39de0859754b',
     __typename: 'User',
     avatar: {
-      url:
-        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Tonya Mohr',
     slug: 'tonya-mohr',
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue
index afafa716c..2149732c5 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.vue
+++ b/webapp/components/generic/SearchableInput/SearchableInput.vue
@@ -35,6 +35,12 @@
         >
           <search-post :option="option" />
         </p>
+        <p
+          v-if="option.__typename === 'Group'"
+          :class="{ 'option-with-heading': isFirstOfType(option) }"
+        >
+          <search-group :option="option" />
+        </p>
         <p
           v-if="option.__typename === 'Tag'"
           :class="{ 'option-with-heading': isFirstOfType(option) }"
@@ -51,6 +57,7 @@
 import { isEmpty } from 'lodash'
 import SearchHeading from '~/components/generic/SearchHeading/SearchHeading.vue'
 import SearchPost from '~/components/generic/SearchPost/SearchPost.vue'
+import SearchGroup from '~/components/generic/SearchGroup/SearchGroup.vue'
 import HcHashtag from '~/components/Hashtag/Hashtag.vue'
 import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 
@@ -58,6 +65,7 @@ export default {
   name: 'SearchableInput',
   components: {
     SearchHeading,
+    SearchGroup,
     SearchPost,
     HcHashtag,
     UserTeaser,
@@ -140,8 +148,17 @@ export default {
         this.searchValue = this.previousSearchTerm
       })
     },
-    isPost(item) {
-      return item.__typename === 'Post'
+    getRouteName(item) {
+      switch (item.__typename) {
+        case 'Post':
+          return 'post-id-slug'
+        case 'User':
+          return 'profile-id-slug'
+        case 'Group':
+          return 'group-id-slug'
+        default:
+          return null
+      }
     },
     isTag(item) {
       return item.__typename === 'Tag'
@@ -150,7 +167,7 @@ export default {
       this.$nextTick(() => {
         if (!this.isTag(item)) {
           this.$router.push({
-            name: this.isPost(item) ? 'post-id-slug' : 'profile-id-slug',
+            name: this.getRouteName(item),
             params: { id: item.id, slug: item.slug },
           })
         } else {
diff --git a/webapp/components/utils/InternalPages.js b/webapp/components/utils/InternalPages.js
index f45601af9..dfdc04a6e 100644
--- a/webapp/components/utils/InternalPages.js
+++ b/webapp/components/utils/InternalPages.js
@@ -4,7 +4,11 @@ export const defaultPageParamsPages = {
   ORGANIZATION: new PageParams({
     name: 'organization',
 
-    externalLink: null, // if string is defined and not empty it's dominating
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null, // if defined it's dominating
 
     internalPage: {
       pageRoute: '/organization', // static, don't change! internal page in case no external is defined
@@ -21,7 +25,11 @@ export const defaultPageParamsPages = {
   DONATE: new PageParams({
     name: 'donate',
 
-    externalLink: null, // if string is defined and not empty it's dominating
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null, // if defined it's dominating
 
     internalPage: {
       pageRoute: '/donate', // static, don't change! internal page in case no external is defined
@@ -38,7 +46,11 @@ export const defaultPageParamsPages = {
   IMPRINT: new PageParams({
     name: 'imprint',
 
-    externalLink: null, // if string is defined and not empty it's dominating
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null, // if defined it's dominating
 
     internalPage: {
       pageRoute: '/imprint', // static, don't change! internal page in case no external is defined
@@ -55,7 +67,11 @@ export const defaultPageParamsPages = {
   TERMS_AND_CONDITIONS: new PageParams({
     name: 'terms-and-conditions',
 
-    externalLink: null, // if string is defined and not empty it's dominating
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null, // if defined it's dominating
 
     internalPage: {
       pageRoute: '/terms-and-conditions', // static, don't change! internal page in case no external is defined
@@ -72,7 +88,11 @@ export const defaultPageParamsPages = {
   CODE_OF_CONDUCT: new PageParams({
     name: 'code-of-conduct',
 
-    externalLink: null, // if string is defined and not empty it's dominating
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null, // if defined it's dominating
 
     internalPage: {
       pageRoute: '/code-of-conduct', // static, don't change! internal page in case no external is defined
@@ -89,7 +109,11 @@ export const defaultPageParamsPages = {
   DATA_PRIVACY: new PageParams({
     name: 'data-privacy',
 
-    externalLink: null, // if string is defined and not empty it's dominating
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null, // if defined it's dominating
 
     internalPage: {
       pageRoute: '/data-privacy', // static, don't change! internal page in case no external is defined
@@ -106,7 +130,11 @@ export const defaultPageParamsPages = {
   FAQ: new PageParams({
     name: 'faq',
 
-    externalLink: null, // if string is defined and not empty it's dominating
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null, // if defined it's dominating
 
     internalPage: {
       pageRoute: '/faq', // static, don't change! internal page in case no external is defined
@@ -123,7 +151,11 @@ export const defaultPageParamsPages = {
   SUPPORT: new PageParams({
     name: 'support',
 
-    externalLink: null,
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null, // if defined it's dominating
 
     internalPage: {
       pageRoute: '/support', // static, don't change '*/support'! internal page in case no external is defined
diff --git a/webapp/components/utils/PageParams.js b/webapp/components/utils/PageParams.js
index 9d1fc6dfe..539034a1c 100644
--- a/webapp/components/utils/PageParams.js
+++ b/webapp/components/utils/PageParams.js
@@ -24,18 +24,22 @@ export class PageParams {
   }
 
   get isInternalPage() {
-    return this.noStringDefined(this.externalLink)
+    return !(this.externalLink && !this.noStringDefined(this.externalLink.url))
   }
 
   get link() {
-    return this.isInternalPage ? this.internalPage.pageRoute : this.externalLink
+    return this.isInternalPage ? this.internalPage.pageRoute : this.externalLink.url
   }
 
   redirectToPage(thisComponent) {
     if (this.isInternalPage) {
       thisComponent.$router.push(this.internalPage.pageRoute)
     } else if (typeof window !== 'undefined') {
-      window.location.href = this.externalLink
+      if (this.externalLink.target === '_blank') {
+        window.open(this.externalLink.url, this.externalLink.target)
+      } else {
+        window.location.href = this.externalLink.url
+      }
     }
   }
 }
diff --git a/webapp/config/index.js b/webapp/config/index.js
index 00df85bac..db030e929 100644
--- a/webapp/config/index.js
+++ b/webapp/config/index.js
@@ -33,6 +33,7 @@ const options = {
   // Cookies
   COOKIE_EXPIRE_TIME: process.env.COOKIE_EXPIRE_TIME || 730, // Two years by default
   COOKIE_HTTPS_ONLY: process.env.COOKIE_HTTPS_ONLY || process.env.NODE_ENV === 'production', // ensure true in production if not set explicitly
+  CATEGORIES_ACTIVE: process.env.CATEGORIES_ACTIVE === 'true' || false,
 }
 
 const CONFIG = {
diff --git a/webapp/constants/categories.js b/webapp/constants/categories.js
new file mode 100644
index 000000000..64ceb9021
--- /dev/null
+++ b/webapp/constants/categories.js
@@ -0,0 +1,3 @@
+// this file is duplicated in `backend/src/constants/metadata.js` and `webapp/constants/metadata.js`
+export const CATEGORIES_MIN = 1
+export const CATEGORIES_MAX = 3
diff --git a/webapp/constants/donation.js b/webapp/constants/donation.js
new file mode 100644
index 000000000..3e36ae9a8
--- /dev/null
+++ b/webapp/constants/donation.js
@@ -0,0 +1 @@
+export const PROGRESS_BAR_COLOR_TYPE = 'gradient' // 'uni' is the other option
diff --git a/webapp/constants/groups.js b/webapp/constants/groups.js
new file mode 100644
index 000000000..1c49d3ff3
--- /dev/null
+++ b/webapp/constants/groups.js
@@ -0,0 +1,5 @@
+// this file is duplicated in `backend/src/constants/group.js` and `webapp/constants/group.js`
+export const NAME_LENGTH_MIN = 3
+export const NAME_LENGTH_MAX = 50
+export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 100 // with removed HTML tags
+export const SHOW_GROUP_BUTTON_IN_HEADER = true
diff --git a/webapp/constants/headerMenu.js b/webapp/constants/headerMenu.js
new file mode 100644
index 000000000..aa87a598c
--- /dev/null
+++ b/webapp/constants/headerMenu.js
@@ -0,0 +1,13 @@
+export default {
+  MENU: [
+    // {
+    //   nameIdent: 'nameIdent',
+    //   path: '/',
+    // },
+    // {
+    //   nameIdent: 'nameIdent',
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+  ],
+}
diff --git a/webapp/constants/links.js b/webapp/constants/links.js
index 43d1dda46..b03966b68 100644
--- a/webapp/constants/links.js
+++ b/webapp/constants/links.js
@@ -3,7 +3,11 @@
 import { defaultPageParamsPages } from '~/components/utils/InternalPages.js'
 
 const ORGANIZATION = defaultPageParamsPages.ORGANIZATION.overwrite({
-  // externalLink: 'https://ocelot.social', // if string is defined and not empty it's dominating
+  // if defined it's dominating
+  // externalLink: {
+  //   url: 'https://ocelot.social',
+  //  target: '_blank',
+  // },
 
   internalPage: {
     // footerIdent: 'site.made', // localized string identifier, if undefined default is used
@@ -16,8 +20,12 @@ const ORGANIZATION = defaultPageParamsPages.ORGANIZATION.overwrite({
   },
 })
 const DONATE = defaultPageParamsPages.DONATE.overwrite({
+  // if defined it's dominating
+  // externalLink: {
   // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
-  // externalLink: 'https://ocelot-social.herokuapp.com/donations', // if string is defined and not empty it's dominating
+  //  url: 'https://ocelot-social.herokuapp.com/donations',
+  //  target: '_blank',
+  // },
 
   internalPage: {
     // footerIdent: 'site.donate', // localized string identifier, if undefined default is used
@@ -30,8 +38,11 @@ const DONATE = defaultPageParamsPages.DONATE.overwrite({
   },
 })
 const IMPRINT = defaultPageParamsPages.IMPRINT.overwrite({
+  // externalLink: {
   // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
-  // externalLink: 'https://ocelot-social.herokuapp.com/imprint', // if string is defined and not empty it's dominating
+  //  url: 'https://ocelot-social.herokuapp.com/imprint',
+  //  target: '_blank',
+  // },
 
   internalPage: {
     // footerIdent: 'site.imprint', // localized string identifier, if undefined default is used
@@ -44,7 +55,7 @@ const IMPRINT = defaultPageParamsPages.IMPRINT.overwrite({
   },
 })
 const TERMS_AND_CONDITIONS = defaultPageParamsPages.TERMS_AND_CONDITIONS.overwrite({
-  // externalLink: null, // if string is defined and not empty it's dominating
+  // externalLink: null, // if defined it's dominating
 
   internalPage: {
     // footerIdent: 'site.termsAndConditions', // localized string identifier, if undefined default is used
@@ -57,7 +68,7 @@ const TERMS_AND_CONDITIONS = defaultPageParamsPages.TERMS_AND_CONDITIONS.overwri
   },
 })
 const CODE_OF_CONDUCT = defaultPageParamsPages.CODE_OF_CONDUCT.overwrite({
-  // externalLink: null, // if string is defined and not empty it's dominating
+  // externalLink: null, // if defined it's dominating
 
   internalPage: {
     // footerIdent: 'site.code-of-conduct', // localized string identifier, if undefined default is used
@@ -70,7 +81,7 @@ const CODE_OF_CONDUCT = defaultPageParamsPages.CODE_OF_CONDUCT.overwrite({
   },
 })
 const DATA_PRIVACY = defaultPageParamsPages.DATA_PRIVACY.overwrite({
-  // externalLink: null, // if string is defined and not empty it's dominating
+  // externalLink: null, // if defined it's dominating
 
   internalPage: {
     // footerIdent: 'site.data-privacy', // localized string identifier, if undefined default is used
@@ -83,7 +94,7 @@ const DATA_PRIVACY = defaultPageParamsPages.DATA_PRIVACY.overwrite({
   },
 })
 const FAQ = defaultPageParamsPages.FAQ.overwrite({
-  // externalLink: null, // if string is defined and not empty it's dominating
+  // externalLink: null, // if defined it's dominating
 
   internalPage: {
     // footerIdent: 'site.faq', // localized string identifier, if undefined default is used
@@ -96,7 +107,11 @@ const FAQ = defaultPageParamsPages.FAQ.overwrite({
   },
 })
 const SUPPORT = defaultPageParamsPages.SUPPORT.overwrite({
-  // externalLink: null, // if string is defined and not empty it's dominating
+  // if defined it's dominating
+  // externalLink: {
+  //  url: 'https://ocelot.social',
+  //  target: '_blank',
+  // },
 
   internalPage: {
     // footerIdent: 'site.support', // localized string identifier, if undefined default is used
diff --git a/webapp/constants/logos.js b/webapp/constants/logos.js
index d093c7b46..714e78a2c 100644
--- a/webapp/constants/logos.js
+++ b/webapp/constants/logos.js
@@ -2,6 +2,20 @@
 // this are the paths in the webapp
 export default {
   LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
+  LOGO_HEADER_WIDTH: '130px',
+  LOGO_HEADER_CLICK: {
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null,
+    internalPath: {
+      to: {
+        name: 'index',
+      },
+      scrollTo: '.main-navigation',
+    },
+  },
   LOGO_SIGNUP_PATH: '/img/custom/logo-squared.svg',
   LOGO_WELCOME_PATH: '/img/custom/logo-squared.svg',
   LOGO_LOGOUT_PATH: '/img/custom/logo-squared.svg',
diff --git a/webapp/graphql/CategoryQuery.js b/webapp/graphql/CategoryQuery.js
index 4d2ae9d8f..383a07cba 100644
--- a/webapp/graphql/CategoryQuery.js
+++ b/webapp/graphql/CategoryQuery.js
@@ -3,7 +3,7 @@ import gql from 'graphql-tag'
 export default () => {
   return gql`
     query {
-      Category {
+      Category(orderBy: slug_asc) {
         id
         slug
         icon
diff --git a/webapp/graphql/CommentMutations.js b/webapp/graphql/CommentMutations.js
index a73ebb00c..191edf217 100644
--- a/webapp/graphql/CommentMutations.js
+++ b/webapp/graphql/CommentMutations.js
@@ -4,7 +4,7 @@ export default (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return {
     CreateComment: gql`
-      mutation($postId: ID!, $content: String!) {
+      mutation ($postId: ID!, $content: String!) {
         CreateComment(postId: $postId, content: $content) {
           id
           contentExcerpt
@@ -36,7 +36,7 @@ export default (i18n) => {
       }
     `,
     UpdateComment: gql`
-      mutation($content: String!, $id: ID!) {
+      mutation ($content: String!, $id: ID!) {
         UpdateComment(content: $content, id: $id) {
           id
           contentExcerpt
diff --git a/webapp/graphql/Donations.js b/webapp/graphql/Donations.js
index e412ee4fa..573158cbf 100644
--- a/webapp/graphql/Donations.js
+++ b/webapp/graphql/Donations.js
@@ -13,7 +13,7 @@ export const DonationsQuery = () => gql`
 
 export const UpdateDonations = () => {
   return gql`
-    mutation($showDonations: Boolean, $goal: Int, $progress: Int) {
+    mutation ($showDonations: Boolean, $goal: Int, $progress: Int) {
       UpdateDonations(showDonations: $showDonations, goal: $goal, progress: $progress) {
         id
         showDonations
diff --git a/webapp/graphql/EmailAddress.js b/webapp/graphql/EmailAddress.js
index 675ec6bed..b3b4df695 100644
--- a/webapp/graphql/EmailAddress.js
+++ b/webapp/graphql/EmailAddress.js
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
 export const AddEmailAddressMutation = gql`
-  mutation($email: String!) {
+  mutation ($email: String!) {
     AddEmailAddress(email: $email) {
       email
       createdAt
@@ -10,7 +10,7 @@ export const AddEmailAddressMutation = gql`
 `
 
 export const VerifyEmailAddressMutation = gql`
-  mutation($email: String!, $nonce: String!) {
+  mutation ($email: String!, $nonce: String!) {
     VerifyEmailAddress(email: $email, nonce: $nonce) {
       email
       verifiedAt
diff --git a/webapp/graphql/EmbedQuery.js b/webapp/graphql/EmbedQuery.js
index 685095d34..70450722d 100644
--- a/webapp/graphql/EmbedQuery.js
+++ b/webapp/graphql/EmbedQuery.js
@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 
 export default function () {
   return gql`
-    query($url: String!) {
+    query ($url: String!) {
       embed(url: $url) {
         type
         title
diff --git a/webapp/graphql/Fragments.js b/webapp/graphql/Fragments.js
index 7b05e2369..23d2c11d3 100644
--- a/webapp/graphql/Fragments.js
+++ b/webapp/graphql/Fragments.js
@@ -12,6 +12,7 @@ export const userFragment = gql`
     deleted
   }
 `
+
 export const locationAndBadgesFragment = (lang) => gql`
   fragment locationAndBadges on User {
     location {
@@ -61,6 +62,29 @@ export const postFragment = gql`
   }
 `
 
+export const groupFragment = gql`
+  fragment group on Group {
+    id
+    groupName: name
+    slug
+    disabled
+    deleted
+    about
+    description
+    descriptionExcerpt
+    groupType
+    actionRadius
+    categories {
+      id
+      slug
+      name
+      icon
+    }
+    locationName
+    myRole
+  }
+`
+
 export const postCountsFragment = gql`
   fragment postCounts on Post {
     commentsCount
@@ -78,6 +102,12 @@ export const tagsCategoriesAndPinnedFragment = gql`
     tags {
       id
     }
+    categories {
+      id
+      slug
+      name
+      icon
+    }
     pinnedBy {
       id
       name
diff --git a/webapp/graphql/Moderation.js b/webapp/graphql/Moderation.js
index f4796d080..8dc20f987 100644
--- a/webapp/graphql/Moderation.js
+++ b/webapp/graphql/Moderation.js
@@ -3,7 +3,7 @@ import gql from 'graphql-tag'
 export const reportsListQuery = () => {
   // no limit for the moment like before: "reports(first: 20, orderBy: createdAt_desc)"
   return gql`
-    query(
+    query (
       $orderBy: ReportOrdering
       $first: Int
       $offset: Int
@@ -94,7 +94,7 @@ export const reportsListQuery = () => {
 
 export const reportMutation = () => {
   return gql`
-    mutation($resourceId: ID!, $reasonCategory: ReasonCategory!, $reasonDescription: String!) {
+    mutation ($resourceId: ID!, $reasonCategory: ReasonCategory!, $reasonDescription: String!) {
       fileReport(
         resourceId: $resourceId
         reasonCategory: $reasonCategory
@@ -108,7 +108,7 @@ export const reportMutation = () => {
 
 export const reviewMutation = () => {
   return gql`
-    mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
+    mutation ($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
       review(resourceId: $resourceId, disable: $disable, closed: $closed) {
         disable
       }
diff --git a/webapp/graphql/PostMutations.js b/webapp/graphql/PostMutations.js
index af91d245e..8880a93b0 100644
--- a/webapp/graphql/PostMutations.js
+++ b/webapp/graphql/PostMutations.js
@@ -3,8 +3,20 @@ import gql from 'graphql-tag'
 export default () => {
   return {
     CreatePost: gql`
-      mutation($title: String!, $content: String!, $categoryIds: [ID], $image: ImageInput) {
-        CreatePost(title: $title, content: $content, categoryIds: $categoryIds, image: $image) {
+      mutation (
+        $title: String!
+        $content: String!
+        $categoryIds: [ID]
+        $image: ImageInput
+        $groupId: ID
+      ) {
+        CreatePost(
+          title: $title
+          content: $content
+          categoryIds: $categoryIds
+          image: $image
+          groupId: $groupId
+        ) {
           title
           slug
           content
@@ -18,7 +30,7 @@ export default () => {
       }
     `,
     UpdatePost: gql`
-      mutation(
+      mutation (
         $id: ID!
         $title: String!
         $content: String!
@@ -52,14 +64,14 @@ export default () => {
       }
     `,
     DeletePost: gql`
-      mutation($id: ID!) {
+      mutation ($id: ID!) {
         DeletePost(id: $id) {
           id
         }
       }
     `,
     AddPostEmotionsMutation: gql`
-      mutation($to: _PostInput!, $data: _EMOTEDInput!) {
+      mutation ($to: _PostInput!, $data: _EMOTEDInput!) {
         AddPostEmotions(to: $to, data: $data) {
           emotion
           from {
@@ -72,7 +84,7 @@ export default () => {
       }
     `,
     RemovePostEmotionsMutation: gql`
-      mutation($to: _PostInput!, $data: _EMOTEDInput!) {
+      mutation ($to: _PostInput!, $data: _EMOTEDInput!) {
         RemovePostEmotions(to: $to, data: $data) {
           emotion
           from {
@@ -85,7 +97,7 @@ export default () => {
       }
     `,
     pinPost: gql`
-      mutation($id: ID!) {
+      mutation ($id: ID!) {
         pinPost(id: $id) {
           id
           title
@@ -102,7 +114,7 @@ export default () => {
       }
     `,
     unpinPost: gql`
-      mutation($id: ID!) {
+      mutation ($id: ID!) {
         unpinPost(id: $id) {
           id
           title
@@ -119,7 +131,7 @@ export default () => {
       }
     `,
     markTeaserAsViewed: gql`
-      mutation($id: ID!) {
+      mutation ($id: ID!) {
         markTeaserAsViewed(id: $id) {
           id
         }
diff --git a/webapp/graphql/PostQuery.js b/webapp/graphql/PostQuery.js
index 38c90e438..1b5c41984 100644
--- a/webapp/graphql/PostQuery.js
+++ b/webapp/graphql/PostQuery.js
@@ -39,6 +39,11 @@ export default (i18n) => {
             ...locationAndBadges
           }
         }
+        group {
+          id
+          name
+          slug
+        }
       }
     }
   `
@@ -64,6 +69,11 @@ export const filterPosts = (i18n) => {
           ...userCounts
           ...locationAndBadges
         }
+        group {
+          id
+          name
+          slug
+        }
       }
     }
   `
@@ -94,6 +104,11 @@ export const profilePagePosts = (i18n) => {
           ...userCounts
           ...locationAndBadges
         }
+        group {
+          id
+          name
+          slug
+        }
       }
     }
   `
diff --git a/webapp/graphql/Registration.js b/webapp/graphql/Registration.js
index fcf9c52a7..b6cc610d9 100644
--- a/webapp/graphql/Registration.js
+++ b/webapp/graphql/Registration.js
@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 export const SignupVerificationMutation = gql`
-  mutation(
+  mutation (
     $nonce: String!
     $name: String!
     $email: String!
diff --git a/webapp/graphql/SaveCategories.js b/webapp/graphql/SaveCategories.js
new file mode 100644
index 000000000..d6db34b8a
--- /dev/null
+++ b/webapp/graphql/SaveCategories.js
@@ -0,0 +1,9 @@
+import gql from 'graphql-tag'
+
+export default () => {
+  return gql`
+    mutation ($activeCategories: [String]) {
+      saveCategorySettings(activeCategories: $activeCategories)
+    }
+  `
+}
diff --git a/webapp/graphql/Search.js b/webapp/graphql/Search.js
index 96e507b2d..b8c4fcb51 100644
--- a/webapp/graphql/Search.js
+++ b/webapp/graphql/Search.js
@@ -1,11 +1,17 @@
 import gql from 'graphql-tag'
-import { userFragment, postFragment, tagsCategoriesAndPinnedFragment } from './Fragments'
+import {
+  userFragment,
+  postFragment,
+  groupFragment,
+  tagsCategoriesAndPinnedFragment,
+} from './Fragments'
 
 export const searchQuery = gql`
   ${userFragment}
   ${postFragment}
+  ${groupFragment}
 
-  query($query: String!) {
+  query ($query: String!) {
     searchResults(query: $query, limit: 5) {
       __typename
       ... on Post {
@@ -24,6 +30,9 @@ export const searchQuery = gql`
       ... on Tag {
         id
       }
+      ... on Group {
+        ...group
+      }
     }
   }
 `
@@ -33,7 +42,7 @@ export const searchPosts = gql`
   ${postFragment}
   ${tagsCategoriesAndPinnedFragment}
 
-  query($query: String!, $firstPosts: Int, $postsOffset: Int) {
+  query ($query: String!, $firstPosts: Int, $postsOffset: Int) {
     searchPosts(query: $query, firstPosts: $firstPosts, postsOffset: $postsOffset) {
       postCount
       posts {
@@ -52,10 +61,50 @@ export const searchPosts = gql`
   }
 `
 
+export const searchGroups = (i18n) => {
+  const lang = i18n ? i18n.locale().toUpperCase() : 'EN'
+  return gql`
+    query ($query: String!, $firstGroups: Int, $groupsOffset: Int) {
+      searchGroups(query: $query, firstGroups: $firstGroups, groupsOffset: $groupsOffset) {
+        groupCount
+        groups {
+          __typename
+          id
+          groupName: name
+          slug
+          createdAt
+          updatedAt
+          disabled
+          deleted
+          about
+          description
+          descriptionExcerpt
+          groupType
+          actionRadius
+          categories {
+            id
+            slug
+            name
+            icon
+         }
+          avatar {
+            url
+          }
+          locationName
+          location {
+            name: name${lang}
+          }
+          myRole
+        }
+      }
+    }
+  `
+}
+
 export const searchUsers = gql`
   ${userFragment}
 
-  query($query: String!, $firstUsers: Int, $usersOffset: Int) {
+  query ($query: String!, $firstUsers: Int, $usersOffset: Int) {
     searchUsers(query: $query, firstUsers: $firstUsers, usersOffset: $usersOffset) {
       userCount
       users {
@@ -67,7 +116,7 @@ export const searchUsers = gql`
 `
 
 export const searchHashtags = gql`
-  query($query: String!, $firstHashtags: Int, $hashtagsOffset: Int) {
+  query ($query: String!, $firstHashtags: Int, $hashtagsOffset: Int) {
     searchHashtags(query: $query, firstHashtags: $firstHashtags, hashtagsOffset: $hashtagsOffset) {
       hashtagCount
       hashtags {
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index b3f131238..0d3a24d8b 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -49,8 +49,8 @@ export default (i18n) => {
 
 export const minimisedUserQuery = () => {
   return gql`
-    query {
-      User(orderBy: slug_asc) {
+    query ($slug: String) {
+      User(slug: $slug, orderBy: slug_asc) {
         id
         slug
         name
@@ -68,7 +68,7 @@ export const notificationQuery = (i18n) => {
     ${commentFragment}
     ${postFragment}
 
-    query($read: Boolean, $orderBy: NotificationOrdering, $first: Int, $offset: Int) {
+    query ($read: Boolean, $orderBy: NotificationOrdering, $first: Int, $offset: Int) {
       notifications(read: $read, orderBy: $orderBy, first: $first, offset: $offset) {
         id
         read
@@ -107,7 +107,7 @@ export const markAsReadMutation = (i18n) => {
     ${commentFragment}
     ${postFragment}
 
-    mutation($id: ID!) {
+    mutation ($id: ID!) {
       markAsRead(id: $id) {
         id
         read
@@ -180,7 +180,7 @@ export const followUserMutation = (i18n) => {
     ${userFragment}
     ${userCountsFragment}
 
-    mutation($id: ID!) {
+    mutation ($id: ID!) {
       followUser(id: $id) {
         ...user
         ...userCounts
@@ -200,7 +200,7 @@ export const unfollowUserMutation = (i18n) => {
     ${userFragment}
     ${userCountsFragment}
 
-    mutation($id: ID!) {
+    mutation ($id: ID!) {
       unfollowUser(id: $id) {
         ...user
         ...userCounts
@@ -217,29 +217,29 @@ export const unfollowUserMutation = (i18n) => {
 
 export const updateUserMutation = () => {
   return gql`
-    mutation(
+    mutation (
       $id: ID!
       $slug: String
       $name: String
-      $locationName: String
       $about: String
       $allowEmbedIframes: Boolean
       $showShoutsPublicly: Boolean
       $sendNotificationEmails: Boolean
       $termsAndConditionsAgreedVersion: String
       $avatar: ImageInput
+      $locationName: String # empty string '' sets it to null
     ) {
       UpdateUser(
         id: $id
         slug: $slug
         name: $name
-        locationName: $locationName
         about: $about
         allowEmbedIframes: $allowEmbedIframes
         showShoutsPublicly: $showShoutsPublicly
         sendNotificationEmails: $sendNotificationEmails
         termsAndConditionsAgreedVersion: $termsAndConditionsAgreedVersion
         avatar: $avatar
+        locationName: $locationName
       ) {
         id
         slug
@@ -260,7 +260,7 @@ export const updateUserMutation = () => {
 }
 
 export const checkSlugAvailableQuery = gql`
-  query($slug: String!) {
+  query ($slug: String!) {
     User(slug: $slug) {
       slug
     }
@@ -285,6 +285,7 @@ export const currentUserQuery = gql`
         id
         url
       }
+      activeCategories
     }
   }
 `
@@ -303,7 +304,7 @@ export const userDataQuery = (i18n) => {
     ${userFragment}
     ${postFragment}
     ${commentFragment}
-    query($id: ID!) {
+    query ($id: ID!) {
       userData(id: $id) {
         user {
           ...user
diff --git a/webapp/graphql/admin/Roles.js b/webapp/graphql/admin/Roles.js
index 8c1a9f412..4015ad06c 100644
--- a/webapp/graphql/admin/Roles.js
+++ b/webapp/graphql/admin/Roles.js
@@ -10,7 +10,7 @@ export const FetchAllRoles = () => {
 
 export const updateUserRole = (role, id) => {
   return gql`
-    mutation($role: UserGroup!, $id: ID!) {
+    mutation ($role: UserRole!, $id: ID!) {
       switchUserRole(role: $role, id: $id) {
         name
         role
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
new file mode 100644
index 000000000..72e49ebe3
--- /dev/null
+++ b/webapp/graphql/groups.js
@@ -0,0 +1,202 @@
+import gql from 'graphql-tag'
+
+// ------ mutations
+
+export const createGroupMutation = () => {
+  return gql`
+    mutation (
+      $id: ID
+      $name: String!
+      $slug: String
+      $about: String
+      $description: String!
+      $groupType: GroupType!
+      $actionRadius: GroupActionRadius!
+      $categoryIds: [ID]
+      $locationName: String # empty string '' sets it to null
+    ) {
+      CreateGroup(
+        id: $id
+        name: $name
+        slug: $slug
+        about: $about
+        description: $description
+        groupType: $groupType
+        actionRadius: $actionRadius
+        categoryIds: $categoryIds
+        locationName: $locationName
+      ) {
+        id
+        name
+        slug
+        createdAt
+        updatedAt
+        disabled
+        deleted
+        about
+        description
+        descriptionExcerpt
+        groupType
+        actionRadius
+        categories {
+          id
+          slug
+          name
+          icon
+        }
+        locationName
+        myRole
+      }
+    }
+  `
+}
+
+export const updateGroupMutation = () => {
+  return gql`
+    mutation (
+      $id: ID!
+      $name: String
+      $slug: String
+      $about: String
+      $description: String
+      $actionRadius: GroupActionRadius
+      $categoryIds: [ID]
+      $avatar: ImageInput
+      $locationName: String # empty string '' sets it to null
+    ) {
+      UpdateGroup(
+        id: $id
+        name: $name
+        slug: $slug
+        about: $about
+        description: $description
+        actionRadius: $actionRadius
+        categoryIds: $categoryIds
+        avatar: $avatar
+        locationName: $locationName
+      ) {
+        id
+        name
+        slug
+        createdAt
+        updatedAt
+        disabled
+        deleted
+        about
+        description
+        descriptionExcerpt
+        groupType
+        actionRadius
+        categories {
+          id
+          slug
+          name
+          icon
+        }
+        avatar {
+          url
+        }
+        locationName
+        myRole
+      }
+    }
+  `
+}
+
+export const joinGroupMutation = () => {
+  return gql`
+    mutation ($groupId: ID!, $userId: ID!) {
+      JoinGroup(groupId: $groupId, userId: $userId) {
+        id
+        name
+        slug
+        myRoleInGroup
+      }
+    }
+  `
+}
+
+export const leaveGroupMutation = () => {
+  return gql`
+    mutation ($groupId: ID!, $userId: ID!) {
+      LeaveGroup(groupId: $groupId, userId: $userId) {
+        id
+        name
+        slug
+        myRoleInGroup
+      }
+    }
+  `
+}
+
+export const changeGroupMemberRoleMutation = () => {
+  return gql`
+    mutation ($groupId: ID!, $userId: ID!, $roleInGroup: GroupMemberRole!) {
+      ChangeGroupMemberRole(groupId: $groupId, userId: $userId, roleInGroup: $roleInGroup) {
+        id
+        name
+        slug
+        myRoleInGroup
+      }
+    }
+  `
+}
+
+// ------ queries
+
+export const groupQuery = (i18n) => {
+  const lang = i18n ? i18n.locale().toUpperCase() : 'EN'
+  return gql`
+    query ($isMember: Boolean, $id: ID, $slug: String, $first: Int, $offset: Int) {
+      Group(isMember: $isMember, id: $id, slug: $slug, first: $first, offset: $offset) {
+        id
+        name
+        slug
+        createdAt
+        updatedAt
+        disabled
+        deleted
+        about
+        description
+        descriptionExcerpt
+        groupType
+        actionRadius
+        categories {
+          id
+          slug
+          name
+          icon
+        }
+        avatar {
+          url
+        }
+        locationName
+        location {
+          name: name${lang}
+        }
+        myRole
+      }
+    }
+  `
+}
+
+export const groupMembersQuery = () => {
+  return gql`
+    query ($id: ID!) {
+      GroupMembers(id: $id) {
+        id
+        name
+        slug
+        myRoleInGroup
+      }
+    }
+  `
+}
+
+export const groupCountQuery = () => {
+  return gql`
+    query ($isMember: Boolean) {
+      GroupCount(isMember: $isMember)
+    }
+  `
+}
diff --git a/webapp/graphql/location.js b/webapp/graphql/location.js
index 0fa2c2a2d..1fff64782 100644
--- a/webapp/graphql/location.js
+++ b/webapp/graphql/location.js
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
 export const queryLocations = () => gql`
-  query($place: String!, $lang: String!) {
+  query ($place: String!, $lang: String!) {
     queryLocations(place: $place, lang: $lang) {
       place_name
       id
diff --git a/webapp/graphql/settings/BlockedUsers.js b/webapp/graphql/settings/BlockedUsers.js
index be1765138..0c642b352 100644
--- a/webapp/graphql/settings/BlockedUsers.js
+++ b/webapp/graphql/settings/BlockedUsers.js
@@ -20,7 +20,7 @@ export const blockedUsers = () => {
 
 export const blockUser = () => {
   return gql`
-    mutation($id: ID!) {
+    mutation ($id: ID!) {
       blockUser(id: $id) {
         id
         name
@@ -33,7 +33,7 @@ export const blockUser = () => {
 
 export const unblockUser = () => {
   return gql`
-    mutation($id: ID!) {
+    mutation ($id: ID!) {
       unblockUser(id: $id) {
         id
         name
diff --git a/webapp/graphql/settings/MutedUsers.js b/webapp/graphql/settings/MutedUsers.js
index f498534e3..10db085af 100644
--- a/webapp/graphql/settings/MutedUsers.js
+++ b/webapp/graphql/settings/MutedUsers.js
@@ -20,7 +20,7 @@ export const mutedUsers = () => {
 
 export const muteUser = () => {
   return gql`
-    mutation($id: ID!) {
+    mutation ($id: ID!) {
       muteUser(id: $id) {
         id
         name
@@ -33,7 +33,7 @@ export const muteUser = () => {
 
 export const unmuteUser = () => {
   return gql`
-    mutation($id: ID!) {
+    mutation ($id: ID!) {
       unmuteUser(id: $id) {
         id
         name
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 0dfd752bf..06c3315cd 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -1,76 +1,14 @@
 <template>
   <div class="layout-default">
     <div class="main-navigation">
-      <ds-container class="main-navigation-container" style="padding: 10px 10px">
-        <div>
-          <ds-flex class="main-navigation-flex">
-            <ds-flex-item :width="{ base: '142px' }">
-              <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
-                <logo logoType="header" />
-              </nuxt-link>
-            </ds-flex-item>
-            <ds-flex-item
-              :width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
-              class="mobile-hamburger-menu"
-            >
-              <base-button icon="bars" @click="toggleMobileMenuView" circle />
-            </ds-flex-item>
-            <ds-flex-item
-              :width="{ base: '45%', sm: '45%', md: '45%', lg: '50%' }"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              style="flex-shrink: 0; flex-grow: 1"
-              id="nav-search-box"
-              v-if="isLoggedIn"
-            >
-              <search-field />
-            </ds-flex-item>
-            <ds-flex-item
-              v-if="isLoggedIn"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              style="flex-grow: 0; flex-basis: auto"
-            >
-              <client-only>
-                <filter-menu v-show="showFilterMenuDropdown" />
-              </client-only>
-            </ds-flex-item>
-            <ds-flex-item
-              style="background-color: white; flex-basis: auto"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-            >
-              <div
-                class="main-navigation-right"
-                :class="{
-                  'desktop-view': !toggleMobileMenu,
-                  'hide-mobile-menu': !toggleMobileMenu,
-                }"
-                style="flex-basis: auto"
-              >
-                <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
-                <template v-if="isLoggedIn">
-                  <client-only>
-                    <notification-menu placement="top" />
-                  </client-only>
-                  <div v-if="inviteRegistration">
-                    <client-only>
-                      <invite-button placement="top" />
-                    </client-only>
-                  </div>
-                  <client-only>
-                    <avatar-menu placement="top" />
-                  </client-only>
-                </template>
-              </div>
-            </ds-flex-item>
-          </ds-flex>
-        </div>
-      </ds-container>
+      <header-menu :showMobileMenu="showMobileMenu" />
     </div>
     <ds-container>
       <div class="main-container">
         <nuxt />
       </div>
     </ds-container>
-    <page-footer />
+    <page-footer v-if="!showMobileMenu" />
     <div id="overlay" />
     <client-only>
       <modal />
@@ -79,99 +17,44 @@
 </template>
 
 <script>
-import Logo from '~/components/Logo/Logo'
-import { mapGetters } from 'vuex'
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-import SearchField from '~/components/features/SearchField/SearchField.vue'
-import Modal from '~/components/Modal'
-import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
+import HeaderMenu from '~/components/HeaderMenu/HeaderMenu'
 import seo from '~/mixins/seo'
-import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
+import Modal from '~/components/Modal'
 import PageFooter from '~/components/PageFooter/PageFooter'
-import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
-import InviteButton from '~/components/InviteButton/InviteButton'
 
 export default {
   components: {
-    Logo,
-    LocaleSwitch,
-    SearchField,
+    HeaderMenu,
     Modal,
-    NotificationMenu,
-    AvatarMenu,
-    FilterMenu,
     PageFooter,
-    InviteButton,
   },
   mixins: [seo],
   data() {
     return {
-      mobileSearchVisible: false,
-      toggleMobileMenu: false,
-      inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
+      windowWidth: null,
+      maxMobileWidth: 810,
     }
   },
   computed: {
-    ...mapGetters({
-      isLoggedIn: 'auth/isLoggedIn',
-    }),
-    showFilterMenuDropdown() {
-      const [firstRoute] = this.$route.matched
-      return firstRoute && firstRoute.name === 'index'
+    showMobileMenu() {
+      if (!this.windowWidth) return false
+      return this.windowWidth <= this.maxMobileWidth
     },
   },
-  methods: {
-    toggleMobileMenuView() {
-      this.toggleMobileMenu = !this.toggleMobileMenu
-    },
+  mounted() {
+    this.windowWidth = window.innerWidth
+    window.addEventListener('resize', () => {
+      this.windowWidth = window.innerWidth
+    })
   },
 }
 </script>
-
 <style lang="scss">
-.topbar-locale-switch {
-  display: flex;
-  margin-right: $space-xx-small;
-  align-self: center;
-  display: inline-flex;
+.main-navigation {
+  background-color: $color-header-background;
 }
 .main-container {
   padding-top: 6rem;
   padding-bottom: 5rem;
 }
-
-.main-navigation-flex {
-  align-items: center;
-}
-
-.main-navigation {
-  a {
-    color: $text-color-soft;
-  }
-}
-.main-navigation-right {
-  display: flex;
-  justify-content: flex-end;
-}
-.main-navigation-right .desktop-view {
-  float: right;
-}
-.ds-flex-item.mobile-hamburger-menu {
-  margin-left: auto;
-  text-align: right;
-}
-@media only screen and (min-width: 730px) {
-  .mobile-hamburger-menu {
-    display: none;
-  }
-}
-@media only screen and (max-width: 730px) {
-  #nav-search-box,
-  .main-navigation-right {
-    margin: 10px 0px;
-  }
-  .hide-mobile-menu {
-    display: none;
-  }
-}
 </style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 392cd9771..39fd2de9f 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -11,7 +11,7 @@
   "admin": {
     "categories": {
       "categoryName": "Name",
-      "name": "Kategorien",
+      "name": "Themen",
       "postCount": "Beiträge"
     },
     "dashboard": {
@@ -98,7 +98,7 @@
     }
   },
   "common": {
-    "category": "Kategorie ::: Kategorien",
+    "category": "Thema ::: Themen",
     "comment": "Kommentar ::: Kommentare",
     "letsTalk": "Miteinander reden",
     "loading": "wird geladen",
@@ -113,7 +113,7 @@
     "takeAction": "Aktiv werden",
     "user": "Benutzer ::: Benutzer",
     "validations": {
-      "categories": "es müssen eine bis drei Kategorien ausgewählt werden",
+      "categories": "es müssen eine bis drei Themen ausgewählt werden",
       "email": "muss eine gültige E-Mail-Adresse sein",
       "url": "muss eine gültige URL sein"
     },
@@ -214,26 +214,50 @@
     "amount-shouts": "{amount} recommendations",
     "amount-views": "{amount} views",
     "categories": {
-      "infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
+      "infoSelectedNoOfMaxCategories": "{chosen} von {max} Themen ausgewählt"
     },
     "category": {
+      "description": {
+        "body-and-excercise": "Sport, Yoga, Massage, Tanzen, Entspannung",
+        "children": "Familie, Pädagogik, Schule, Prägung",
+        "culture": "Kunst, Theater, Musik, Fotografie, Film",
+        "economy": "Handel, Konsum, Marketing, Lieferketten",
+        "energy": "Öl, Gas, Kohle, Wind, Wasserkraft, Biogas, Atomenergie",
+        "finance": "Geld, Finanzsystem, Alternativwährungen",
+        "health": "Medizin, Ernährung, WHO, Impfungen, Schadstoffe",
+        "home": "Bauen, Lebensgemeinschaften, Tiny Houses, Gemüsegarten",
+        "it-and-media": "Nachrichten, Manipulation, Datenschutz, Überwachung, Datenkraken, KI, Software, Apps",
+        "law": "Menschenrechte, Gesetze, Verordnungen",
+        "miscellaneous": "Sonstiges",
+        "mobility": "Reise, Verkehr, Elektromobilität",
+        "nature": "Tiere, Pflanzen, Landwirtschaft, Ökologie, Artenvielfalt",
+        "networking": "Kooperation, Aktionsbündnisse, Solidarität, Hilfe",
+        "peace": "Krieg, Militär, soziale Verteidigung, Waffen, Cyberattacken",
+        "politics": "Demokratie, Mitbestimmung, Wahlen, Korruption, Parteien",
+        "psyche": "Seele, Gefühle, Glück",
+        "science": "Bildung, Hochschule, Publikationen",
+        "spirituality": "Religion, Werte, Ethik"
+      },
       "name": {
-        "animal-protection": "Schutz der Tiere",
-        "art-culture-sport": "Kunst, Kultur & Sport",
-        "consumption-sustainability": "Verbrauch & Nachhaltigkeit",
-        "cooperation-development": "Zusammenarbeit & Entwicklung",
-        "democracy-politics": "Demokratie & Politik",
-        "economy-finances": "Wirtschaft & Finanzen",
-        "education-sciences": "Bildung & Wissenschaft",
-        "energy-technology": "Energie & Technologie",
-        "environment-nature": "Umwelt & Natur",
-        "freedom-of-speech": "Redefreiheit",
-        "global-peace-nonviolence": "Globaler Frieden & Gewaltlosigkeit",
-        "happiness-values": "Glück & Werte",
-        "health-wellbeing": "Gesundheit & Wohlbefinden",
-        "human-rights-justice": "Menschenrechte & Gerechtigkeit",
-        "it-internet-data-privacy": "IT, Internet & Datenschutz",
-        "just-for-fun": "Nur zum Spaß"
+        "body-and-excercise": "Körper & Bewegung",
+        "children": "Kinder",
+        "culture": "Kultur",
+        "economy": "Wirtschaft",
+        "energy": "Energie",
+        "finance": "Finanzen",
+        "health": "Gesundheit",
+        "home": "Wohnen",
+        "it-and-media": "IT & Medien",
+        "law": "Recht",
+        "miscellaneous": "Sonstiges",
+        "mobility": "Mobilität",
+        "nature": "Natur",
+        "networking": "Vernetzung",
+        "peace": "Frieden",
+        "politics": "Politik",
+        "psyche": "Psyche",
+        "science": "Wissenschaft",
+        "spirituality": "Spiritualität"
       }
     },
     "emotions-label": {
@@ -333,19 +357,20 @@
     "placeholder": "Schreib etwas Inspirierendes …"
   },
   "error-pages": {
-    "403-default": "Kein Zugang zu dieser Seite",
-    "404-default": "Diese Seite konnte nicht gefunden werden",
-    "500-default": "Internal Server Error",
-    "503-default": "Dienst steht nicht zur Verfügung",
-    "back-to-index": "Zurück zur Startseite",
-    "cannot-edit-post": "Dieser Beitrag kann nicht editiert werden",
-    "default": "Ein Fehler ist aufgetreten",
-    "post-not-found": "Dieser Beitrag konnte nicht gefunden werden",
-    "profile-not-found": "Dieses Profil konnte nicht gefunden werden"
+    "403-default": "Kein Zugang zu dieser Seite!",
+    "404-default": "Diese Seite konnte nicht gefunden werden!",
+    "500-default": "Internal Server Error!",
+    "503-default": "Dienst steht nicht zur Verfügung!",
+    "back-to-index": "Zurück zur Startseite!",
+    "cannot-edit-post": "Dieser Beitrag kann nicht editiert werden!",
+    "default": "Ein Fehler ist aufgetreten!",
+    "group-not-found": "Dieses Gruppenprofil konnte nicht gefunden werden!",
+    "post-not-found": "Dieser Beitrag konnte nicht gefunden werden!",
+    "profile-not-found": "Dieses Profil konnte nicht gefunden werden!"
   },
   "filter-menu": {
     "all": "Alle",
-    "categories": "Themenkategorien",
+    "categories": "Themen",
     "emotions": "Emotionen",
     "filter-by": "Filtern nach ...",
     "following": "Benutzern, denen ich folge",
@@ -360,17 +385,102 @@
         "label": "Älteste zuerst"
       }
     },
-    "order-by": "Sortieren nach ..."
+    "order-by": "Sortieren nach ...",
+    "save": {
+      "error": "Themen konnten nicht gespeichert werden!",
+      "success": "Themen gespeichert!"
+    }
   },
   "followButton": {
     "follow": "Folgen",
     "following": "Folge Ich"
   },
+  "group": {
+    "actionRadii": {
+      "continental": "Kontinentale Gruppe",
+      "global": "Globale Gruppe",
+      "interplanetary": "Interplanetare Gruppe",
+      "national": "Nationale Gruppe",
+      "regional": "Regionale Gruppe"
+    },
+    "actionRadius": "Aktionsradius",
+    "addMemberToGroup": "Zur Gruppe hinzufügen",
+    "addUser": "Benutzer hinzufügen",
+    "addUserPlaceholder": "eindeutiger Benutzername > @slug-from-user",
+    "allGroups": "Alle Gruppen",
+    "categories": "Thema ::: Themen",
+    "changeMemberRole": "Die Rolle wurde auf „{role}“ geändert!",
+    "contentMenu": {
+      "visitGroupPage": "Gruppe anzeigen"
+    },
+    "createNewGroup": {
+      "title": "Erstelle eine neue Gruppe",
+      "tooltip": "Erstelle eine neue Gruppe"
+    },
+    "description": "Beschreibung",
+    "editGroupSettings": {
+      "groupName": "Einstellungen für „{name}“",
+      "title": "Meine Gruppe ändern"
+    },
+    "follow": "Folge",
+    "foundation": "Gründung",
+    "general": "Allgemein",
+    "goal": "Ziel der Gruppe",
+    "groupCreated": "Die Gruppe wurde angelegt!",
+    "in": "in",
+    "joinLeaveButton": {
+      "iAmMember": "Bin Mitglied",
+      "join": "Beitreten"
+    },
+    "labelSlug": "Eindeutiger Gruppenname",
+    "leaveModal": {
+      "confirmButton": "Verlassen",
+      "message": "Eine Gruppe zu verlassen ist möglicherweise nicht rückgängig zu machen!<br>Gruppe <b>„{name}“</b> verlassen!",
+      "title": "Möchtest du wirklich die Gruppe verlassen?"
+    },
+    "members": "Mitglieder",
+    "membersAdministrationList": {
+      "avatar": "Avatar",
+      "name": "Name",
+      "roleInGroup": "Rolle",
+      "slug": "Eindeutiger Name"
+    },
+    "membersCount": "Mitglied ::: Mitglieder",
+    "membersListTitle": "Gruppenmitglieder",
+    "membersListTitleNotAllowedSeeingGroupMembers": "Gruppenmitglieder unsichtbar",
+    "myGroups": "Meine Gruppen",
+    "name": "Gruppenname",
+    "radius": "Radius",
+    "removeMember": "Mitglied aus der Gruppe entfernen?",
+    "removeMemberButton": "Entfernen",
+    "role": "Deine Rolle in der Gruppe",
+    "roles": {
+      "admin": "Administrator",
+      "owner": "Inhaber",
+      "pending": "Ausstehendes Mitglied",
+      "usual": "Einfaches Mitglied"
+    },
+    "save": "Neue Gruppe anlegen",
+    "type": "Gruppentyp",
+    "types": {
+      "closed": "Geschlossene Gruppe",
+      "hidden": "Versteckte Gruppe",
+      "public": "Öffentliche Gruppe"
+    },
+    "update": "Änderung speichern",
+    "updatedGroup": "Die Gruppendaten wurden geändert!"
+  },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
     "hashtag-search": "Suche nach #{hashtag}",
     "title": "Deine Filterblase"
   },
+  "header": {
+    "avatarMenu": {
+      "Groups": "Gruppen",
+      "myProfile": "Mein Profil"
+    }
+  },
   "index": {
     "change-filter-settings": "Verändere die Filter-Einstellungen, um mehr Ergebnisse zu erhalten.",
     "no-results": "Keine Beiträge gefunden."
@@ -467,7 +577,7 @@
       "noDecision": "Keine Entscheidung!",
       "numberOfUsers": "{count} Nutzern",
       "previousDecision": "Vorherige Entscheidung:",
-      "reasonCategory": "Kategorie",
+      "reasonCategory": "Thema",
       "reasonDescription": "Beschreibung",
       "reportedOn": "Datum",
       "status": "Aktueller Status",
@@ -500,7 +610,19 @@
       "submitted": "Kommentar gesendet",
       "updated": "Änderungen gespeichert"
     },
+    "createNewPost": {
+      "forGroup": {
+        "title": "Für die Gruppe „{name}“"
+      },
+      "title": "Erstelle einen neuen Beitrag"
+    },
     "edited": "bearbeitet",
+    "editPost": {
+      "forGroup": {
+        "title": "Für die Gruppe „{name}“"
+      },
+      "title": "Bearbeite deinen Beitrag"
+    },
     "menu": {
       "delete": "Beitrag löschen",
       "edit": "Beitrag bearbeiten",
@@ -513,9 +635,18 @@
     "pinned": "Meldung",
     "takeAction": {
       "name": "Aktiv werden"
+    },
+    "viewPost": {
+      "forGroup": {
+        "title": "In der Gruppe „{name}“"
+      },
+      "title": "Beitrag"
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Erfolgreich hochgeladen!"
+    },
     "commented": "Kommentiert",
     "follow": "Folgen",
     "followers": "Folgen",
@@ -526,7 +657,6 @@
       "title": "Lade jemanden zu {APPLICATION_NAME} ein!"
     },
     "memberSince": "Mitglied seit",
-    "name": "Mein Profil",
     "network": {
       "andMore": "und {number} weitere …",
       "followedBy": "wird gefolgt von:",
@@ -584,8 +714,8 @@
     },
     "reason": {
       "category": {
-        "invalid": "Bitte wähle eine gültige Kategorie aus",
-        "label": "Wähle eine Kategorie:",
+        "invalid": "Bitte wähle ein gültiges Thema aus",
+        "label": "Wähle ein Thema:",
         "options": {
           "advert_products_services_commercial": "Bewerben von Produkten und Dienstleistungen mit kommerzieller Absicht.",
           "criminal_behavior_violation_german_law": "Strafbares Verhalten bzw. Verstoß gegen deutsches Recht.",
@@ -596,7 +726,7 @@
           "other": "Andere …",
           "pornographic_content_links": "Das Senden oder Verlinken eindeutig pornografischen Materials."
         },
-        "placeholder": "Kategorie …"
+        "placeholder": "Thema …"
       },
       "description": {
         "label": "Bitte erkläre: Warum möchtest Du dies melden?",
@@ -616,11 +746,12 @@
     "failed": "Nichts gefunden",
     "for": "Suche nach ",
     "heading": {
+      "Group": "Gruppe ::: Gruppen",
       "Post": "Beitrag ::: Beiträge",
       "Tag": "Hashtag ::: Hashtags",
       "User": "Benutzer ::: Benutzer"
     },
-    "hint": "Wonach suchst Du?",
+    "hint": "Wonach suchst Du? Nutze !… für Beiträge, @… für Mitglieder, &… für Gruppen, #… für Hashtags",
     "no-results": "Keine Ergebnisse für \"{search}\" gefunden. Versuch' es mit einem anderen Begriff!",
     "page": "Seite",
     "placeholder": "Suchen",
@@ -817,10 +948,5 @@
     "newTermsAndConditions": "Neue Nutzungsbedingungen",
     "termsAndConditionsNewConfirm": "Ich habe die neuen Nutzungsbedingungen durchgelesen und stimme zu.",
     "termsAndConditionsNewConfirmText": "Bitte lies Dir die neuen Nutzungsbedingungen jetzt durch!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Erfolgreich hochgeladen!"
-    }
   }
 }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 24c0fa2be..18b579df4 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -11,7 +11,7 @@
   "admin": {
     "categories": {
       "categoryName": "Name",
-      "name": "Categories",
+      "name": "Topics",
       "postCount": "Posts"
     },
     "dashboard": {
@@ -98,7 +98,7 @@
     }
   },
   "common": {
-    "category": "Category ::: Categories",
+    "category": "Topic ::: Topics",
     "comment": "Comment ::: Comments",
     "letsTalk": "Let`s Talk",
     "loading": "loading",
@@ -113,7 +113,7 @@
     "takeAction": "Take Action",
     "user": "User ::: Users",
     "validations": {
-      "categories": "at least one and at most three categories must be selected",
+      "categories": "at least one and at most three topics must be selected",
       "email": "must be a valid e-mail address",
       "url": "must be a valid URL"
     },
@@ -214,26 +214,50 @@
     "amount-shouts": "{amount} recommendations",
     "amount-views": "{amount} views",
     "categories": {
-      "infoSelectedNoOfMaxCategories": "{chosen} of {max} categories selected"
+      "infoSelectedNoOfMaxCategories": "{chosen} of {max} topics selected"
     },
     "category": {
+      "description": {
+        "body-and-excercise": "Sports, yoga, massage, relaxation",
+        "children": "Family, education, school, imprinting",
+        "culture": "Art, theatre, music, photography, film",
+        "economy": "Trade, consumption, marketing, supply chains",
+        "energy": "Oil, gas, coal, wind, hydrodynamic power, biogas, atomic energy",
+        "finance": "Money, financial system, alternative currencies",
+        "health": "Medicine, nutrition, WHO, vaccination, harmful substances",
+        "home": "Construction, communities, tiny houses, kitchen garden",
+        "it-and-media": "News, manipulation, privacy, control, data leeches, AI, software, apps",
+        "law": "Human rights, laws, decrees",
+        "miscellaneous": "Miscellaneous",
+        "mobility": "Travel, traffic, electric mobility",
+        "nature": "Animals, plants, agriculture, ecologu, biodiversity",
+        "networking": "Cooperation, action alliances, solidarity, help",
+        "peace": "War, military, social defence, arms, cyber attacks",
+        "politics": "Democracy, participation, elections, corruption, parties",
+        "psyche": "Soul, feelings, happiness",
+        "science": "Education, university, publications",
+        "spirituality": "Religion, values, ethics"
+      },
       "name": {
-        "animal-protection": "Animal Protection",
-        "art-culture-sport": "Art, Culture, & Sport",
-        "consumption-sustainability": "Consumption & Sustainability",
-        "cooperation-development": "Cooperation & Development",
-        "democracy-politics": "Democracy & Politics",
-        "economy-finances": "Economy & Finances",
-        "education-sciences": "Education & Sciences",
-        "energy-technology": "Energy & Technology",
-        "environment-nature": "Environment & Nature",
-        "freedom-of-speech": "Freedom of Speech",
-        "global-peace-nonviolence": "Global Peace & Nonviolence",
-        "happiness-values": "Happiness & Values",
-        "health-wellbeing": "Health & Wellbeing",
-        "human-rights-justice": "Human Rights & Justice",
-        "it-internet-data-privacy": "IT, Internet & Data Privacy",
-        "just-for-fun": "Just for Fun"
+        "body-and-excercise": "Body & Excercise",
+        "children": "Children",
+        "culture": "Culture",
+        "economy": "Economy",
+        "energy": "Energy",
+        "finance": "Finance",
+        "health": "Health",
+        "home": "Home",
+        "it-and-media": "IT & Media",
+        "law": "Law",
+        "miscellaneous": "Miscellaneous",
+        "mobility": "Mobility",
+        "nature": "Nature",
+        "networking": "Networking",
+        "peace": "Peace",
+        "politics": "Politics",
+        "psyche": "Psyche",
+        "science": "Science",
+        "spirituality": "Spirituality"
       }
     },
     "emotions-label": {
@@ -333,19 +357,20 @@
     "placeholder": "Leave your inspirational thoughts …"
   },
   "error-pages": {
-    "403-default": "Not authorized to this page",
-    "404-default": "This page could not be found",
-    "500-default": "Internal Server Error",
-    "503-default": "Service Unavailable",
-    "back-to-index": "Back to index page",
-    "cannot-edit-post": "This post cannot be edited",
-    "default": "An error occurred",
-    "post-not-found": "This post could not be found",
-    "profile-not-found": "This profile could not be found"
+    "403-default": "Not authorized to this page!",
+    "404-default": "This page could not be found!",
+    "500-default": "Internal Server Error!",
+    "503-default": "Service Unavailable!",
+    "back-to-index": "Back to index page!",
+    "cannot-edit-post": "This post cannot be edited!",
+    "default": "An error occurred!",
+    "group-not-found": "This group profile could not be found!",
+    "post-not-found": "This post could not be found!",
+    "profile-not-found": "This profile could not be found!"
   },
   "filter-menu": {
     "all": "All",
-    "categories": "Categories of Content",
+    "categories": "Topics",
     "emotions": "Emotions",
     "filter-by": "Filter by ...",
     "following": "Users I follow",
@@ -360,17 +385,102 @@
         "label": "Oldest first"
       }
     },
-    "order-by": "Order by ..."
+    "order-by": "Order by ...",
+    "save": {
+      "error": "Failed saving topic settings!",
+      "success": "Topics saved!"
+    }
   },
   "followButton": {
     "follow": "Follow",
     "following": "Following"
   },
+  "group": {
+    "actionRadii": {
+      "continental": "Continental Group",
+      "global": "Global Group",
+      "interplanetary": "Interplanetary Group",
+      "national": "National Group",
+      "regional": "Regional Group"
+    },
+    "actionRadius": "Action radius",
+    "addMemberToGroup": "Add to group",
+    "addUser": "Add User",
+    "addUserPlaceholder": "unique username > @slug-from-user",
+    "allGroups": "All Groups",
+    "categories": "Topic ::: Topics",
+    "changeMemberRole": "The role has been changed to “{role}”!",
+    "contentMenu": {
+      "visitGroupPage": "Show group"
+    },
+    "createNewGroup": {
+      "title": "Create A New Group",
+      "tooltip": "Create a new group"
+    },
+    "description": "Description",
+    "editGroupSettings": {
+      "groupName": "Settings Of “{name}”",
+      "title": "Edit My Group"
+    },
+    "follow": "Follow",
+    "foundation": "Foundation",
+    "general": "General",
+    "goal": "Goal of group",
+    "groupCreated": "The group was created!",
+    "in": "in",
+    "joinLeaveButton": {
+      "iAmMember": "I'm a member",
+      "join": "Join"
+    },
+    "labelSlug": "Unique group name",
+    "leaveModal": {
+      "confirmButton": "Leave",
+      "message": "Leaving a group may be irreversible!<br>Leave group <b>“{name}”</b>!",
+      "title": "Do you really want to leave the group?"
+    },
+    "members": "Members",
+    "membersAdministrationList": {
+      "avatar": "Avatar",
+      "name": "Name",
+      "roleInGroup": "Role",
+      "slug": "Unique name"
+    },
+    "membersCount": "Member ::: Members",
+    "membersListTitle": "Group Members",
+    "membersListTitleNotAllowedSeeingGroupMembers": "Group Members invisible",
+    "myGroups": "My Groups",
+    "name": "Group name",
+    "radius": "Radius",
+    "removeMember": "Remove member",
+    "removeMemberButton": "Remove",
+    "role": "Your role in the group",
+    "roles": {
+      "admin": "Administrator",
+      "owner": "Owner",
+      "pending": "Pending Member",
+      "usual": "Simple Member"
+    },
+    "save": "Create new group",
+    "type": "Group type",
+    "types": {
+      "closed": "Closed Group",
+      "hidden": "Hidden Group",
+      "public": "Public Group"
+    },
+    "update": "Save change",
+    "updatedGroup": "The group data has been changed."
+  },
   "hashtags-filter": {
     "clearSearch": "Clear search",
     "hashtag-search": "Searching for #{hashtag}",
     "title": "Your filter bubble"
   },
+  "header": {
+    "avatarMenu": {
+      "Groups": "Groups",
+      "myProfile": "My profile"
+    }
+  },
   "index": {
     "change-filter-settings": "Change your filter settings to get more results.",
     "no-results": "No contributions found."
@@ -467,7 +577,7 @@
       "noDecision": "No decision!",
       "numberOfUsers": "{count} users",
       "previousDecision": "Previous decision:",
-      "reasonCategory": "Category",
+      "reasonCategory": "Topic",
       "reasonDescription": "Description",
       "reportedOn": "Date",
       "status": "Current status",
@@ -500,7 +610,19 @@
       "submitted": "Comment submitted!",
       "updated": "Changes saved!"
     },
+    "createNewPost": {
+      "forGroup": {
+        "title": "For The Group “{name}”"
+      },
+      "title": "Create A New Post"
+    },
     "edited": "edited",
+    "editPost": {
+      "forGroup": {
+        "title": "For The Group “{name}”"
+      },
+      "title": "Edit Your Post"
+    },
     "menu": {
       "delete": "Delete post",
       "edit": "Edit post",
@@ -513,9 +635,18 @@
     "pinned": "Announcement",
     "takeAction": {
       "name": "Take action"
+    },
+    "viewPost": {
+      "forGroup": {
+        "title": "In The Group “{name}”"
+      },
+      "title": "Post"
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Upload successful!"
+    },
     "commented": "Commented",
     "follow": "Follow",
     "followers": "Followers",
@@ -526,7 +657,6 @@
       "title": "Invite somebody to {APPLICATION_NAME}!"
     },
     "memberSince": "Member since",
-    "name": "My Profile",
     "network": {
       "andMore": "and {number} more …",
       "followedBy": "is followed by:",
@@ -584,8 +714,8 @@
     },
     "reason": {
       "category": {
-        "invalid": "Please select a valid category",
-        "label": "Select a category:",
+        "invalid": "Please select a valid topic",
+        "label": "Select a topic:",
         "options": {
           "advert_products_services_commercial": "Advertising products and services with commercial intent.",
           "criminal_behavior_violation_german_law": "Criminal behavior or violation of German law.",
@@ -596,7 +726,7 @@
           "other": "Other …",
           "pornographic_content_links": "Posting or linking of clearly pornographic material."
         },
-        "placeholder": "Category …"
+        "placeholder": "Topic …"
       },
       "description": {
         "label": "Please explain: Why you like to report this?",
@@ -616,11 +746,12 @@
     "failed": "Nothing found",
     "for": "Searching for ",
     "heading": {
+      "Group": "Group ::: Groups",
       "Post": "Post ::: Posts",
       "Tag": "Hashtag ::: Hashtags",
       "User": "User ::: Users"
     },
-    "hint": "What are you searching for?",
+    "hint": "What are you searching for? Use !… for posts, @… for users, &… for groups, #… for hashtags.",
     "no-results": "No results found for \"{search}\". Try a different search term!",
     "page": "Page",
     "placeholder": "Search",
@@ -817,10 +948,5 @@
     "newTermsAndConditions": "New Terms and Conditions",
     "termsAndConditionsNewConfirm": "I have read and agree to the new terms of conditions.",
     "termsAndConditionsNewConfirmText": "Please read the new terms of use now!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Upload successful!"
-    }
   }
 }
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index 1d37cde5d..63070ee4b 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -297,6 +297,16 @@
     "follow": "Seguir",
     "following": "Siguiendo"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
+    "membersCount": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Borrar búsqueda",
     "hashtag-search": "Buscando a #{hashtag}",
@@ -435,6 +445,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Carga con éxito"
+    },
     "commented": "Comentado",
     "follow": "Seguir",
     "followers": "Seguidores",
@@ -537,7 +550,7 @@
       "Post": "Contribuciones",
       "User": "Usuarios"
     },
-    "hint": "¿Qué estás buscando?",
+    "hint": "¿Qué estás buscando? Utiliza !… para contribuciones, @… para usuarios, #… para hashtags.",
     "placeholder": "Buscar"
   },
   "settings": {
@@ -715,10 +728,5 @@
     "newTermsAndConditions": "Nuevos términos de uso",
     "termsAndConditionsNewConfirm": "He leído y acepto los nuevos términos de uso.",
     "termsAndConditionsNewConfirmText": "¡Por favor, lea los nuevos términos de uso ahora!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Carga con éxito"
-    }
   }
 }
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 642c93c8c..91b91abe9 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -286,6 +286,16 @@
     "follow": "Suivre",
     "following": "Je suis les"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
+    "membersCount": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Réinitialiser la recherche",
     "hashtag-search": "Recherche de #{hashtag}",
@@ -423,6 +433,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Téléchargement réussi"
+    },
     "commented": "Commentais",
     "follow": "Suivre",
     "followers": "Suiveurs",
@@ -525,7 +538,7 @@
       "Post": "Posts",
       "User": "Utilisateurs"
     },
-    "hint": "Qu'est-ce que vous cherchez ?",
+    "hint": "Qu'est-ce que vous cherchez? Utiliser !… pour des posts, @… pour des membres, #… pour des hashtag.",
     "placeholder": "Rechercher"
   },
   "settings": {
@@ -683,10 +696,5 @@
     "newTermsAndConditions": "Nouvelles conditions générales",
     "termsAndConditionsNewConfirm": "J'ai lu et accepté les nouvelles conditions générales.",
     "termsAndConditionsNewConfirmText": "Veuillez lire les nouvelles conditions d'utilisation dès maintenant !"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Téléchargement réussi"
-    }
   }
 }
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index 8950ddabd..342550a14 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -294,6 +294,16 @@
     "follow": null,
     "following": null
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
+    "membersCount": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": null,
     "hashtag-search": null,
@@ -376,6 +386,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": null
+    },
     "commented": "Commentato",
     "follow": "Seguire",
     "followers": "Seguenti",
@@ -473,9 +486,9 @@
     }
   },
   "search": {
-    "failed": null,
-    "hint": null,
-    "placeholder": null
+    "failed": "Non è stato trovato nulla",
+    "hint": "Cosa state cercando? Usate !... per i post, @... per gli utenti, #... per gli hashtag.",
+    "placeholder": "Ricerca"
   },
   "settings": {
     "data": {
@@ -633,10 +646,5 @@
     "newTermsAndConditions": "Nuovi Termini e Condizioni",
     "termsAndConditionsNewConfirm": "Ho letto e accetto le nuove condizioni generali di contratto.",
     "termsAndConditionsNewConfirmText": "Si prega di leggere le nuove condizioni d'uso ora!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": null
-    }
   }
 }
diff --git a/webapp/locales/nl.json b/webapp/locales/nl.json
index 3bf453655..c7e474a3a 100644
--- a/webapp/locales/nl.json
+++ b/webapp/locales/nl.json
@@ -82,6 +82,16 @@
     "follow": "Volgen",
     "following": "Volgt"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
+    "membersCount": null,
+    "membersListTitle": null
+  },
   "login": {
     "email": "Uw E-mail",
     "hello": "Hallo",
@@ -100,6 +110,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": null
+    },
     "follow": "Volgen",
     "followers": "Volgelingen",
     "following": "Volgt",
@@ -131,6 +144,11 @@
       "type": "Gebruiker"
     }
   },
+  "search": {
+    "failed": "Niets gevonden",
+    "hint": "Waar zoekt u naar? Gebruik !... voor berichten, @... voor gebruikers, #... voor hashtags.",
+    "placeholder": "Zoeken"
+  },
   "settings": {
     "data": {
       "name": "Uw gegevens"
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index dd416f0af..840698487 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -166,6 +166,16 @@
     "follow": "naśladować",
     "following": "w skutek"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
+    "membersCount": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "title": "Twoja bańka filtrująca"
   },
@@ -208,6 +218,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Przesłano pomyślnie"
+    },
     "commented": "Skomentuj",
     "follow": "Obserwuj",
     "followers": "Obserwujący",
@@ -278,7 +291,7 @@
   },
   "search": {
     "failed": "Niczego nie znaleziono",
-    "hint": "Czego szukasz?",
+    "hint": "Czego szukasz? Użyj !... dla postów, @... dla użytkowników, #... dla hashtagów.",
     "placeholder": "Szukaj"
   },
   "settings": {
@@ -356,10 +369,5 @@
     "taxident": "Numer identyfikacyjny podatku od wartości dodanej zgodnie z § 27 a Ustawa o podatku od wartości dodanej (Niemcy)",
     "termsAc": "Warunki użytkowania",
     "tribunal": "sąd rejestrowy"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Przesłano pomyślnie"
-    }
   }
 }
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index 64625840f..bec922edb 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -332,6 +332,16 @@
     "follow": "Seguir",
     "following": "Seguindo"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
+    "membersCount": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Limpar pesquisa",
     "hashtag-search": "Procurando por #{hashtag}",
@@ -412,6 +422,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Carregado com sucesso!"
+    },
     "commented": "Comentou",
     "follow": "Seguir",
     "followers": "Seguidores",
@@ -510,7 +523,7 @@
   },
   "search": {
     "failed": "Nada encontrado",
-    "hint": "O que você está buscando?",
+    "hint": "O que você está buscando? Use !... para postagens, @... para usuários, #... para hashtags.",
     "placeholder": "Buscar"
   },
   "settings": {
@@ -668,10 +681,5 @@
     "newTermsAndConditions": "Novos Termos e Condições",
     "termsAndConditionsNewConfirm": "Eu li e concordo com os novos termos de condições.",
     "termsAndConditionsNewConfirmText": "Por favor, leia os novos termos de uso agora!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Carregado com sucesso!"
-    }
   }
 }
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index e7087cb9a..f50121635 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -311,6 +311,16 @@
     "follow": "Подписаться",
     "following": "Вы подписаны"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
+    "membersCount": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Очистить поиск",
     "hashtag-search": "Поиск по #{hashtag}",
@@ -449,6 +459,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Успешная загрузка!"
+    },
     "commented": "Прокомментированные",
     "follow": "Подписаться",
     "followers": "Подписчики",
@@ -551,7 +564,7 @@
       "Post": "Посты",
       "User": "Пользователи"
     },
-    "hint": "Что вы хотите найти?",
+    "hint": "Что вы хотите найти? Используйте !... для постов, @... для пользователей, #... для хэштегов.",
     "placeholder": "Поиск"
   },
   "settings": {
@@ -729,10 +742,5 @@
     "newTermsAndConditions": "Новые условия и положения",
     "termsAndConditionsNewConfirm": "Я прочитал(а) и согласен(на) с новыми условиями.",
     "termsAndConditionsNewConfirmText": "Пожалуйста, ознакомьтесь с новыми условиями использования!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Успешная загрузка!"
-    }
   }
 }
diff --git a/webapp/maintenance/README.md b/webapp/maintenance/README.md
index 99e410a1c..95c09bae8 100644
--- a/webapp/maintenance/README.md
+++ b/webapp/maintenance/README.md
@@ -36,4 +36,4 @@ $ docker-compose up
 ````
 
 And the maintenance mode page or service will be started as well in an own container.
-In the browser you can reach it under `http://localhost:5000/`.
+In the browser you can reach it under `http://localhost:3001/`.
diff --git a/webapp/maintenance/source/package.json b/webapp/maintenance/source/package.json
index e38f34370..937ed699d 100644
--- a/webapp/maintenance/source/package.json
+++ b/webapp/maintenance/source/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ocelot-social/maintenance",
-  "version": "1.0.7",
+  "version": "2.2.0",
   "description": "Maintenance page for ocelot.social",
   "repository": "https://github.com/Ocelot-Social-Community/Ocelot-Social",
   "author": "ocelot.social Community",
diff --git a/webapp/mixins/internalPageMixins.js b/webapp/mixins/internalPageMixins.js
index 2c2a517c4..922d64f95 100644
--- a/webapp/mixins/internalPageMixins.js
+++ b/webapp/mixins/internalPageMixins.js
@@ -16,10 +16,7 @@ export function internalPageMixins(pageParams) {
     },
     created() {
       if (!this.pageParams.isInternalPage) {
-        // to avoid possible errors, because 'window' is only defined on browser side but not in NodeJS on client side. check for 'typeof window' is neccessary, because if it's not defined at all you can't check for 'window !== undefined' without the same error 'window is undefined'
-        if (typeof window !== 'undefined') {
-          window.location.href = this.pageParams.externalLink
-        }
+        this.pageParams.redirectToPage(this)
       }
     },
   }
diff --git a/webapp/mixins/persistentLinks.js b/webapp/mixins/persistentLinks.js
index 0abe37c03..164ccea41 100644
--- a/webapp/mixins/persistentLinks.js
+++ b/webapp/mixins/persistentLinks.js
@@ -10,22 +10,24 @@ export default function (options = {}) {
       } = context
       const idOrSlug = id || slug
 
-      const variables = { idOrSlug }
-      const client = apolloProvider.defaultClient
+      if (idOrSlug) {
+        const variables = { idOrSlug }
+        const client = apolloProvider.defaultClient
 
-      let response
-      let resource
-      response = await client.query({ query: queryId, variables })
-      resource = response.data[Object.keys(response.data)[0]][0]
-      if (resource && resource.slug === slug) return // all good
-      if (resource && resource.slug !== slug) {
-        return redirect(`/${path}/${resource.id}/${resource.slug}`)
+        let response
+        let resource
+        response = await client.query({ query: queryId, variables })
+        resource = response.data[Object.keys(response.data)[0]][0]
+        if (resource && resource.slug === slug) return // all good
+        if (resource && resource.slug !== slug) {
+          return redirect(`/${path}/${resource.id}/${resource.slug}`)
+        }
+
+        response = await client.query({ query: querySlug, variables })
+        resource = response.data[Object.keys(response.data)[0]][0]
+        if (resource) return redirect(`/${path}/${resource.id}/${resource.slug}`)
       }
 
-      response = await client.query({ query: querySlug, variables })
-      resource = response.data[Object.keys(response.data)[0]][0]
-      if (resource) return redirect(`/${path}/${resource.id}/${resource.slug}`)
-
       return error({ statusCode: 404, key: message })
     },
   }
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 717aa0339..7a03194e9 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -91,13 +91,21 @@ export default {
   /*
    ** Global CSS
    */
-  css: ['~assets/_new/styles/resets.scss', '~assets/styles/main.scss'],
+  css: [
+    '~assets/_new/styles/resets.scss',
+    '~assets/styles/main.scss',
+    '~assets/styles/imports/_branding.scss',
+  ],
 
   /*
    ** Global processed styles
    */
   styleResources: {
-    scss: [styleguideStyles, '~assets/_new/styles/tokens.scss'],
+    scss: [
+      styleguideStyles,
+      '~assets/_new/styles/tokens.scss',
+      '~assets/styles/imports/_branding.scss',
+    ],
   },
 
   /*
diff --git a/webapp/package.json b/webapp/package.json
index cf4354dde..65f34c3e3 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social-webapp",
-  "version": "1.0.7",
+  "version": "2.2.0",
   "description": "ocelot.social Frontend",
   "repository": "https://github.com/Ocelot-Social-Community/Ocelot-Social",
   "author": "ocelot.social Community",
@@ -73,9 +73,9 @@
     "accounting": "~0.4.1",
     "apollo-cache-inmemory": "~1.6.6",
     "apollo-client": "~2.6.8",
-    "cookie-universal-nuxt": "~2.1.5",
+    "cookie-universal-nuxt": "~2.2.2",
     "cropperjs": "^1.5.5",
-    "cross-env": "~7.0.2",
+    "cross-env": "~7.0.3",
     "date-fns": "2.22.1",
     "express": "~4.17.1",
     "graphql": "~14.7.0",
@@ -99,7 +99,7 @@
     "vue-izitoast": "^1.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue-scrollto": "^2.20.0",
-    "vue-sweetalert-icons": "~4.3.0",
+    "vue-sweetalert-icons": "~4.3.1",
     "vuex-i18n": "~1.13.1",
     "xregexp": "^4.3.0",
     "zxcvbn": "^4.4.2"
@@ -141,7 +141,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "~26.6.3",
     "mutation-observer": "^1.0.3",
-    "prettier": "~2.2.1",
+    "prettier": "~2.7.1",
     "sass-loader": "~10.1.1",
     "storybook-design-token": "^0.8.1",
     "storybook-vue-router": "^1.0.7",
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 6c324fd97..cbd7433ad 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -139,7 +139,7 @@ export default {
     User: {
       query() {
         return gql`
-          query($filter: _UserFilter, $first: Int, $offset: Int, $email: String) {
+          query ($filter: _UserFilter, $first: Int, $offset: Int, $email: String) {
             User(
               email: $email
               filter: $filter
diff --git a/webapp/pages/group/_id.spec.js b/webapp/pages/group/_id.spec.js
new file mode 100644
index 000000000..bafd5c392
--- /dev/null
+++ b/webapp/pages/group/_id.spec.js
@@ -0,0 +1,33 @@
+import { config, mount } from '@vue/test-utils'
+import _id from './_id.vue'
+
+const localVue = global.localVue
+
+config.stubs['nuxt-child'] = '<span class="nuxt-child"><slot /></span>'
+
+describe('Group profile _id.vue', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {}
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(_id, {
+        mocks,
+        localVue,
+      })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.nuxt-child')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/pages/group/_id.vue b/webapp/pages/group/_id.vue
new file mode 100644
index 000000000..d743633d1
--- /dev/null
+++ b/webapp/pages/group/_id.vue
@@ -0,0 +1,34 @@
+<template>
+  <nuxt-child />
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import PersistentLinks from '~/mixins/persistentLinks.js'
+
+const options = {
+  queryId: gql`
+    query ($idOrSlug: ID) {
+      Group(id: $idOrSlug) {
+        id
+        slug
+      }
+    }
+  `,
+  querySlug: gql`
+    query ($idOrSlug: String) {
+      Group(slug: $idOrSlug) {
+        id
+        slug
+      }
+    }
+  `,
+  message: 'error-pages.group-not-found',
+  path: 'group',
+}
+const persistentLinks = PersistentLinks(options)
+
+export default {
+  mixins: [persistentLinks],
+}
+</script>
diff --git a/webapp/pages/group/_id/_slug.spec.js b/webapp/pages/group/_id/_slug.spec.js
new file mode 100644
index 000000000..963952f5e
--- /dev/null
+++ b/webapp/pages/group/_id/_slug.spec.js
@@ -0,0 +1,1635 @@
+import { config, mount } from '@vue/test-utils'
+import GroupProfileSlug from './_slug.vue'
+
+const localVue = global.localVue
+
+localVue.filter('date', (d) => d)
+
+config.stubs['client-only'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+config.stubs['infinite-loading'] = '<span><slot /></span>'
+config.stubs['follow-list'] = '<span><slot /></span>'
+
+describe('GroupProfileSlug', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+  let yogaPractice
+  let schoolForCitizens
+  let investigativeJournalism
+  let peterLustig
+  let jennyRostock
+  let bobDerBaumeister
+  let huey
+
+  beforeEach(() => {
+    mocks = {
+      $env: {
+        CATEGORIES_ACTIVE: true,
+      },
+      // post: {
+      //   id: 'p23',
+      //   name: 'It is a post',
+      // },
+      $t: jest.fn((a) => a),
+      $filters: {
+        removeLinks: (c) => c,
+        truncate: (a) => a,
+      },
+      // If you're mocking router, then don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
+      $route: {
+        params: {
+          id: 'g1',
+          slug: 'school-for-citizens',
+        },
+      },
+      $router: {
+        history: {
+          push: jest.fn(),
+        },
+      },
+      $toast: {
+        success: jest.fn(),
+        error: jest.fn(),
+      },
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue(),
+      },
+    }
+    yogaPractice = {
+      id: 'g2',
+      name: 'Yoga Practice',
+      slug: 'yoga-practice',
+      about: null,
+      description: `<h3>What Is yoga?</h3><p>Yoga is not just about practicing asanas. It's about how we do it.</p><p class="">And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.</p><h3>What makes practicing asanas yogic?</h3><p class="">The important thing is:</p><ul><li><p>Use the exercises (consciously) for your personal development.</p></li></ul>`,
+      descriptionExcerpt: `<h3>What Is yoga?</h3><p>Yoga is not just about practicing asanas. It's about how we do it.</p><p>And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.</p><h3>What makes practicing asanas yogic?</h3><p>The important thing is:</p><ul><li><p>Use the exercises …</p></li></ul>`,
+      groupType: 'public',
+      actionRadius: 'interplanetary',
+      categories: [
+        {
+          id: 'cat4',
+          icon: 'psyche',
+          name: 'psyche',
+          slug: 'psyche',
+          description: 'Seele, Gefühle, Glück',
+        },
+        {
+          id: 'cat5',
+          icon: 'movement',
+          name: 'body-and-excercise',
+          slug: 'body-and-excercise',
+          description: 'Sport, Yoga, Massage, Tanzen, Entspannung',
+        },
+        {
+          id: 'cat17',
+          icon: 'spirituality',
+          name: 'spirituality',
+          slug: 'spirituality',
+          description: 'Religion, Werte, Ethik',
+        },
+      ],
+      locationName: null,
+      location: null,
+      // myRole: 'usual',
+    }
+    schoolForCitizens = {
+      id: 'g1',
+      name: 'School For Citizens',
+      slug: 'school-for-citizens',
+      about: 'Our children shall receive education for life.',
+      description: `<p class=""><em>English</em></p><h3>Our goal</h3><p>Only those who enjoy learning and do not lose their curiosity can obtain a good education for life and continue to learn with joy throughout their lives.</p><h3>Curiosity</h3><p>For this we need a school that takes up the curiosity of the children, the people, and satisfies it through a lot of experience.</p><p><br></p><p><em>Deutsch</em></p><h3>Unser Ziel</h3><p class="">Nur wer Spaß am Lernen hat und seine Neugier nicht verliert, kann gute Bildung für's Leben erlangen und sein ganzes Leben mit Freude weiter lernen.</p><h3>Neugier</h3><p class="">Dazu benötigen wir eine Schule, die die Neugier der Kinder, der Menschen, aufnimmt und durch viel Erfahrung befriedigt.</p>`,
+      descriptionExcerpt: `<p><em>English</em></p><h3>Our goal</h3><p>Only those who enjoy learning and do not lose their curiosity can obtain a good education for life and continue to learn with joy throughout their lives.</p><h3>Curiosity</h3><p>For this we need a school that takes up the curiosity of the children, …</p>`,
+      groupType: 'closed',
+      actionRadius: 'national',
+      categories: [
+        {
+          id: 'cat8',
+          icon: 'child',
+          name: 'children',
+          slug: 'children',
+          description: 'Familie, Pädagogik, Schule, Prägung',
+        },
+        {
+          id: 'cat14',
+          icon: 'science',
+          name: 'science',
+          slug: 'science',
+          description: 'Bildung, Hochschule, Publikationen, ...',
+        },
+      ],
+      locationName: 'France',
+      location: {
+        name: 'Paris',
+        nameDE: 'Paris',
+        nameEN: 'Paris',
+      },
+      // myRole: 'usual',
+    }
+    investigativeJournalism = {
+      id: 'g0',
+      name: 'Investigative Journalism',
+      slug: 'investigative-journalism',
+      about: 'Investigative journalists share ideas and insights and can collaborate.',
+      description: `<p class=""><em>English:</em></p><p class="">This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class="">Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class="">Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class="">Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>`,
+      descriptionExcerpt:
+        '<p><em>English:</em></p><p>This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br/></p><p><em>Deutsch:</em></p><p>Diese Gruppe ist verborgen.</p><h3>…</h3>',
+      groupType: 'hidden',
+      actionRadius: 'global',
+      categories: [
+        {
+          id: 'cat6',
+          icon: 'balance-scale',
+          name: 'law',
+          slug: 'law',
+          description: 'Menschenrechte, Gesetze, Verordnungen',
+        },
+        {
+          id: 'cat12',
+          icon: 'politics',
+          name: 'politics',
+          slug: 'politics',
+          description: 'Demokratie, Mitbestimmung, Wahlen, Korruption, Parteien',
+        },
+        {
+          id: 'cat16',
+          icon: 'media',
+          name: 'it-and-media',
+          slug: 'it-and-media',
+          description:
+            'Nachrichten, Manipulation, Datenschutz, Überwachung, Datenkraken, AI, Software, Apps',
+        },
+      ],
+      locationName: 'Hamburg, Germany',
+      location: {
+        name: 'Hamburg',
+        nameDE: 'Hamburg',
+        nameEN: 'Hamburg',
+      },
+      // myRole: 'usual',
+    }
+    peterLustig = {
+      id: 'u1',
+      name: 'Peter Lustig',
+      slug: 'peter-lustig',
+      role: 'user',
+    }
+    jennyRostock = {
+      id: 'u3',
+      name: 'Jenny Rostock',
+      slug: 'jenny-rostock',
+      role: 'user',
+    }
+    bobDerBaumeister = {
+      id: 'u2',
+      name: 'Bob der Baumeister',
+      slug: 'bob-der-baumeister',
+      role: 'user',
+    }
+    huey = {
+      id: 'u4',
+      name: 'Huey',
+      slug: 'huey',
+      role: 'user',
+    }
+  })
+
+  describe('mount', () => {
+    Wrapper = (data = () => {}) => {
+      return mount(GroupProfileSlug, {
+        mocks,
+        localVue,
+        data,
+      })
+    }
+
+    describe('given a puplic group – "yoga-practice"', () => {
+      describe('given a current user', () => {
+        describe('as group owner – "peter-lustig"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': peterLustig,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...yogaPractice,
+                    myRole: 'owner',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Yoga Practice')
+          })
+
+          it('has AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(true)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&yoga-practice')
+          })
+
+          describe('displays no(!) group location – because is "null"', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button disabled(!)', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBe('disabled')
+          })
+
+          it('has group role "owner"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.owner')
+          })
+
+          it('has group type "public"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.public')
+          })
+
+          it('has group action radius "interplanetary"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.interplanetary')
+          })
+
+          it('has group categories "psyche", "body-and-excercise", "spirituality"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.psyche')
+            expect(wrapper.text()).toContain('contribution.category.name.body-and-excercise')
+            expect(wrapper.text()).toContain('contribution.category.name.spirituality')
+          })
+
+          it('has no(!) group goal – because is "null"', () => {
+            expect(wrapper.text()).not.toContain('group.goal')
+          })
+
+          it('has ProfileList with members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            expect(profileList.text()).toContain('group.membersListTitle')
+            expect(profileList.text()).not.toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).toContain('Peter Lustig')
+            expect(profileList.text()).toContain('Jenny Rostock')
+            expect(profileList.text()).toContain('Bob der Baumeister')
+            expect(profileList.text()).toContain('Huey')
+          })
+
+          describe('displays description – here as well the functionallity', () => {
+            let groupDescriptionBaseCard
+
+            beforeEach(async () => {
+              groupDescriptionBaseCard = wrapper.find('.group-description')
+            })
+
+            it('has description BaseCard', () => {
+              expect(groupDescriptionBaseCard.exists()).toBe(true)
+            })
+
+            describe('displays descriptionExcerpt first', () => {
+              it('has descriptionExcerpt', () => {
+                expect(groupDescriptionBaseCard.text()).toContain(
+                  `What Is yoga?Yoga is not just about practicing asanas. It's about how we do it.And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.What makes practicing asanas yogic?The important thing is:Use the exercises …`,
+                )
+              })
+
+              it('has "show more" button', () => {
+                expect(wrapper.vm.isDescriptionCollapsed).toBe(true)
+                expect(groupDescriptionBaseCard.text()).toContain('comment.show.more')
+              })
+            })
+
+            describe('after "show more" click displays full description', () => {
+              beforeEach(async () => {
+                await groupDescriptionBaseCard.find('.collaps-button').trigger('click')
+                await wrapper.vm.$nextTick()
+              })
+
+              it('has full description', () => {
+                // test if end of full description is visible
+                expect(groupDescriptionBaseCard.text()).toContain(
+                  `Use the exercises (consciously) for your personal development.`,
+                )
+              })
+
+              it('has "show less" button', () => {
+                expect(wrapper.vm.isDescriptionCollapsed).toBe(false)
+                expect(groupDescriptionBaseCard.text()).toContain('comment.show.less')
+              })
+            })
+          })
+
+          it('has profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(true)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+
+        describe('as usual member – "jenny-rostock"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': jennyRostock,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...yogaPractice,
+                    myRole: 'usual',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Yoga Practice')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&yoga-practice')
+          })
+
+          describe('displays no(!) group location – because is "null"', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "usual"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.usual')
+          })
+
+          it('has group type "public"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.public')
+          })
+
+          it('has group action radius "interplanetary"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.interplanetary')
+          })
+
+          it('has group categories "psyche", "body-and-excercise", "spirituality"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.psyche')
+            expect(wrapper.text()).toContain('contribution.category.name.body-and-excercise')
+            expect(wrapper.text()).toContain('contribution.category.name.spirituality')
+          })
+
+          it('has no(!) group goal – because is "null"', () => {
+            expect(wrapper.text()).not.toContain('group.goal')
+          })
+
+          it('has ProfileList with members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            expect(profileList.text()).toContain('group.membersListTitle')
+            expect(profileList.text()).not.toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).toContain('Peter Lustig')
+            expect(profileList.text()).toContain('Jenny Rostock')
+            expect(profileList.text()).toContain('Bob der Baumeister')
+            expect(profileList.text()).toContain('Huey')
+          })
+
+          it('has description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(true)
+          })
+
+          it('has profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(true)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+
+        describe('as pending member – "bob-der-baumeister"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': bobDerBaumeister,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...yogaPractice,
+                    myRole: 'pending',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Yoga Practice')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&yoga-practice')
+          })
+
+          describe('displays no(!) group location – because is "null"', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "pending"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.pending')
+          })
+
+          it('has group type "public"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.public')
+          })
+
+          it('has group action radius "interplanetary"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.interplanetary')
+          })
+
+          it('has group categories "psyche", "body-and-excercise", "spirituality"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.psyche')
+            expect(wrapper.text()).toContain('contribution.category.name.body-and-excercise')
+            expect(wrapper.text()).toContain('contribution.category.name.spirituality')
+          })
+
+          it('has no(!) group goal – because is "null"', () => {
+            expect(wrapper.text()).not.toContain('group.goal')
+          })
+
+          it('has ProfileList with members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            expect(profileList.text()).toContain('group.membersListTitle')
+            expect(profileList.text()).not.toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).toContain('Peter Lustig')
+            expect(profileList.text()).toContain('Jenny Rostock')
+            expect(profileList.text()).toContain('Bob der Baumeister')
+            expect(profileList.text()).toContain('Huey')
+          })
+
+          it('has description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(true)
+          })
+
+          it('has no(!) profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(false)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+
+        describe('as none(!) member – "huey"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': huey,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...yogaPractice,
+                    myRole: null,
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Yoga Practice')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&yoga-practice')
+          })
+
+          describe('displays no(!) group location – because is "null"', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has no(!) group role', () => {
+            expect(wrapper.text()).not.toContain('group.role')
+            expect(wrapper.text()).not.toContain('group.roles')
+          })
+
+          it('has group type "public"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.public')
+          })
+
+          it('has group action radius "interplanetary"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.interplanetary')
+          })
+
+          it('has group categories "psyche", "body-and-excercise", "spirituality"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.psyche')
+            expect(wrapper.text()).toContain('contribution.category.name.body-and-excercise')
+            expect(wrapper.text()).toContain('contribution.category.name.spirituality')
+          })
+
+          it('has no(!) group goal – because is "null"', () => {
+            expect(wrapper.text()).not.toContain('group.goal')
+          })
+
+          it('has ProfileList with members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            expect(profileList.text()).toContain('group.membersListTitle')
+            expect(profileList.text()).not.toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).toContain('Peter Lustig')
+            expect(profileList.text()).toContain('Jenny Rostock')
+            expect(profileList.text()).toContain('Bob der Baumeister')
+            expect(profileList.text()).toContain('Huey')
+          })
+
+          it('has description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(true)
+          })
+
+          it('has no(!) profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(false)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+      })
+    })
+
+    describe('given a closed group – "school-for-citizens"', () => {
+      describe('given a current user', () => {
+        describe('as group owner – "peter-lustig"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': peterLustig,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...schoolForCitizens,
+                    myRole: 'owner',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('School For Citizens')
+          })
+
+          it('has AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(true)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&school-for-citizens')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Paris"', () => {
+              expect(wrapper.text()).toContain('Paris')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button disabled(!)', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBe('disabled')
+          })
+
+          it('has group role "owner"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.owner')
+          })
+
+          it('has group type "closed"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.closed')
+          })
+
+          it('has group action radius "national"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.national')
+          })
+
+          it('has group categories "children", "science"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.children')
+            expect(wrapper.text()).toContain('contribution.category.name.science')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('Our children shall receive education for life.')
+          })
+
+          it('has ProfileList with members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            expect(profileList.text()).toContain('group.membersListTitle')
+            expect(profileList.text()).not.toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).toContain('Peter Lustig')
+            expect(profileList.text()).toContain('Jenny Rostock')
+            expect(profileList.text()).toContain('Bob der Baumeister')
+            expect(profileList.text()).toContain('Huey')
+          })
+
+          it('has description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(true)
+          })
+
+          it('has profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(true)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+
+        describe('as usual member – "jenny-rostock"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': jennyRostock,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...schoolForCitizens,
+                    myRole: 'usual',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('School For Citizens')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&school-for-citizens')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Paris"', () => {
+              expect(wrapper.text()).toContain('Paris')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "usual"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.usual')
+          })
+
+          it('has group type "closed"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.closed')
+          })
+
+          it('has group action radius "national"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.national')
+          })
+
+          it('has group categories "children", "science"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.children')
+            expect(wrapper.text()).toContain('contribution.category.name.science')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('Our children shall receive education for life.')
+          })
+
+          it('has ProfileList with members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            expect(profileList.text()).toContain('group.membersListTitle')
+            expect(profileList.text()).not.toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).toContain('Peter Lustig')
+            expect(profileList.text()).toContain('Jenny Rostock')
+            expect(profileList.text()).toContain('Bob der Baumeister')
+            expect(profileList.text()).toContain('Huey')
+          })
+
+          it('has description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(true)
+          })
+
+          it('has profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(true)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+
+        describe('as pending member – "bob-der-baumeister"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': bobDerBaumeister,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...schoolForCitizens,
+                    myRole: 'pending',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('School For Citizens')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&school-for-citizens')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Paris"', () => {
+              expect(wrapper.text()).toContain('Paris')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has no(!) members count', () => {
+            expect(wrapper.text()).not.toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "pending"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.pending')
+          })
+
+          it('has group type "closed"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.closed')
+          })
+
+          it('has group action radius "national"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.national')
+          })
+
+          it('has group categories "children", "science"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.children')
+            expect(wrapper.text()).toContain('contribution.category.name.science')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('Our children shall receive education for life.')
+          })
+
+          it('has ProfileList without(!) members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            // expect(profileList.text()).not.toContain('group.membersListTitle') // does not work, because is part of 'group.membersListTitleNotAllowedSeeingGroupMembers'
+            expect(profileList.text()).toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).not.toContain('Peter Lustig')
+            expect(profileList.text()).not.toContain('Jenny Rostock')
+            expect(profileList.text()).not.toContain('Bob der Baumeister')
+            expect(profileList.text()).not.toContain('Huey')
+          })
+
+          it('has description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(true)
+          })
+
+          it('has no(!) profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(false)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+
+        describe('as none(!) member – "huey"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': huey,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...schoolForCitizens,
+                    myRole: null,
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('School For Citizens')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&school-for-citizens')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Paris"', () => {
+              expect(wrapper.text()).toContain('Paris')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has no(!) members count', () => {
+            expect(wrapper.text()).not.toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has no(!) group role', () => {
+            expect(wrapper.text()).not.toContain('group.role')
+            expect(wrapper.text()).not.toContain('group.roles')
+          })
+
+          it('has group type "closed"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.closed')
+          })
+
+          it('has group action radius "national"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.national')
+          })
+
+          it('has group categories "children", "science"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.children')
+            expect(wrapper.text()).toContain('contribution.category.name.science')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain('Our children shall receive education for life.')
+          })
+
+          it('has ProfileList without(!) members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            // expect(profileList.text()).not.toContain('group.membersListTitle') // does not work, because is part of 'group.membersListTitleNotAllowedSeeingGroupMembers'
+            expect(profileList.text()).toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).not.toContain('Peter Lustig')
+            expect(profileList.text()).not.toContain('Jenny Rostock')
+            expect(profileList.text()).not.toContain('Bob der Baumeister')
+            expect(profileList.text()).not.toContain('Huey')
+          })
+
+          it('has description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(true)
+          })
+
+          it('has no(!) profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(false)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+      })
+    })
+
+    describe('given a hidden group – "investigative-journalism"', () => {
+      describe('given a current user', () => {
+        describe('as group owner – "peter-lustig"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': peterLustig,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...investigativeJournalism,
+                    myRole: 'owner',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Investigative Journalism')
+          })
+
+          it('has AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(true)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(true)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&investigative-journalism')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Hamburg"', () => {
+              expect(wrapper.text()).toContain('Hamburg')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button disabled(!)', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBe('disabled')
+          })
+
+          it('has group role "owner"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.owner')
+          })
+
+          it('has group type "hidden"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.hidden')
+          })
+
+          it('has group action radius "global"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.global')
+          })
+
+          it('has group categories "law", "politics", "it-and-media"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.law')
+            expect(wrapper.text()).toContain('contribution.category.name.politics')
+            expect(wrapper.text()).toContain('contribution.category.name.it-and-media')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain(
+              'Investigative journalists share ideas and insights and can collaborate.',
+            )
+          })
+
+          it('has ProfileList with members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            expect(profileList.text()).toContain('group.membersListTitle')
+            expect(profileList.text()).not.toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).toContain('Peter Lustig')
+            expect(profileList.text()).toContain('Jenny Rostock')
+            expect(profileList.text()).toContain('Bob der Baumeister')
+            expect(profileList.text()).toContain('Huey')
+          })
+
+          it('has description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(true)
+          })
+
+          it('has profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(true)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+
+        describe('as usual member – "jenny-rostock"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': jennyRostock,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...investigativeJournalism,
+                    myRole: 'usual',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has group name – to verificate the group', () => {
+            expect(wrapper.text()).toContain('Investigative Journalism')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(true)
+          })
+
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
+          it('has group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('&investigative-journalism')
+          })
+
+          describe('displays group location', () => {
+            it('has group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(true)
+            })
+
+            it('has group location name "Hamburg"', () => {
+              expect(wrapper.text()).toContain('Hamburg')
+            })
+          })
+
+          it('has group foundation', () => {
+            expect(wrapper.text()).toContain('group.foundation')
+          })
+
+          it('has members count', () => {
+            expect(wrapper.text()).toContain('group.membersCount')
+          })
+
+          it('has join/leave button enabled', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(true)
+            expect(wrapper.find('.join-leave-button').attributes('disabled')).toBeFalsy()
+          })
+
+          it('has group role "usual"', () => {
+            expect(wrapper.text()).toContain('group.role')
+            expect(wrapper.text()).toContain('group.roles.usual')
+          })
+
+          it('has group type "hidden"', () => {
+            expect(wrapper.text()).toContain('group.type')
+            expect(wrapper.text()).toContain('group.types.hidden')
+          })
+
+          it('has group action radius "global"', () => {
+            expect(wrapper.text()).toContain('group.actionRadius')
+            expect(wrapper.text()).toContain('group.actionRadii.global')
+          })
+
+          it('has group categories "law", "politics", "it-and-media"', () => {
+            expect(wrapper.text()).toContain('group.categories')
+            expect(wrapper.text()).toContain('contribution.category.name.law')
+            expect(wrapper.text()).toContain('contribution.category.name.politics')
+            expect(wrapper.text()).toContain('contribution.category.name.it-and-media')
+          })
+
+          it('has group goal', () => {
+            expect(wrapper.text()).toContain('group.goal')
+            expect(wrapper.text()).toContain(
+              'Investigative journalists share ideas and insights and can collaborate.',
+            )
+          })
+
+          it('has ProfileList with members', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(true)
+            expect(profileList.text()).toContain('group.membersListTitle')
+            expect(profileList.text()).not.toContain(
+              'group.membersListTitleNotAllowedSeeingGroupMembers',
+            )
+            expect(profileList.text()).toContain('Peter Lustig')
+            expect(profileList.text()).toContain('Jenny Rostock')
+            expect(profileList.text()).toContain('Bob der Baumeister')
+            expect(profileList.text()).toContain('Huey')
+          })
+
+          it('has description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(true)
+          })
+
+          it('has profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(true)
+          })
+
+          it('has empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(true)
+          })
+        })
+
+        describe('as pending member – "bob-der-baumeister"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': bobDerBaumeister,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...investigativeJournalism,
+                    myRole: 'pending',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has no(!) group name – to verificate the group', () => {
+            expect(wrapper.text()).not.toContain('Investigative Journalism')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has not(!) ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(false)
+          })
+
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
+          it('has no(!) group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(false)
+            expect(wrapper.text()).not.toContain('&investigative-journalism')
+          })
+
+          describe('displays not(!) group location', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+
+            it('has no(!) group location name "Hamburg"', () => {
+              expect(wrapper.text()).not.toContain('Hamburg')
+            })
+          })
+
+          it('has no(!) group foundation', () => {
+            expect(wrapper.text()).not.toContain('group.foundation')
+          })
+
+          it('has no(!) members count', () => {
+            expect(wrapper.text()).not.toContain('group.membersCount')
+          })
+
+          it('has no(!) join/leave button', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(false)
+          })
+
+          it('has no(!) group role', () => {
+            expect(wrapper.text()).not.toContain('group.role')
+            expect(wrapper.text()).not.toContain('group.roles')
+          })
+
+          it('has no(!) group type', () => {
+            expect(wrapper.text()).not.toContain('group.type')
+            expect(wrapper.text()).not.toContain('group.types')
+          })
+
+          it('has no(!) group action radius', () => {
+            expect(wrapper.text()).not.toContain('group.actionRadius')
+            expect(wrapper.text()).not.toContain('group.actionRadii')
+          })
+
+          it('has no(!) group categories "law", "politics", "it-and-media"', () => {
+            expect(wrapper.text()).not.toContain('group.categories')
+            expect(wrapper.text()).not.toContain('contribution.category.name.law')
+            expect(wrapper.text()).not.toContain('contribution.category.name.politics')
+            expect(wrapper.text()).not.toContain('contribution.category.name.it-and-media')
+          })
+
+          it('has no(!) group goal', () => {
+            expect(wrapper.text()).not.toContain('group.goal')
+          })
+
+          it('has not(!) ProfileList', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(false)
+          })
+
+          it('has not(!) description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(false)
+          })
+
+          it('has no(!) profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(false)
+          })
+
+          it('has no(!) empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(false)
+          })
+        })
+
+        describe('as none(!) member – "huey"', () => {
+          beforeEach(() => {
+            mocks.$store = {
+              getters: {
+                'auth/user': huey,
+                'auth/isModerator': () => false,
+              },
+            }
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...investigativeJournalism,
+                    myRole: null,
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
+            })
+          })
+
+          it('has no(!) group name – to verificate the group', () => {
+            expect(wrapper.text()).not.toContain('Investigative Journalism')
+          })
+
+          it('has not(!) AvatarUploader', () => {
+            expect(wrapper.find('.avatar-uploader').exists()).toBe(false)
+          })
+
+          it('has not(!) ProfileAvatar', () => {
+            expect(wrapper.find('.profile-avatar').exists()).toBe(false)
+          })
+
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
+          it('has no(!) group slug', () => {
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(false)
+            expect(wrapper.text()).not.toContain('&investigative-journalism')
+          })
+
+          describe('displays not(!) group location', () => {
+            it('has no(!) group location icon "map-marker"', () => {
+              expect(wrapper.find('[data-test="map-marker"]').exists()).toBe(false)
+            })
+
+            it('has no(!) group location name "Hamburg"', () => {
+              expect(wrapper.text()).not.toContain('Hamburg')
+            })
+          })
+
+          it('has no(!) group foundation', () => {
+            expect(wrapper.text()).not.toContain('group.foundation')
+          })
+
+          it('has no(!) members count', () => {
+            expect(wrapper.text()).not.toContain('group.membersCount')
+          })
+
+          it('has no(!) join/leave button', () => {
+            expect(wrapper.find('.join-leave-button').exists()).toBe(false)
+          })
+
+          it('has no(!) group role', () => {
+            expect(wrapper.text()).not.toContain('group.role')
+            expect(wrapper.text()).not.toContain('group.roles')
+          })
+
+          it('has no(!) group type', () => {
+            expect(wrapper.text()).not.toContain('group.type')
+            expect(wrapper.text()).not.toContain('group.types')
+          })
+
+          it('has no(!) group action radius', () => {
+            expect(wrapper.text()).not.toContain('group.actionRadius')
+            expect(wrapper.text()).not.toContain('group.actionRadii')
+          })
+
+          it('has no(!) group categories "law", "politics", "it-and-media"', () => {
+            expect(wrapper.text()).not.toContain('group.categories')
+            expect(wrapper.text()).not.toContain('contribution.category.name.law')
+            expect(wrapper.text()).not.toContain('contribution.category.name.politics')
+            expect(wrapper.text()).not.toContain('contribution.category.name.it-and-media')
+          })
+
+          it('has no(!) group goal', () => {
+            expect(wrapper.text()).not.toContain('group.goal')
+          })
+
+          it('has not(!) ProfileList', () => {
+            const profileList = wrapper.find('.profile-list')
+            expect(profileList.exists()).toBe(false)
+          })
+
+          it('has not(!) description BaseCard', () => {
+            expect(wrapper.find('.group-description').exists()).toBe(false)
+          })
+
+          it('has no(!) profile post add button', () => {
+            expect(wrapper.find('.profile-post-add-button').exists()).toBe(false)
+          })
+
+          it('has no(!) empty post list', () => {
+            expect(wrapper.find('[data-test="icon-empty"]').exists()).toBe(false)
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
new file mode 100644
index 000000000..d1b410081
--- /dev/null
+++ b/webapp/pages/group/_id/_slug.vue
@@ -0,0 +1,677 @@
+<template>
+  <div v-if="isGroupVisible">
+    <ds-space />
+    <ds-flex v-if="group" :width="{ base: '100%' }" gutter="base">
+      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+        <base-card
+          :class="{ 'disabled-content': group.disabled }"
+          style="position: relative; height: auto; overflow: visible"
+        >
+          <avatar-uploader
+            v-if="isGroupOwner"
+            :profile="group"
+            :updateMutation="updateGroupMutation"
+          >
+            <profile-avatar :profile="group" class="profile-page-avatar" size="large" />
+          </avatar-uploader>
+          <profile-avatar v-else :profile="group" class="profile-page-avatar" size="large" />
+          <!-- Menu -->
+          <client-only>
+            <group-content-menu
+              v-if="isGroupOwner"
+              class="group-content-menu"
+              :usage="'groupProfile'"
+              :group="group || {}"
+              placement="bottom-end"
+            />
+            <!-- TODO: implement later on -->
+            <!-- @mute="muteUser"
+              @unmute="unmuteUser"
+              @block="blockUser"
+              @unblock="unblockUser"
+              @delete="deleteUser" -->
+          </client-only>
+          <ds-space margin="small">
+            <!-- group name -->
+            <ds-heading tag="h3" align="center" no-margin>
+              {{ groupName }}
+            </ds-heading>
+            <!-- group slug -->
+            <ds-text align="center" color="soft">
+              <!-- <base-icon name="at" data-test="ampersand" /> -->
+              {{ `&${groupSlug}` }}
+            </ds-text>
+            <!-- group location -->
+            <ds-text v-if="group && group.location" align="center" color="soft" size="small">
+              <base-icon name="map-marker" data-test="map-marker" />
+              {{ group && group.location ? group.location.name : '' }}
+            </ds-text>
+            <!-- group created at -->
+            <ds-text align="center" color="soft" size="small">
+              {{ $t('group.foundation') }} {{ group.createdAt | date('MMMM yyyy') }}
+            </ds-text>
+          </ds-space>
+          <ds-flex v-if="isAllowedSeeingGroupMembers">
+            <!-- group members count -->
+            <ds-flex-item v-if="isAllowedSeeingGroupMembers">
+              <client-only>
+                <ds-number :label="$t('group.membersCount', {}, groupMembers.length)">
+                  <count-to
+                    slot="count"
+                    :start-val="membersCountStartValue"
+                    :end-val="groupMembers.length"
+                  />
+                </ds-number>
+              </client-only>
+            </ds-flex-item>
+            <!-- <ds-flex-item>
+              <client-only>
+                <ds-number :label="$t('profile.followers')">
+                  <count-to
+                    slot="count"
+                    :start-val="followedByCountStartValue"
+                    :end-val="user.followedByCount"
+                  />
+                </ds-number>
+              </client-only>
+            </ds-flex-item> -->
+            <!-- <ds-flex-item>
+              <client-only>
+                <ds-number :label="$t('profile.following')">
+                  <count-to slot="count" :end-val="user.followingCount" />
+                </ds-number>
+              </client-only>
+            </ds-flex-item> -->
+          </ds-flex>
+          <div class="action-buttons">
+            <!-- <base-button v-if="user.isBlocked" @click="unblockUser(user)">
+              {{ $t('settings.blocked-users.unblock') }}
+            </base-button>
+            <base-button v-if="user.isMuted" @click="unmuteUser(user)">
+              {{ $t('settings.muted-users.unmute') }}
+            </base-button>
+            <follow-button
+              v-if="!user.isMuted && !user.isBlocked"
+              :follow-id="user.id"
+              :is-followed="user.followedByCurrentUser"
+              @optimistic="optimisticFollow"
+              @update="updateFollow"
+            /> -->
+            <!-- Group join / leave -->
+            <join-leave-button
+              :group="group || {}"
+              :userId="currentUser.id"
+              :isMember="isGroupMember"
+              :disabled="isGroupOwner"
+              :loading="$apollo.loading"
+              @prepare="prepareJoinLeave"
+              @update="updateJoinLeave"
+            />
+            <!-- implement:
+              v-if="!user.isMuted && !user.isBlocked" -->
+          </div>
+          <hr />
+          <ds-space margin-top="small" margin-bottom="small">
+            <!-- group my role in group -->
+            <template v-if="isGroupMember">
+              <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+                {{ $t('group.role') }}
+              </ds-text>
+              <div class="chip" align="center">
+                <ds-chip color="primary">
+                  {{ group && group.myRole ? $t('group.roles.' + group.myRole) : '' }}
+                </ds-chip>
+              </div>
+            </template>
+            <!-- group type -->
+            <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+              {{ $t('group.type') }}
+            </ds-text>
+            <div class="chip" align="center">
+              <ds-chip color="primary">
+                {{ group && group.groupType ? $t('group.types.' + group.groupType) : '' }}
+              </ds-chip>
+            </div>
+            <!-- group action radius -->
+            <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+              {{ $t('group.actionRadius') }}
+            </ds-text>
+            <div class="chip" align="center">
+              <ds-chip color="primary">
+                {{
+                  group && group.actionRadius ? $t('group.actionRadii.' + group.actionRadius) : ''
+                }}
+              </ds-chip>
+            </div>
+            <ds-space margin="x-small" />
+          </ds-space>
+          <!-- group categories -->
+          <template v-if="categoriesActive">
+            <hr />
+            <ds-space margin-top="small" margin-bottom="small">
+              <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+                {{
+                  $t(
+                    'group.categories',
+                    {},
+                    group && group.categories ? group.categories.length : 0,
+                  )
+                }}
+              </ds-text>
+              <ds-space margin="xx-small" />
+              <div class="categories">
+                <div
+                  v-for="(category, index) in group.categories"
+                  :key="category.id"
+                  align="center"
+                >
+                  <category
+                    :icon="category.icon"
+                    :name="$t(`contribution.category.name.${category.slug}`)"
+                    v-tooltip="{
+                      content: $t(`contribution.category.description.${category.slug}`),
+                      placement: 'bottom-start',
+                    }"
+                  />
+                  <ds-space v-if="index < group.categories.length - 1" margin="xxx-small" />
+                </div>
+              </div>
+            </ds-space>
+          </template>
+          <!-- group goal -->
+          <template v-if="group && group.about">
+            <hr />
+            <ds-space margin-top="small" margin-bottom="small">
+              <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+                {{ $t('group.goal') }}
+              </ds-text>
+              <ds-space margin="xx-small" />
+              <div class="chip" align="center">
+                <ds-chip>{{ group ? group.about : '' }}</ds-chip>
+              </div>
+            </ds-space>
+          </template>
+        </base-card>
+        <ds-space />
+        <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
+          {{ $t('profile.network.title') }}
+        </ds-heading>
+        <!-- Group members list -->
+        <profile-list
+          :uniqueName="'groupMembersFilter'"
+          :title="$t('group.membersListTitle')"
+          :titleNobody="
+            !isAllowedSeeingGroupMembers
+              ? $t('group.membersListTitleNotAllowedSeeingGroupMembers')
+              : null
+          "
+          :allProfilesCount="isAllowedSeeingGroupMembers ? groupMembers.length : 0"
+          :profiles="isAllowedSeeingGroupMembers ? groupMembers : []"
+          :loading="$apollo.loading"
+          @fetchAllProfiles="fetchAllMembers"
+        />
+        <!-- <ds-space />
+        <follow-list
+          :loading="$apollo.loading"
+          :user="user"
+          type="followedBy"
+          @fetchAllConnections="fetchAllConnections"
+        />
+        <ds-space />
+        <follow-list
+          :loading="$apollo.loading"
+          :user="user"
+          type="following"
+          @fetchAllConnections="fetchAllConnections"
+        /> -->
+        <!-- <social-media :user-name="groupName" :user="user" /> -->
+      </ds-flex-item>
+
+      <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
+        <!-- Group description -->
+        <ds-space>
+          <base-card class="group-description">
+            <!-- TODO: replace editor content with tiptap render view -->
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <div
+              v-if="isDescriptionCollapsed"
+              class="content hyphenate-text"
+              v-html="groupDescriptionExcerpt"
+            />
+            <content-viewer v-else class="content hyphenate-text" :content="group.description" />
+            <base-button
+              class="collaps-button"
+              size="small"
+              ghost
+              @click="isDescriptionCollapsed = !isDescriptionCollapsed"
+            >
+              {{ isDescriptionCollapsed ? $t('comment.show.more') : $t('comment.show.less') }}
+            </base-button>
+          </base-card>
+        </ds-space>
+        <ds-space v-if="isGroupMemberNonePending" centered>
+          <nuxt-link :to="{ name: 'post-create', query: { groupId: group.id } }">
+            <base-button
+              class="profile-post-add-button"
+              icon="plus"
+              circle
+              filled
+              v-tooltip="{
+                content: $t('contribution.newPost'),
+                placement: 'left',
+              }"
+            />
+          </nuxt-link>
+        </ds-space>
+        <masonry-grid>
+          <!-- TapNavigation -->
+          <!-- <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" /> -->
+
+          <!-- Group post feed -->
+          <template v-if="posts && posts.length">
+            <masonry-grid-item
+              v-for="post in posts"
+              :key="post.id"
+              :imageAspectRatio="post.image && post.image.aspectRatio"
+            >
+              <post-teaser
+                :post="post"
+                :width="{ base: '100%', md: '100%', xl: '50%' }"
+                @removePostFromList="posts = removePostFromList(post, posts)"
+                @pinPost="pinPost(post, refetchPostList)"
+                @unpinPost="unpinPost(post, refetchPostList)"
+              />
+            </masonry-grid-item>
+          </template>
+          <template v-else-if="$apollo.loading">
+            <ds-grid-item column-span="fullWidth">
+              <ds-space centered>
+                <ds-spinner size="base"></ds-spinner>
+              </ds-space>
+            </ds-grid-item>
+          </template>
+          <template v-else>
+            <ds-grid-item column-span="fullWidth">
+              <empty margin="xx-large" icon="file" data-test="icon-empty" />
+            </ds-grid-item>
+          </template>
+        </masonry-grid>
+        <client-only>
+          <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
+        </client-only>
+      </ds-flex-item>
+    </ds-flex>
+  </div>
+</template>
+
+<script>
+import uniqBy from 'lodash/uniqBy'
+import { profilePagePosts } from '~/graphql/PostQuery'
+import { updateGroupMutation, groupQuery, groupMembersQuery } from '~/graphql/groups'
+// import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
+// import { blockUser, unblockUser } from '~/graphql/settings/BlockedUsers'
+import UpdateQuery from '~/components/utils/UpdateQuery'
+import postListActions from '~/mixins/postListActions'
+import AvatarUploader from '~/components/Uploader/AvatarUploader'
+import Category from '~/components/Category'
+import ContentViewer from '~/components/Editor/ContentViewer'
+import CountTo from '~/components/CountTo.vue'
+import Empty from '~/components/Empty/Empty'
+// import FollowButton from '~/components/Button/FollowButton'
+// import FollowList from '~/components/features/ProfileList/FollowList'
+import GroupContentMenu from '~/components/ContentMenu/GroupContentMenu'
+import JoinLeaveButton from '~/components/Button/JoinLeaveButton'
+import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
+import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
+import ProfileList from '~/components/features/ProfileList/ProfileList'
+// import SocialMedia from '~/components/SocialMedia/SocialMedia'
+// import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
+
+// const tabToFilterMapping = ({ tab, id }) => {
+//   return {
+//     post: { author: { id } },
+//     comment: { comments_some: { author: { id } } },
+//     shout: { shoutedBy_some: { id } },
+//   }[tab]
+// }
+
+export default {
+  components: {
+    AvatarUploader,
+    Category,
+    ContentViewer,
+    CountTo,
+    Empty,
+    // FollowButton,
+    // FollowList,
+    GroupContentMenu,
+    JoinLeaveButton,
+    PostTeaser,
+    ProfileAvatar,
+    ProfileList,
+    MasonryGrid,
+    MasonryGridItem,
+    // SocialMedia,
+    // TabNavigation,
+  },
+  mixins: [postListActions],
+  transition: {
+    name: 'slide-up',
+    mode: 'out-in',
+  },
+  head() {
+    return {
+      title: this.groupName,
+    }
+  },
+  data() {
+    // const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
+    const filter = { group: { id: this.$route.params.id } }
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+      loadGroupMembers: false,
+      posts: [],
+      hasMore: true,
+      offset: 0,
+      pageSize: 6,
+      // tabActive: 'post',
+      filter,
+      // followedByCountStartValue: 0,
+      // followedByCount: 7,
+      // followingCount: 7,
+      membersCountStartValue: 0,
+      membersCountToLoad: Infinity,
+      updateGroupMutation,
+      isDescriptionCollapsed: true,
+    }
+  },
+  computed: {
+    currentUser() {
+      return this.$store.getters['auth/user']
+    },
+    group() {
+      return this.Group && this.Group[0] ? this.Group[0] : {}
+    },
+    groupName() {
+      const { name } = this.group || {}
+      return name || this.$t('profile.userAnonym')
+    },
+    groupSlug() {
+      const { slug } = this.group || {}
+      return slug
+    },
+    groupDescriptionExcerpt() {
+      return this.group ? this.$filters.removeLinks(this.group.descriptionExcerpt) : ''
+    },
+    isGroupOwner() {
+      return this.group ? this.group.myRole === 'owner' : false
+    },
+    isGroupMember() {
+      return this.group ? !!this.group.myRole : false
+    },
+    isGroupMemberNonePending() {
+      return this.group ? ['usual', 'admin', 'owner'].includes(this.group.myRole) : false
+    },
+    isGroupVisible() {
+      return this.group && !(this.group.groupType === 'hidden' && !this.isGroupMemberNonePending)
+    },
+    groupMembers() {
+      return this.GroupMembers ? this.GroupMembers : []
+    },
+    isAllowedSeeingGroupMembers() {
+      return (
+        this.group &&
+        (this.group.groupType === 'public' ||
+          (['closed', 'hidden'].includes(this.group.groupType) && this.isGroupMemberNonePending))
+      )
+    },
+    // tabOptions() {
+    //   return [
+    //     {
+    //       type: 'post',
+    //       title: this.$t('common.post', null, this.user.contributionsCount),
+    //       count: this.user.contributionsCount,
+    //       disabled: this.user.contributionsCount === 0,
+    //     },
+    //     {
+    //       type: 'comment',
+    //       title: this.$t('profile.commented'),
+    //       count: this.user.commentedCount,
+    //       disabled: this.user.commentedCount === 0,
+    //     },
+    //     {
+    //       type: 'shout',
+    //       title: this.$t('profile.shouted'),
+    //       count: this.user.shoutedCount,
+    //       disabled: this.user.shoutedCount === 0,
+    //     },
+    //   ]
+    // },
+  },
+  watch: {
+    isAllowedSeeingGroupMembers(to, _from) {
+      this.loadGroupMembers = to
+    },
+  },
+  methods: {
+    // handleTab(tab) {
+    //   if (this.tabActive !== tab) {
+    //     this.tabActive = tab
+    //     this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
+    //     this.resetPostList()
+    //   }
+    // },
+    uniq(items, field = 'id') {
+      return uniqBy(items, field)
+    },
+    showMoreContributions($state) {
+      const { profilePagePosts: PostQuery } = this.$apollo.queries
+      if (!PostQuery) return // seems this can be undefined on subpages
+      this.offset += this.pageSize
+
+      PostQuery.fetchMore({
+        variables: {
+          offset: this.offset,
+          filter: this.filter,
+          first: this.pageSize,
+          orderBy: 'createdAt_desc',
+        },
+        updateQuery: UpdateQuery(this, { $state, pageKey: 'profilePagePosts' }),
+      })
+    },
+    resetPostList() {
+      this.offset = 0
+      this.posts = []
+      this.hasMore = true
+    },
+    refetchPostList() {
+      this.resetPostList()
+      this.$apollo.queries.profilePagePosts.refetch()
+    },
+    // async muteUser(user) {
+    //   try {
+    //     await this.$apollo.mutate({ mutation: muteUser(), variables: { id: user.id } })
+    //   } catch (error) {
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.$apollo.queries.User.refetch()
+    //     this.resetPostList()
+    //     this.$apollo.queries.profilePagePosts.refetch()
+    //   }
+    // },
+    // async unmuteUser(user) {
+    //   try {
+    //     this.$apollo.mutate({ mutation: unmuteUser(), variables: { id: user.id } })
+    //   } catch (error) {
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.$apollo.queries.User.refetch()
+    //     this.resetPostList()
+    //     this.$apollo.queries.profilePagePosts.refetch()
+    //   }
+    // },
+    // async blockUser(user) {
+    //   try {
+    //     await this.$apollo.mutate({ mutation: blockUser(), variables: { id: user.id } })
+    //   } catch (error) {
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.$apollo.queries.User.refetch()
+    //   }
+    // },
+    // async unblockUser(user) {
+    //   try {
+    //     this.$apollo.mutate({ mutation: unblockUser(), variables: { id: user.id } })
+    //   } catch (error) {
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.$apollo.queries.User.refetch()
+    //   }
+    // },
+    // async deleteUser(userdata) {
+    //   this.$store.commit('modal/SET_OPEN', {
+    //     name: 'delete',
+    //     data: {
+    //       userdata: userdata,
+    //     },
+    //   })
+    // },
+    // optimisticFollow({ followedByCurrentUser }) {
+    //   /*
+    //    * Note: followedByCountStartValue is updated to avoid counting from 0 when follow/unfollow
+    //    */
+    //   this.followedByCountStartValue = this.user.followedByCount
+    //   const currentUser = this.$store.getters['auth/user']
+    //   if (followedByCurrentUser) {
+    //     this.user.followedByCount++
+    //     this.user.followedBy = [currentUser, ...this.user.followedBy]
+    //   } else {
+    //     this.user.followedByCount--
+    //     this.user.followedBy = this.user.followedBy.filter((user) => user.id !== currentUser.id)
+    //   }
+    //   this.user.followedByCurrentUser = followedByCurrentUser
+    // },
+    // updateFollow({ followedByCurrentUser, followedBy, followedByCount }) {
+    //   this.followedByCountStartValue = this.user.followedByCount
+    //   this.user.followedByCount = followedByCount
+    //   this.user.followedByCurrentUser = followedByCurrentUser
+    //   this.user.followedBy = followedBy
+    // },
+    prepareJoinLeave() {
+      // "membersCountStartValue" is updated to avoid counting from 0 when join/leave
+      this.membersCountStartValue = this.GroupMembers.length
+    },
+    updateJoinLeave({ myRoleInGroup }) {
+      this.Group[0].myRole = myRoleInGroup
+      if (this.isAllowedSeeingGroupMembers) {
+        this.$apollo.queries.GroupMembers.refetch()
+      } else {
+        this.GroupMembers = []
+      }
+    },
+    fetchAllMembers() {
+      this.membersCountToLoad = Infinity
+    },
+  },
+  apollo: {
+    profilePagePosts: {
+      query() {
+        return profilePagePosts(this.$i18n)
+      },
+      variables() {
+        return {
+          filter: this.filter,
+          first: this.pageSize,
+          offset: 0,
+          orderBy: 'createdAt_desc',
+        }
+      },
+      update({ profilePagePosts }) {
+        this.posts = profilePagePosts
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+    Group: {
+      query() {
+        return groupQuery(this.$i18n)
+      },
+      variables() {
+        return {
+          id: this.$route.params.id,
+          // followedByCount: this.followedByCount,
+          // followingCount: this.followingCount,
+        }
+      },
+      error(error) {
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+    GroupMembers: {
+      query() {
+        return groupMembersQuery()
+      },
+      variables() {
+        return {
+          id: this.$route.params.id,
+        }
+      },
+      skip() {
+        return !this.loadGroupMembers
+      },
+      error(error) {
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.profile-page-avatar.profile-avatar {
+  margin: auto;
+  margin-top: -60px;
+}
+.page-name-group-id-slug {
+  .ds-flex-item:first-child .group-content-menu {
+    position: absolute;
+    top: $space-x-small;
+    right: $space-x-small;
+  }
+}
+.profile-post-add-button {
+  box-shadow: $box-shadow-x-large;
+}
+.action-buttons {
+  margin: $space-small 0;
+
+  > .base-button {
+    display: block;
+    width: 100%;
+    margin-bottom: $space-x-small;
+  }
+}
+.centered-text {
+  text-align: center;
+  margin-bottom: $space-xxx-small;
+}
+.chip {
+  margin-bottom: $space-x-small;
+}
+.group-description > .base-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  > .content {
+    flex-grow: 1;
+    margin-bottom: $space-small;
+  }
+}
+.collaps-button {
+  float: right;
+}
+</style>
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
new file mode 100644
index 000000000..ebdbbe37c
--- /dev/null
+++ b/webapp/pages/group/create.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('group.createNewGroup.title') }}</ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
+    <ds-container>
+      <base-card>
+        <ds-space margin="large">
+          <ds-flex :width="{ base: '100%' }" gutter="base">
+            <ds-flex-item :width="{ base: '100%', md: 5 }">
+              <ds-container>
+                <group-form @createGroup="createGroup" />
+              </ds-container>
+            </ds-flex-item>
+            <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+          </ds-flex>
+        </ds-space>
+      </base-card>
+    </ds-container>
+  </div>
+</template>
+
+<script>
+import GroupForm from '~/components/Group/GroupForm'
+import { createGroupMutation } from '~/graphql/groups.js'
+
+export default {
+  components: {
+    GroupForm,
+  },
+  data() {
+    return {
+      createGroupData: {},
+    }
+  },
+  methods: {
+    async createGroup(value) {
+      const { name, about, description, groupType, actionRadius, locationName, categoryIds } = value
+      const variables = {
+        name,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        locationName,
+        categoryIds,
+      }
+      let responseId, responseSlug
+      try {
+        await this.$apollo.mutate({
+          mutation: createGroupMutation(),
+          variables,
+          update: (_store, { data }) => {
+            const { id: groupId, slug: groupSlug } = data.CreateGroup
+            responseId = groupId
+            responseSlug = groupSlug
+          },
+        })
+        this.$toast.success(this.$t('group.groupCreated'))
+        this.$router.history.push({
+          name: 'group-id-slug',
+          params: { id: responseId, slug: responseSlug },
+        })
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
+  },
+}
+</script>
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
new file mode 100644
index 000000000..7a0f9d051
--- /dev/null
+++ b/webapp/pages/group/edit/_id.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('group.editGroupSettings.title') }}</ds-heading>
+      <ds-heading tag="h2">
+        {{ $t('group.editGroupSettings.groupName', { name: group.name }) }}
+      </ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+        <ds-menu :routes="routes" :is-exact="() => true" />
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">
+        <transition name="slide-up" appear>
+          <nuxt-child :group="group" />
+        </transition>
+      </ds-flex-item>
+    </ds-flex>
+  </div>
+</template>
+
+<script>
+import { groupQuery } from '~/graphql/groups.js'
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters({
+      user: 'auth/user',
+    }),
+    routes() {
+      return [
+        {
+          name: this.$t('group.general'),
+          path: `/group/edit/${this.group.id}`,
+        },
+        {
+          name: this.$t('group.members'),
+          path: `/group/edit/${this.group.id}/members`,
+        },
+      ]
+    },
+  },
+  async asyncData(context) {
+    const {
+      app,
+      error,
+      params: { id },
+    } = context
+    const client = app.apolloProvider.defaultClient
+    const {
+      data: {
+        Group: [group],
+      },
+    } = await client.query({
+      query: groupQuery(), // "this.$i18n" is undefined here, so we use default lang
+      variables: { id },
+    })
+    if (group.myRole !== 'owner') {
+      error({ statusCode: 403, message: 'NONONNNO' })
+    }
+    return { group }
+  },
+}
+</script>
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
new file mode 100644
index 000000000..e3c934dc5
--- /dev/null
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <base-card>
+      <ds-heading tag="h3">{{ $t('group.general') }}</ds-heading>
+      <ds-space margin="large" />
+      <group-form :group="group" :update="true" @updateGroup="updateGroup" />
+    </base-card>
+  </div>
+</template>
+
+<script>
+import GroupForm from '~/components/Group/GroupForm'
+import { updateGroupMutation } from '~/graphql/groups.js'
+
+export default {
+  components: {
+    GroupForm,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    async updateGroup(value) {
+      const {
+        id,
+        slug,
+        name,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        locationName,
+        categoryIds,
+      } = value
+      const variables = {
+        id,
+        name,
+        slug,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        locationName,
+        categoryIds,
+      }
+      let responseId, responseSlug
+      try {
+        await this.$apollo.mutate({
+          mutation: updateGroupMutation(),
+          variables,
+          update: (_store, { data }) => {
+            const { id: groupId, slug: groupSlug } = data.UpdateGroup
+            responseId = groupId
+            responseSlug = groupSlug
+          },
+        })
+        this.$toast.success(this.$t('group.updatedGroup'))
+        this.$router.history.push({
+          name: 'group-id-slug',
+          params: { id: responseId, slug: responseSlug },
+        })
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
+  },
+}
+</script>
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
new file mode 100644
index 000000000..c1e19bcd1
--- /dev/null
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <base-card>
+      <ds-heading tag="h3">{{ $t('group.members') }}</ds-heading>
+      <ds-space margin="large" />
+      <group-member
+        :groupId="group.id"
+        :groupMembers="groupMembers"
+        @loadGroupMembers="loadGroupMembers"
+      />
+    </base-card>
+  </div>
+</template>
+
+<script>
+import GroupMember from '~/components/Group/GroupMember'
+import { groupMembersQuery } from '~/graphql/groups.js'
+
+export default {
+  components: {
+    GroupMember,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    groupMembers() {
+      return this.GroupMembers ? this.GroupMembers : []
+    },
+  },
+  apollo: {
+    GroupMembers: {
+      query() {
+        return groupMembersQuery()
+      },
+      variables() {
+        return {
+          id: this.group.id,
+        }
+      },
+      error(error) {
+        this.GroupMembers = []
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+  methods: {
+    loadGroupMembers() {
+      this.$apollo.queries.GroupMembers.refetch()
+    },
+  },
+}
+</script>
diff --git a/webapp/pages/groups.spec.js b/webapp/pages/groups.spec.js
new file mode 100644
index 000000000..0fbacd6b3
--- /dev/null
+++ b/webapp/pages/groups.spec.js
@@ -0,0 +1,35 @@
+import { config, mount } from '@vue/test-utils'
+import groups from './groups.vue'
+
+const localVue = global.localVue
+
+config.stubs['nuxt-link'] = '<span class="nuxt-link"><slot /></span>'
+config.stubs['client-only'] = '<span class="client-only"><slot /></span>'
+
+describe('groups', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(groups, {
+        mocks,
+        localVue,
+      })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.is('div')).toBe(true)
+    })
+  })
+})
diff --git a/webapp/pages/groups.vue b/webapp/pages/groups.vue
new file mode 100644
index 000000000..386905c5b
--- /dev/null
+++ b/webapp/pages/groups.vue
@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <ds-space margin="small">
+      <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
+    </ds-space>
+    <ds-space margin="large" />
+    <ds-container>
+      <!-- create group -->
+      <ds-space centered>
+        <nuxt-link :to="{ name: 'group-create' }">
+          <base-button
+            class="group-add-button"
+            icon="plus"
+            size="large"
+            circle
+            filled
+            v-tooltip="{
+              content: $t('group.createNewGroup.tooltip'),
+              placement: 'left',
+            }"
+          />
+        </nuxt-link>
+      </ds-space>
+      <!-- group list -->
+      <ds-space centered v-if="showPagination">
+        <pagination-buttons
+          :hasNext="hasNext"
+          :showPageCounter="true"
+          :hasPrevious="hasPrevious"
+          :activePage="activePage"
+          :activeResourceCount="activeTab.count"
+          :key="'Top'"
+          :pageSize="pageSize"
+          @back="previousResults"
+          @next="nextResults"
+        />
+      </ds-space>
+      <group-list :groups="myGroups" />
+      <ds-space centered v-if="showPagination">
+        <pagination-buttons
+          :hasNext="hasNext"
+          :showPageCounter="true"
+          :hasPrevious="hasPrevious"
+          :activePage="activePage"
+          :activeResourceCount="activeTab.count"
+          :key="'Bottom'"
+          :pageSize="pageSize"
+          @back="previousResults"
+          @next="nextResults"
+        />
+      </ds-space>
+    </ds-container>
+  </div>
+</template>
+
+<script>
+import GroupList from '~/components/Group/GroupList'
+import { groupQuery, groupCountQuery } from '~/graphql/groups.js'
+import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
+import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
+
+const tabToFilterMapping = (tab) => {
+  return {
+    myGroups: { isMember: true },
+    allGroups: {},
+  }[tab]
+}
+
+export default {
+  name: 'Groups',
+  components: {
+    GroupList,
+    TabNavigation,
+    PaginationButtons,
+  },
+  data() {
+    return {
+      Group: [],
+      groupFilter: { isMember: true },
+      tabActive: 'myGroups',
+      pageSize: 5,
+      activePage: 0,
+      myGroupsCount: 0,
+      allGroupsCount: 0,
+    }
+  },
+  methods: {
+    handleTab(tab) {
+      if (this.tabActive !== tab) {
+        this.tabActive = tab
+        this.activePage = 0
+        this.groupFilter = tabToFilterMapping(tab)
+        this.$apollo.queries.Group.refetch()
+      }
+    },
+    previousResults() {
+      this.activePage--
+      this.$apollo.queries.Group.refetch()
+    },
+    nextResults() {
+      this.activePage++
+      this.$apollo.queries.Group.refetch()
+    },
+  },
+  computed: {
+    activeTab() {
+      return this.tabOptions.find((tab) => tab.type === this.tabActive)
+    },
+    showPagination() {
+      return this.activeTab.count > this.pageSize
+    },
+    hasNext() {
+      return (this.activePage + 1) * this.pageSize < this.activeTab.count
+    },
+    hasPrevious() {
+      return this.activePage > 0
+    },
+    pagination() {
+      return {
+        first: this.pageSize,
+        offset: this.activePage * this.pageSize,
+      }
+    },
+    myGroups() {
+      return this.Group ? this.Group : []
+    },
+    tabOptions() {
+      return [
+        {
+          type: 'myGroups',
+          title: this.$t('group.myGroups'),
+          count: this.myGroupsCount,
+          disabled: this.myGroupsCount === 0,
+        },
+        {
+          type: 'allGroups',
+          title: this.$t('group.allGroups'),
+          count: this.allGroupsCount,
+          disabled: this.allGroupsCount === 0,
+        },
+      ]
+    },
+  },
+  apollo: {
+    Group: {
+      query() {
+        return groupQuery(this.$i18n)
+      },
+      variables() {
+        return {
+          ...this.groupFilter,
+          ...this.pagination,
+        }
+      },
+      error(error) {
+        this.Group = []
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+    MyGroupsCount: {
+      query() {
+        return groupCountQuery()
+      },
+      variables() {
+        return {
+          isMember: true,
+        }
+      },
+      update({ GroupCount }) {
+        this.myGroupsCount = GroupCount
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+    AllGroupsCount: {
+      query() {
+        return groupCountQuery()
+      },
+      update({ GroupCount }) {
+        this.allGroupsCount = GroupCount
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.group-add-button {
+  box-shadow: $box-shadow-x-large;
+}
+</style>
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 729edc415..8b06341eb 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -8,7 +8,7 @@
       <ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
         <donation-info :goal="goal" :progress="progress" />
       </ds-grid-item>
-      <!-- newsfeed -->
+      <!-- news feed -->
       <template v-if="hasResults">
         <masonry-grid-item
           v-for="post in posts"
@@ -38,7 +38,6 @@
           v-tooltip="{
             content: $t('contribution.newPost'),
             placement: 'left',
-            delay: { show: 500 },
           }"
           class="post-add-button"
           icon="plus"
diff --git a/webapp/pages/password-reset/change-password.spec.js b/webapp/pages/password-reset/change-password.spec.js
index cad031c95..103004d67 100644
--- a/webapp/pages/password-reset/change-password.spec.js
+++ b/webapp/pages/password-reset/change-password.spec.js
@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils'
-import changePassword from './change-password.vue'
+import changePassword from './change-password'
 
 const localVue = global.localVue
 
-describe('enter-nonce.vue', () => {
+describe('change-password', () => {
   let wrapper
   let mocks
 
diff --git a/webapp/pages/post/_id.spec.js b/webapp/pages/post/_id.spec.js.old
similarity index 92%
rename from webapp/pages/post/_id.spec.js
rename to webapp/pages/post/_id.spec.js.old
index 7e6812002..cb97a1776 100644
--- a/webapp/pages/post/_id.spec.js
+++ b/webapp/pages/post/_id.spec.js.old
@@ -18,6 +18,9 @@ describe('post/_id.vue', () => {
           slug: 'my-post',
         },
       },
+      $env: {
+        CATEGORIES_ACTIVE: false,
+      },
     }
   })
 
diff --git a/webapp/pages/post/_id.vue b/webapp/pages/post/_id.vue
index 8d425eab7..c50ccc303 100644
--- a/webapp/pages/post/_id.vue
+++ b/webapp/pages/post/_id.vue
@@ -1,16 +1,7 @@
 <template>
-  <div>
-    <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-        <transition name="slide-up" appear>
-          <nuxt-child />
-        </transition>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '200px' }">
-        <ds-menu :routes="routes" class="post-side-navigation" />
-      </ds-flex-item>
-    </ds-flex>
-  </div>
+  <transition name="slide-up" appear>
+    <nuxt-child />
+  </transition>
 </template>
 
 <script>
@@ -19,7 +10,7 @@ import PersistentLinks from '~/mixins/persistentLinks.js'
 
 const options = {
   queryId: gql`
-    query($idOrSlug: ID) {
+    query ($idOrSlug: ID) {
       Post(id: $idOrSlug) {
         id
         slug
@@ -27,7 +18,7 @@ const options = {
     }
   `,
   querySlug: gql`
-    query($idOrSlug: String) {
+    query ($idOrSlug: String) {
       Post(slug: $idOrSlug) {
         id
         slug
@@ -41,40 +32,5 @@ const persistentLinks = PersistentLinks(options)
 
 export default {
   mixins: [persistentLinks],
-  computed: {
-    routes() {
-      const { slug, id } = this.$route.params
-      return [
-        {
-          name: this.$t('common.post', null, 1),
-          path: `/post/${id}/${slug}`,
-          children: [
-            {
-              name: this.$t('common.comment', null, 2),
-              path: `/post/${id}/${slug}#comments`,
-            },
-            // TODO implement
-            /* {
-              name: this.$t('common.letsTalk'),
-              path: `/post/${id}/${slug}#lets-talk`
-            }, */
-            // TODO implement
-            /* {
-              name: this.$t('common.versus'),
-              path: `/post/${id}/${slug}#versus`
-            } */
-          ],
-        },
-      ]
-    },
-  },
 }
 </script>
-
-<style lang="scss">
-.post-side-navigation {
-  position: sticky;
-  top: 65px;
-  z-index: 2;
-}
-</style>
diff --git a/webapp/pages/post/_id/_slug/index.spec.js b/webapp/pages/post/_id/_slug/index.spec.js
index 4289bb53d..2dd4522b2 100644
--- a/webapp/pages/post/_id/_slug/index.spec.js
+++ b/webapp/pages/post/_id/_slug/index.spec.js
@@ -56,6 +56,10 @@ describe('PostSlug', () => {
         },
         $route: {
           hash: '',
+          params: {
+            slug: 'slug',
+            id: 'id',
+          },
         },
         // If you are mocking the router, then don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
         $router: {
@@ -72,6 +76,9 @@ describe('PostSlug', () => {
           query: jest.fn().mockResolvedValue({ data: { PostEmotionsCountByEmotion: {} } }),
         },
         $scrollTo: jest.fn(),
+        $env: {
+          CATEGORIES_ACTIVE: false,
+        },
       }
       stubs = {
         HcEditor: { render: () => {}, methods: { insertReply: jest.fn(() => null) } },
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index b1ca870d7..2366eb072 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -1,96 +1,135 @@
 <template>
   <transition name="fade" appear>
-    <base-card
-      v-if="post && ready"
-      :lang="post.language"
-      :class="{
-        'post-page': true,
-        'disabled-content': post.disabled,
-        '--blur-image': blurred,
-      }"
-      :style="heroImageStyle"
-    >
-      <template #heroImage v-if="post.image">
-        <img :src="post.image | proxyApiUrl" class="image" />
-        <aside v-show="post.image && post.image.sensitive" class="blur-toggle">
-          <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
-          <base-button
-            :icon="blurred ? 'eye' : 'eye-slash'"
-            filled
-            circle
-            @click="blurred = !blurred"
-          />
-        </aside>
-      </template>
-      <section class="menu">
-        <user-teaser :user="post.author" :date-time="post.createdAt">
-          <template #dateTime>
-            <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
-          </template>
-        </user-teaser>
-        <client-only>
-          <content-menu
-            placement="bottom-end"
-            resource-type="contribution"
-            :resource="post"
-            :modalsData="menuModalsData"
-            :is-owner="isAuthor"
-            @pinPost="pinPost"
-            @unpinPost="unpinPost"
-          />
-        </client-only>
-      </section>
-      <ds-space margin-bottom="small" />
-      <h2 class="title hyphenate-text">{{ post.title }}</h2>
-      <ds-space margin-bottom="small" />
-      <content-viewer class="content hyphenate-text" :content="post.content" />
-      <!-- Tags -->
-      <div v-if="post.tags && post.tags.length" class="tags">
-        <ds-space margin="xx-small" />
-        <hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
-      </div>
-      <ds-space margin-top="small">
-        <ds-flex :gutter="{ lg: 'small' }">
-          <!-- Shout Button -->
-          <ds-flex-item
-            :width="{ lg: '15%', md: '22%', sm: '22%', base: '100%' }"
-            class="shout-button"
-          >
-            <hc-shout-button
-              v-if="post.author"
-              :disabled="isAuthor"
-              :count="post.shoutedCount"
-              :is-shouted="post.shoutedByCurrentUser"
-              :post-id="post.id"
-            />
-          </ds-flex-item>
-        </ds-flex>
+    <div>
+      <ds-space margin="small">
+        <ds-heading tag="h1">{{ $t('post.viewPost.title') }}</ds-heading>
+        <ds-heading v-if="post && post.group" tag="h2">
+          {{ $t('post.viewPost.forGroup.title', { name: post.group.name }) }}
+        </ds-heading>
       </ds-space>
-      <!-- Comments -->
-      <ds-section>
-        <comment-list :post="post" @toggleNewCommentForm="toggleNewCommentForm" @reply="reply" />
-        <ds-space margin-bottom="large" />
-        <comment-form
-          v-if="showNewCommentForm && !isBlocked"
-          ref="commentForm"
-          :post="post"
-          @createComment="createComment"
-        />
-        <ds-placeholder v-if="isBlocked">
-          {{ $t('settings.blocked-users.explanation.commenting-disabled') }}
-          <br />
-          {{ $t('settings.blocked-users.explanation.commenting-explanation') }}
-          <page-params-link :pageParams="links.FAQ">
-            {{ $t('site.faq') }}
-          </page-params-link>
-        </ds-placeholder>
-      </ds-section>
-    </base-card>
+      <ds-space margin="large" />
+      <ds-flex gutter="small">
+        <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+          <base-card
+            v-if="post && ready"
+            :lang="post.language"
+            :class="{
+              'post-page': true,
+              'disabled-content': post.disabled,
+              '--blur-image': blurred,
+            }"
+            :style="heroImageStyle"
+          >
+            <template #heroImage v-if="post.image">
+              <img :src="post.image | proxyApiUrl" class="image" />
+              <aside v-show="post.image && post.image.sensitive" class="blur-toggle">
+                <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
+                <base-button
+                  :icon="blurred ? 'eye' : 'eye-slash'"
+                  filled
+                  circle
+                  @click="blurred = !blurred"
+                />
+              </aside>
+            </template>
+            <section class="menu">
+              <user-teaser :user="post.author" :group="post.group" wide :date-time="post.createdAt">
+                <template #dateTime>
+                  <ds-text v-if="post.createdAt !== post.updatedAt">
+                    ({{ $t('post.edited') }})
+                  </ds-text>
+                </template>
+              </user-teaser>
+              <client-only>
+                <content-menu
+                  placement="bottom-end"
+                  resource-type="contribution"
+                  :resource="post"
+                  :modalsData="menuModalsData"
+                  :is-owner="isAuthor"
+                  @pinPost="pinPost"
+                  @unpinPost="unpinPost"
+                />
+              </client-only>
+            </section>
+            <ds-space margin-bottom="small" />
+            <h2 class="title hyphenate-text">{{ post.title }}</h2>
+            <ds-space margin-bottom="small" />
+            <content-viewer class="content hyphenate-text" :content="post.content" />
+            <!-- Categories -->
+            <div v-if="categoriesActive" class="categories">
+              <ds-space margin="xx-large" />
+              <ds-space margin="xx-small" />
+              <hc-category
+                v-for="category in post.categories"
+                :key="category.id"
+                :icon="category.icon"
+                :name="$t(`contribution.category.name.${category.slug}`)"
+                v-tooltip="{
+                  content: $t(`contribution.category.description.${category.slug}`),
+                  placement: 'bottom-start',
+                }"
+              />
+            </div>
+            <ds-space margin-bottom="small" />
+            <!-- Tags -->
+            <div v-if="post.tags && post.tags.length" class="tags">
+              <ds-space margin="xx-small" />
+              <hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
+            </div>
+            <ds-space margin-top="small">
+              <ds-flex :gutter="{ lg: 'small' }">
+                <!-- Shout Button -->
+                <ds-flex-item
+                  :width="{ lg: '15%', md: '22%', sm: '22%', base: '100%' }"
+                  class="shout-button"
+                >
+                  <hc-shout-button
+                    v-if="post.author"
+                    :disabled="isAuthor"
+                    :count="post.shoutedCount"
+                    :is-shouted="post.shoutedByCurrentUser"
+                    :post-id="post.id"
+                  />
+                </ds-flex-item>
+              </ds-flex>
+            </ds-space>
+            <!-- Comments -->
+            <ds-section>
+              <comment-list
+                :post="post"
+                @toggleNewCommentForm="toggleNewCommentForm"
+                @reply="reply"
+              />
+              <ds-space margin-bottom="large" />
+              <comment-form
+                v-if="showNewCommentForm && !isBlocked && canCommentPost"
+                ref="commentForm"
+                :post="post"
+                @createComment="createComment"
+              />
+              <ds-placeholder v-if="isBlocked">
+                {{ $t('settings.blocked-users.explanation.commenting-disabled') }}
+                <br />
+                {{ $t('settings.blocked-users.explanation.commenting-explanation') }}
+                <page-params-link :pageParams="links.FAQ">
+                  {{ $t('site.faq') }}
+                </page-params-link>
+              </ds-placeholder>
+            </ds-section>
+          </base-card>
+        </ds-flex-item>
+        <ds-flex-item :width="{ base: '200px' }">
+          <ds-menu :routes="routes" class="post-side-navigation" />
+        </ds-flex-item>
+      </ds-flex>
+    </div>
   </transition>
 </template>
 
 <script>
 import ContentViewer from '~/components/Editor/ContentViewer'
+import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
@@ -104,6 +143,7 @@ import {
   sortTagsAlphabetically,
 } from '~/components/utils/PostHelpers'
 import PostQuery from '~/graphql/PostQuery'
+import { groupQuery } from '~/graphql/groups'
 import PostMutations from '~/graphql/PostMutations'
 import links from '~/constants/links.js'
 
@@ -118,6 +158,7 @@ export default {
     CommentForm,
     CommentList,
     ContentViewer,
+    HcCategory,
     HcHashtag,
     HcShoutButton,
     PageParamsLink,
@@ -138,6 +179,8 @@ export default {
       blurred: false,
       blocked: null,
       postAuthor: null,
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+      group: null,
     }
   },
   mounted() {
@@ -148,6 +191,31 @@ export default {
     }, 50)
   },
   computed: {
+    routes() {
+      const { slug, id } = this.$route.params
+      return [
+        {
+          name: this.$t('common.post', null, 1),
+          path: `/post/${id}/${slug}`,
+          children: [
+            {
+              name: this.$t('common.comment', null, 2),
+              path: `/post/${id}/${slug}#comments`,
+            },
+            // TODO implement
+            /* {
+                name: this.$t('common.letsTalk'),
+                path: `/post/${id}/${slug}#lets-talk`
+                }, */
+            // TODO implement
+            /* {
+                name: this.$t('common.versus'),
+                path: `/post/${id}/${slug}#versus`
+                } */
+          ],
+        },
+      ]
+    },
     menuModalsData() {
       return postMenuModalsData(
         // "this.post" may not always be defined at the beginning …
@@ -171,16 +239,21 @@ export default {
     heroImageStyle() {
       /*  Return false when image property is not present or is not a number
           so no unnecessary css variables are set.
-      */
+        */
 
       if (!this.post.image || typeof this.post.image.aspectRatio !== 'number') return false
       /*  Return the aspect ratio as a css variable. Later to be used when calculating
           the height with respect to the width.
-      */
+        */
       return {
         '--hero-image-aspect-ratio': 1.0 / this.post.image.aspectRatio,
       }
     },
+    canCommentPost() {
+      return (
+        !this.post.group || (this.group && ['usual', 'admin', 'owner'].includes(this.group.myRole))
+      )
+    },
   },
   methods: {
     reply(message) {
@@ -243,22 +316,43 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
     },
+    Group: {
+      query() {
+        return groupQuery(this.$i18n)
+      },
+      variables() {
+        return {
+          id: this.post && this.post.group ? this.post.group.id : null,
+        }
+      },
+      update({ Group }) {
+        this.group = Group[0]
+      },
+      skip() {
+        return !(this.post && this.post.group)
+      },
+    },
   },
 }
 </script>
 <style lang="scss">
+.post-side-navigation {
+  position: sticky;
+  top: 65px;
+  z-index: 2;
+}
 .post-page {
   > .hero-image {
     position: relative;
     /*  The padding top makes sure the correct height is set (according to the
         hero image aspect ratio) before the hero image loads so
         the autoscroll works correctly when following a comment link. 
-    */
+      */
 
     padding-top: calc(var(--hero-image-aspect-ratio) * (100% + 48px));
     /*  Letting the image fill the container, since the container
         is the one determining height
-    */
+      */
     > .image {
       position: absolute;
       top: 0;
diff --git a/webapp/pages/post/create.spec.js b/webapp/pages/post/create.spec.js
index 951edba03..4f786aaa9 100644
--- a/webapp/pages/post/create.spec.js
+++ b/webapp/pages/post/create.spec.js
@@ -5,13 +5,18 @@ const localVue = global.localVue
 
 describe('create.vue', () => {
   let wrapper
-  let mocks
 
-  beforeEach(() => {
-    mocks = {
-      $t: jest.fn(),
-    }
-  })
+  const mocks = {
+    $t: jest.fn(),
+    $env: {
+      CATEGORIES_ACTIVE: false,
+    },
+    $route: {
+      query: {
+        groupId: null,
+      },
+    },
+  }
 
   describe('mount', () => {
     const Wrapper = () => {
diff --git a/webapp/pages/post/create.vue b/webapp/pages/post/create.vue
index 2ee5634cd..3dbf3ae8a 100644
--- a/webapp/pages/post/create.vue
+++ b/webapp/pages/post/create.vue
@@ -1,18 +1,60 @@
 <template>
-  <ds-flex :width="{ base: '100%' }" gutter="base">
-    <ds-flex-item :width="{ base: '100%', md: 5 }">
-      <hc-contribution-form />
-    </ds-flex-item>
-    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
-  </ds-flex>
+  <div>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('post.createNewPost.title') }}</ds-heading>
+      <ds-heading v-if="group" tag="h2">
+        {{ $t('post.createNewPost.forGroup.title', { name: group.name }) }}
+      </ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
+    <ds-flex :width="{ base: '100%' }" gutter="base">
+      <ds-flex-item :width="{ base: '100%', md: 5 }">
+        <contribution-form :groupId="groupId" />
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+    </ds-flex>
+  </div>
 </template>
 
 <script>
-import HcContributionForm from '~/components/ContributionForm/ContributionForm'
+import { groupQuery } from '~/graphql/groups'
+import ContributionForm from '~/components/ContributionForm/ContributionForm'
 
 export default {
   components: {
-    HcContributionForm,
+    ContributionForm,
+  },
+  data() {
+    const { groupId = null } = this.$route.query
+    return {
+      groupId,
+    }
+  },
+  computed: {
+    group() {
+      return this.Group && this.Group[0] ? this.Group[0] : null
+    },
+  },
+  apollo: {
+    Group: {
+      query() {
+        return groupQuery(this.$i18n)
+      },
+      variables() {
+        return {
+          id: this.groupId,
+          // followedByCount: this.followedByCount,
+          // followingCount: this.followingCount,
+        }
+      },
+      skip() {
+        return !this.groupId
+      },
+      error(error) {
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>
diff --git a/webapp/pages/post/edit/_id.spec.js b/webapp/pages/post/edit/_id.spec.js
index ea8ec61d8..aa25eb8e8 100644
--- a/webapp/pages/post/edit/_id.spec.js
+++ b/webapp/pages/post/edit/_id.spec.js
@@ -34,6 +34,9 @@ describe('post/_id.vue', () => {
             }),
           },
         },
+        $env: {
+          CATEGORIES_ACTIVE: false,
+        },
       }
       store = new Vuex.Store({
         getters: {
diff --git a/webapp/pages/post/edit/_id.vue b/webapp/pages/post/edit/_id.vue
index d269a04d8..391c97375 100644
--- a/webapp/pages/post/edit/_id.vue
+++ b/webapp/pages/post/edit/_id.vue
@@ -1,20 +1,29 @@
 <template>
-  <ds-flex :width="{ base: '100%' }" gutter="base">
-    <ds-flex-item :width="{ base: '100%', md: 3 }">
-      <hc-contribution-form :contribution="contribution" />
-    </ds-flex-item>
-    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
-  </ds-flex>
+  <div>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('post.editPost.title') }}</ds-heading>
+      <ds-heading v-if="contribution && contribution.group" tag="h2">
+        {{ $t('post.editPost.forGroup.title', { name: contribution.group.name }) }}
+      </ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
+    <ds-flex :width="{ base: '100%' }" gutter="base">
+      <ds-flex-item :width="{ base: '100%', md: 3 }">
+        <contribution-form :contribution="contribution" />
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+    </ds-flex>
+  </div>
 </template>
 
 <script>
-import HcContributionForm from '~/components/ContributionForm/ContributionForm'
+import ContributionForm from '~/components/ContributionForm/ContributionForm'
 import PostQuery from '~/graphql/PostQuery'
 import { mapGetters } from 'vuex'
 
 export default {
   components: {
-    HcContributionForm,
+    ContributionForm,
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/pages/profile/_id.vue b/webapp/pages/profile/_id.vue
index b9bbef83e..7a771425d 100644
--- a/webapp/pages/profile/_id.vue
+++ b/webapp/pages/profile/_id.vue
@@ -8,7 +8,7 @@ import PersistentLinks from '~/mixins/persistentLinks.js'
 
 const options = {
   queryId: gql`
-    query($idOrSlug: ID) {
+    query ($idOrSlug: ID) {
       User(id: $idOrSlug) {
         id
         slug
@@ -16,7 +16,7 @@ const options = {
     }
   `,
   querySlug: gql`
-    query($idOrSlug: String) {
+    query ($idOrSlug: String) {
       User(slug: $idOrSlug) {
         id
         slug
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 4fef7d3aa..e97b4cc9e 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -7,10 +7,10 @@
           :class="{ 'disabled-content': user.disabled }"
           style="position: relative; height: auto; overflow: visible"
         >
-          <hc-upload v-if="myProfile" :user="user">
-            <user-avatar :user="user" class="profile-avatar" size="large"></user-avatar>
-          </hc-upload>
-          <user-avatar v-else :user="user" class="profile-avatar" size="large" />
+          <avatar-uploader v-if="myProfile" :profile="user" :updateMutation="updateUserMutation">
+            <profile-avatar :profile="user" class="profile-page-avatar" size="large" />
+          </avatar-uploader>
+          <profile-avatar v-else :profile="user" class="profile-page-avatar" size="large" />
           <!-- Menu -->
           <client-only>
             <content-menu
@@ -31,7 +31,8 @@
               {{ userName }}
             </ds-heading>
             <ds-text align="center" color="soft">
-              {{ userSlug }}
+              <!-- <base-icon name="at" data-test="at" /> -->
+              {{ `@${userSlug}` }}
             </ds-text>
             <ds-text v-if="user.location" align="center" color="soft" size="small">
               <base-icon name="map-marker" />
@@ -120,7 +121,6 @@
                   v-tooltip="{
                     content: $t('contribution.newPost'),
                     placement: 'left',
-                    delay: { show: 500 },
                   }"
                   :path="{ name: 'post-create' }"
                   class="profile-post-add-button"
@@ -172,19 +172,20 @@
 import uniqBy from 'lodash/uniqBy'
 import postListActions from '~/mixins/postListActions'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
-import HcFollowButton from '~/components/FollowButton.vue'
+import HcFollowButton from '~/components/Button/FollowButton'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
-import FollowList from '~/components/features/FollowList/FollowList'
+import FollowList, { followListVisibleCount } from '~/components/features/ProfileList/FollowList'
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import HcUpload from '~/components/Upload'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import AvatarUploader from '~/components/Uploader/AvatarUploader'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 import { profilePagePosts } from '~/graphql/PostQuery'
 import UserQuery from '~/graphql/User'
+import { updateUserMutation } from '~/graphql/User.js'
 import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
 import { blockUser, unblockUser } from '~/graphql/settings/BlockedUsers'
 import UpdateQuery from '~/components/utils/UpdateQuery'
@@ -206,9 +207,9 @@ export default {
     HcCountTo,
     HcBadges,
     HcEmpty,
-    UserAvatar,
+    ProfileAvatar,
     ContentMenu,
-    HcUpload,
+    AvatarUploader,
     MasonryGrid,
     MasonryGridItem,
     FollowList,
@@ -219,6 +220,11 @@ export default {
     name: 'slide-up',
     mode: 'out-in',
   },
+  head() {
+    return {
+      title: this.userName,
+    }
+  },
   data() {
     const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
     return {
@@ -230,8 +236,9 @@ export default {
       tabActive: 'post',
       filter,
       followedByCountStartValue: 0,
-      followedByCount: 7,
-      followingCount: 7,
+      followedByCount: followListVisibleCount,
+      followingCount: followListVisibleCount,
+      updateUserMutation,
     }
   },
   computed: {
@@ -247,7 +254,7 @@ export default {
     },
     userSlug() {
       const { slug } = this.user || {}
-      return slug && `@${slug}`
+      return slug
     },
     tabOptions() {
       return [
@@ -417,7 +424,7 @@ export default {
 </script>
 
 <style lang="scss">
-.profile-avatar.user-avatar {
+.profile-page-avatar.profile-avatar {
   margin: auto;
   margin-top: -60px;
 }
diff --git a/webapp/pages/registration.spec.js b/webapp/pages/registration.spec.js
index e6369a68d..3e17619a8 100644
--- a/webapp/pages/registration.spec.js
+++ b/webapp/pages/registration.spec.js
@@ -29,6 +29,10 @@ describe('Registration', () => {
         query: {},
       },
       $env: {},
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn(),
+      },
     }
     asyncData = false
     isLoggedIn = false
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 360f1e969..1fce64d8f 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
diff --git a/webapp/pages/settings/blocked-users.vue b/webapp/pages/settings/blocked-users.vue
index cef9218f4..90519452f 100644
--- a/webapp/pages/settings/blocked-users.vue
+++ b/webapp/pages/settings/blocked-users.vue
@@ -28,7 +28,7 @@
               params: { id: scope.row.id, slug: scope.row.slug },
             }"
           >
-            <user-avatar :user="scope.row" size="small" />
+            <profile-avatar :profile="scope.row" size="small" />
           </nuxt-link>
         </template>
         <template #name="scope">
@@ -74,11 +74,11 @@
 
 <script>
 import { blockedUsers, unblockUser } from '~/graphql/settings/BlockedUsers'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   components: {
-    UserAvatar,
+    ProfileAvatar,
   },
   data() {
     return {
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 5d59f5ecb..b060e1327 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -48,6 +48,7 @@ import { queryLocations } from '~/graphql/location'
 let timeout
 
 export default {
+  name: 'NewsFeed',
   data() {
     return {
       cities: [],
diff --git a/webapp/pages/settings/muted-users.vue b/webapp/pages/settings/muted-users.vue
index f6aefc986..d314d31d4 100644
--- a/webapp/pages/settings/muted-users.vue
+++ b/webapp/pages/settings/muted-users.vue
@@ -25,7 +25,7 @@
               params: { id: scope.row.id, slug: scope.row.slug },
             }"
           >
-            <user-avatar :user="scope.row" size="small" />
+            <profile-avatar :profile="scope.row" size="small" />
           </nuxt-link>
         </template>
         <template #name="scope">
@@ -71,11 +71,11 @@
 
 <script>
 import { mutedUsers, unmuteUser } from '~/graphql/settings/MutedUsers'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   components: {
-    UserAvatar,
+    ProfileAvatar,
   },
   data() {
     return {
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index a985371d6..d392032bb 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -112,7 +112,7 @@ export default {
       let mutation, variables, successMessage
       if (isCreation) {
         mutation = gql`
-          mutation($url: String!) {
+          mutation ($url: String!) {
             CreateSocialMedia(url: $url) {
               id
               url
@@ -123,7 +123,7 @@ export default {
         successMessage = thisList.$t('settings.social-media.successAdd')
       } else {
         mutation = gql`
-          mutation($id: ID!, $url: String!) {
+          mutation ($id: ID!, $url: String!) {
             UpdateSocialMedia(id: $id, url: $url) {
               id
               url
@@ -160,7 +160,7 @@ export default {
       try {
         await thisList.$apollo.mutate({
           mutation: gql`
-            mutation($id: ID!) {
+            mutation ($id: ID!) {
               DeleteSocialMedia(id: $id) {
                 id
                 url
diff --git a/webapp/pages/terms-and-conditions-confirm.vue b/webapp/pages/terms-and-conditions-confirm.vue
index 30b4db6ef..5eef8ce66 100644
--- a/webapp/pages/terms-and-conditions-confirm.vue
+++ b/webapp/pages/terms-and-conditions-confirm.vue
@@ -25,6 +25,7 @@ import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import { updateUserMutation } from '~/graphql/User.js'
 
 export default {
+  name: 'TermsAndConditionsConfirm',
   layout: 'default',
   head() {
     return {
diff --git a/webapp/plugins/v-tooltip.js b/webapp/plugins/v-tooltip.js
index 77d0ac1b8..0c0cbc8d6 100644
--- a/webapp/plugins/v-tooltip.js
+++ b/webapp/plugins/v-tooltip.js
@@ -3,7 +3,7 @@ import VTooltip from 'v-tooltip'
 
 Vue.use(VTooltip, {
   defaultDelay: {
-    show: 500,
+    show: 750,
     hide: 50,
   },
   defaultOffset: 2,
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index ef71a2a53..b5ba692fa 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -5538,11 +5538,6 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
-amdefine@>=0.0.4:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
-  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
-
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -6223,11 +6218,6 @@ array-filter@~0.0.0:
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
   integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
 
-array-find-index@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
-  integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
-
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -6392,11 +6382,6 @@ async-each@^1.0.1:
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
-async-foreach@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
-  integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
-
 async-limiter@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
@@ -7016,13 +7001,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
   integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==
 
-block-stream@*:
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
-  integrity sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=
-  dependencies:
-    inherits "~2.0.0"
-
 bluebird@^3.1.1, bluebird@^3.5.1:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.4.tgz#d6cc661595de30d5b3af5fcedd3c0b3ef6ec5714"
@@ -7450,19 +7428,6 @@ camelcase-css@2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-camelcase-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
-  integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc=
-  dependencies:
-    camelcase "^2.0.0"
-    map-obj "^1.0.0"
-
-camelcase@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
-  integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
-
 camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
@@ -7567,7 +7532,7 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
+chalk@^1.0.0, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
@@ -8289,18 +8254,18 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
-cookie-universal-nuxt@~2.1.5:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.1.5.tgz#669f2ff95b1bc1962c86edd69c954f60729e71e5"
-  integrity sha512-P0WCTKIyemWNtHi9lxrS5cxZmieOIEjt28B7Alu6cdSB9RqtUtpkqYyV9PRK6oJrT5eIPDYjHsJQlh6SUrFJOg==
+cookie-universal-nuxt@~2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.2.2.tgz#107815f03f5b769de7018670d6370368205387bb"
+  integrity sha512-Pr6P5UCzl1EAvPh7z7jFkknBw0KTdykm6gFmPHrH4LV9s3flVmAH0ZP/ZqUXcp6b0SKZfizkn+XR1cO+QinGhQ==
   dependencies:
     "@types/cookie" "^0.3.3"
-    cookie-universal "^2.1.5"
+    cookie-universal "^2.2.2"
 
-cookie-universal@^2.1.5:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.1.5.tgz#9a6cefbfb61c750a1b8ee2610bf71566bd719544"
-  integrity sha512-nqOOmEkovCQxNYGIyzhcwsmh4c7xnxe7RWdiYFOoml9MP4L32IlU3LdPC7r7nQEnnM+9Uxlk/UhtvBl5is6M/w==
+cookie-universal@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.2.2.tgz#415a4d67b6f7f0819c4914cd69b8c2f496111d30"
+  integrity sha512-nUXF6HH2YKbn8vGcdSzWJhjRkDHbnbekuVu2nsRu00zYsX7o/H3xGJRlPVoM4wX/8cpJYpyi9nDt+boER0Wjug==
   dependencies:
     "@types/cookie" "^0.3.3"
     cookie "^0.4.0"
@@ -8544,10 +8509,10 @@ cropperjs@^1.5.5:
   resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.6.tgz#82faf432bec709d828f2f7a96d1179198edaf0e2"
   integrity sha512-eAgWf4j7sNJIG329qUHIFi17PSV0VtuWyAu9glZSgu/KlQSrfTQOC2zAz+jHGa5fAB+bJldEnQwvJEaJ8zRf5A==
 
-cross-env@~7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
-  integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==
+cross-env@~7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
   dependencies:
     cross-spawn "^7.0.1"
 
@@ -8559,7 +8524,7 @@ cross-fetch@^3.0.4:
     node-fetch "2.6.0"
     whatwg-fetch "3.0.0"
 
-cross-spawn@7.0.3:
+cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -8568,14 +8533,6 @@ cross-spawn@7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-cross-spawn@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
-  integrity sha1-ElYDfsufDF9549bvE14wdwGEuYI=
-  dependencies:
-    lru-cache "^4.0.1"
-    which "^1.2.9"
-
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -8596,15 +8553,6 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
-  integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==
-  dependencies:
-    path-key "^3.1.0"
-    shebang-command "^2.0.0"
-    which "^2.0.1"
-
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -8915,13 +8863,6 @@ cuint@^0.2.2:
   resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
   integrity sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=
 
-currently-unhandled@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
-  integrity sha1-mI3zP+qxke95mmE2nddsF635V+o=
-  dependencies:
-    array-find-index "^1.0.1"
-
 cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
@@ -9000,7 +8941,7 @@ debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize@^1.1.1, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -10805,16 +10746,6 @@ fsevents@~2.3.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
-fstream@^1.0.0, fstream@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
-  integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    inherits "~2.0.0"
-    mkdirp ">=0.5 0"
-    rimraf "2"
-
 function-bind@^1.0.2, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -10859,7 +10790,7 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-gaze@1.1.3, gaze@^1.0.0:
+gaze@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.3.tgz#c441733e13b927ac8c0ff0b4c3b033f28812924a"
   integrity sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==
@@ -10911,11 +10842,6 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-get-stdin@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
-  integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
-
 get-stdin@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
@@ -11046,7 +10972,7 @@ glob@7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.1:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -11995,18 +11921,6 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
-in-publish@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
-  integrity sha1-4g/146KvwmkDILbcVSaCqcf631E=
-
-indent-string@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
-  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
-  dependencies:
-    repeating "^2.0.0"
-
 indent-string@^3.0.0, indent-string@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
@@ -12035,7 +11949,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -12359,13 +12273,6 @@ is-extglob@^2.1.0, is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
-is-finite@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  integrity sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=
-  dependencies:
-    number-is-nan "^1.0.0"
-
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
@@ -13215,11 +13122,6 @@ jimp-compact@^0.8.0:
   resolved "https://registry.yarnpkg.com/jimp-compact/-/jimp-compact-0.8.4.tgz#0878a0c30f22d2d4f8b33e96722eb09d20770627"
   integrity sha512-9mvZ7/TJ28bWtdx0RxmfiOTzSom4zuRniFTLtJHfNL6HxQdnRtjmX8XIRjmofgVXj2TW/GgSuZKB3dSZ5hNhKg==
 
-js-base64@^2.1.8:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
-  integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
-
 js-beautify@^1.6.12:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.2.tgz#88c9099cd6559402b124cfab18754936f8a7b178"
@@ -13754,7 +13656,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -13913,7 +13815,7 @@ lodash.xorby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.xorby/-/lodash.xorby-4.7.0.tgz#9c19a6f9f063a6eb53dd03c1b6871799801463d7"
   integrity sha1-nBmm+fBjputT3QPBtocXmYAUY9c=
 
-lodash@4.x, lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
+lodash@4.x, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -13958,14 +13860,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-loud-rejection@^1.0.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
-  integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=
-  dependencies:
-    currently-unhandled "^0.4.1"
-    signal-exit "^3.0.0"
-
 lower-case-first@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/lower-case-first/-/lower-case-first-1.0.2.tgz#e5da7c26f29a7073be02d52bac9980e5922adfa1"
@@ -14102,11 +13996,6 @@ map-cache@^0.2.2:
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
   integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
 
-map-obj@^1.0.0, map-obj@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
-  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
-
 map-or-similar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
@@ -14229,22 +14118,6 @@ mensch@0.3.4:
   resolved "https://registry.yarnpkg.com/mensch/-/mensch-0.3.4.tgz#770f91b46cb16ea5b204ee735768c3f0c491fecd"
   integrity sha512-IAeFvcOnV9V0Yk+bFhYR07O3yNina9ANIN5MoXBKYJ/RLYPurd2d0yw14MDhpr9/momp0WofT1bPUh3hkzdi/g==
 
-meow@^3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
-  integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
-  dependencies:
-    camelcase-keys "^2.0.0"
-    decamelize "^1.1.2"
-    loud-rejection "^1.0.0"
-    map-obj "^1.0.1"
-    minimist "^1.1.3"
-    normalize-package-data "^2.3.4"
-    object-assign "^4.0.1"
-    read-pkg-up "^1.0.1"
-    redent "^1.0.0"
-    trim-newlines "^1.0.0"
-
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -14420,7 +14293,7 @@ minimist@^0.1.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
   integrity sha1-md9lelJXTCHJBXSX33QnkLK0wN4=
 
-minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+minimist@^1.1.1, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
@@ -14512,7 +14385,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
+mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.4.tgz#fd01504a6797ec5c9be81ff43d204961ed64a512"
   integrity sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==
@@ -14566,7 +14439,7 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-nan@^2.12.1, nan@^2.13.2:
+nan@^2.12.1:
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.13.2.tgz#f51dc7ae66ba7d5d55e1e6d4d8092e802c9aefe7"
   integrity sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==
@@ -14685,24 +14558,6 @@ node-fetch@^2.1.2, node-fetch@^2.2.0, node-fetch@^2.6.0, node-fetch@^2.6.1:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
-node-gyp@^3.8.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
-  integrity sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==
-  dependencies:
-    fstream "^1.0.0"
-    glob "^7.0.3"
-    graceful-fs "^4.1.2"
-    mkdirp "^0.5.0"
-    nopt "2 || 3"
-    npmlog "0 || 1 || 2 || 3 || 4"
-    osenv "0"
-    request "^2.87.0"
-    rimraf "2"
-    semver "~5.3.0"
-    tar "^2.0.0"
-    which "1"
-
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -14816,29 +14671,6 @@ node-res@^5.0.1:
     on-finished "^2.3.0"
     vary "^1.1.2"
 
-node-sass@^4.12.0:
-  version "4.13.1"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.1.tgz#9db5689696bb2eec2c32b98bfea4c7a2e992d0a3"
-  integrity sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==
-  dependencies:
-    async-foreach "^0.1.3"
-    chalk "^1.1.1"
-    cross-spawn "^3.0.0"
-    gaze "^1.0.0"
-    get-stdin "^4.0.1"
-    glob "^7.0.3"
-    in-publish "^2.0.0"
-    lodash "^4.17.15"
-    meow "^3.7.0"
-    mkdirp "^0.5.1"
-    nan "^2.13.2"
-    node-gyp "^3.8.0"
-    npmlog "^4.0.0"
-    request "^2.88.0"
-    sass-graph "^2.2.4"
-    stdout-stream "^1.4.0"
-    "true-case-path" "^1.0.2"
-
 nodemon@^1.19.4:
   version "1.19.4"
   resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.19.4.tgz#56db5c607408e0fdf8920d2b444819af1aae0971"
@@ -14855,13 +14687,6 @@ nodemon@^1.19.4:
     undefsafe "^2.0.2"
     update-notifier "^2.5.0"
 
-"nopt@2 || 3":
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
-  dependencies:
-    abbrev "1"
-
 nopt@^4.0.1, nopt@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -14877,7 +14702,7 @@ nopt@~1.0.10:
   dependencies:
     abbrev "1"
 
-normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
+normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@@ -14953,7 +14778,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2, npmlog@^4.1.2:
+npmlog@^4.0.2, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -15273,7 +15098,7 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@0, osenv@^0.1.4:
+osenv@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
   integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
@@ -16597,6 +16422,11 @@ prettier@~2.2.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
   integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
+prettier@~2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
+
 pretty-bytes@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
@@ -17627,14 +17457,6 @@ recursive-readdir@2.2.2:
   dependencies:
     minimatch "3.0.4"
 
-redent@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
-  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
-  dependencies:
-    indent-string "^2.1.0"
-    strip-indent "^1.0.1"
-
 redeyed@~2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-2.1.1.tgz#8984b5815d99cb220469c99eeeffe38913e6cc0b"
@@ -17887,13 +17709,6 @@ repeat-string@^1.5.4, repeat-string@^1.6.1:
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
-repeating@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
-  integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
-  dependencies:
-    is-finite "^1.0.0"
-
 request-promise-core@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
@@ -17910,7 +17725,7 @@ request-promise-native@^1.0.5, request-promise-native@^1.0.8:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-"request@>=2.76.0 <3.0.0", request@^2.87.0, request@^2.88.0, request@^2.88.2:
+"request@>=2.76.0 <3.0.0", request@^2.87.0, request@^2.88.2:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -18062,7 +17877,7 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
-rimraf@2, rimraf@2.6.3, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@~2.6.2:
+rimraf@2.6.3, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@~2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
   integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
@@ -18183,27 +17998,6 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass-graph@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
-  integrity sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=
-  dependencies:
-    glob "^7.0.0"
-    lodash "^4.0.0"
-    scss-tokenizer "^0.2.3"
-    yargs "^7.0.0"
-
-sass-loader@^7.1.0:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.3.1.tgz#a5bf68a04bcea1c13ff842d747150f7ab7d0d23f"
-  integrity sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==
-  dependencies:
-    clone-deep "^4.0.1"
-    loader-utils "^1.0.1"
-    neo-async "^2.5.0"
-    pify "^4.0.1"
-    semver "^6.3.0"
-
 sass-loader@~10.1.1:
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.1.1.tgz#4ddd5a3d7638e7949065dd6e9c7c04037f7e663d"
@@ -18296,14 +18090,6 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-scss-tokenizer@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
-  integrity sha1-jrBtualyMzOCTT9VMGQRSYR85dE=
-  dependencies:
-    js-base64 "^2.1.8"
-    source-map "^0.4.2"
-
 select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
@@ -18345,11 +18131,6 @@ semver@^7.3.4:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@~5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
-  integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8=
-
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -18739,13 +18520,6 @@ source-map@0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
   integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
 
-source-map@^0.4.2:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
-  dependencies:
-    amdefine ">=0.0.4"
-
 source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -18905,13 +18679,6 @@ std-env@^2.2.1:
   dependencies:
     ci-info "^1.6.0"
 
-stdout-stream@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.1.tgz#5ac174cdd5cd726104aa0c0b2bd83815d8d535de"
-  integrity sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==
-  dependencies:
-    readable-stream "^2.0.1"
-
 stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
@@ -19212,13 +18979,6 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-strip-indent@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
-  integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=
-  dependencies:
-    get-stdin "^4.0.1"
-
 strip-json-comments@^2.0.0, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -19420,15 +19180,6 @@ tapable@^1.0.0, tapable@^1.0.0-beta.5, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tar@^2.0.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"
-  integrity sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==
-  dependencies:
-    block-stream "*"
-    fstream "^1.0.12"
-    inherits "2"
-
 tar@^4:
   version "4.4.8"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.8.tgz#b19eec3fde2a96e64666df9fdb40c5ca1bc3747d"
@@ -19888,11 +19639,6 @@ treeify@^1.1.0:
   resolved "https://registry.yarnpkg.com/treeify/-/treeify-1.1.0.tgz#4e31c6a463accd0943879f30667c4fdaff411bb8"
   integrity sha512-1m4RA7xVAJrSGrrXGs0L3YTwyvBs2S8PbRHaLZAkFw7JR8oIFwYtysxlBZhYIa7xSyiYJKZ3iGrrk55cGA3i9A==
 
-trim-newlines@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
-  integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
-
 trim-trailing-lines@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
@@ -19908,13 +19654,6 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-"true-case-path@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"
-  integrity sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==
-  dependencies:
-    glob "^7.1.2"
-
 trunc-html@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/trunc-html/-/trunc-html-1.1.2.tgz#1e97d51f67d470b67662b1a670e6d0ea7a8edafe"
@@ -20878,14 +20617,12 @@ vue-svg-loader@~0.16.0:
     loader-utils "^1.2.3"
     svg-to-vue "^0.7.0"
 
-vue-sweetalert-icons@~4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/vue-sweetalert-icons/-/vue-sweetalert-icons-4.3.0.tgz#0808632cb6bfa67bf07afab1ae683352c038af7d"
-  integrity sha512-8SgzgyqppIj/gQt6Y5JLXPnqt1pEq50w6TeQ1B3aVd1mWm3gHTeWHWujiycjouo8too1fgtWkn3mi16vumKSJw==
+vue-sweetalert-icons@~4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/vue-sweetalert-icons/-/vue-sweetalert-icons-4.3.1.tgz#dad763abb5084b015ba3e209dd28dcf1371b030c"
+  integrity sha512-FqKcMB8Ebgb32UyzvhIBzj23U0NRP91cTXovDYfYwNHpJ1TAFBEHoemgyu01h2Wp+UJhytvQ+13GL+GAs8QkWw==
   dependencies:
     color "^3.1.2"
-    node-sass "^4.12.0"
-    sass-loader "^7.1.0"
     validate-color "^2.1.0"
 
 vue-template-compiler@^2.6.11:
@@ -21228,7 +20965,7 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@1, which@^1.2.9, which@^1.3.1:
+which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -21515,13 +21252,6 @@ yargs-parser@^4.2.0:
   dependencies:
     camelcase "^3.0.0"
 
-yargs-parser@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
-  integrity sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=
-  dependencies:
-    camelcase "^3.0.0"
-
 yargs@6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
@@ -21558,25 +21288,6 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yargs@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
-  integrity sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=
-  dependencies:
-    camelcase "^3.0.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^1.0.2"
-    which-module "^1.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^5.0.0"
-
 yargs@~1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-1.2.6.tgz#9c7b4a82fd5d595b2bf17ab6dcc43135432fe34b"
diff --git a/yarn.lock b/yarn.lock
index 4e2303801..6103f10a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4481,10 +4481,10 @@ neo4j-driver@^4.2.2, neo4j-driver@^4.3.4:
     neo4j-driver-core "^4.3.4"
     rxjs "^6.6.3"
 
-neode@^0.4.7:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.7.tgz#033007b57a2ee167e9ee5537493086db08d005eb"
-  integrity sha512-YXlc187JRpeKCBcUIkY6nimXXG+Tvlopfe71/FPno2THrwmYt5mm0RPHZ+mXF2O1Xg6zvjKvOpCpDz2vHBfroQ==
+neode@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.8.tgz#0889b4fc7f1bf0b470b01fa5b8870373b5d47ad6"
+  integrity sha512-pb91NfCOg4Fj5o+98H+S2XYC+ByQfbdhwcc1UVuzuUQ0Ezzj+jWz8NmKWU8ZfCH6l4plk71yDAPd2eTwpt+Xvg==
   dependencies:
     "@hapi/joi" "^15.1.1"
     dotenv "^4.0.0"
@@ -5426,10 +5426,10 @@ slice-ansi@0.0.4:
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
   integrity sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=
 
-slug@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/slug/-/slug-5.1.0.tgz#8a7e30ca1c3a6dc40cf74e269750913a865edb0b"
-  integrity sha512-IS39jKR6m+puU8zWgH6ruwx1sfzFNJ6Ai5PKIlUqd0X8C3ca7PB49Cvm0uayqgEt1jgaojO2wWEsQJngnh7fDA==
+slug@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/slug/-/slug-6.0.0.tgz#39637b32e5a873bc692812a630842880499ed6c9"
+  integrity sha512-0MpNLyCSUSf0G1nAZmp9gY1cvesPP35a1Live25vZ23gWQ5SAopF0N+0hk9KI4ytNuTebJrHGNrgTnxboofcSg==
 
 snapdragon-node@^2.0.1:
   version "2.1.1"