diff --git a/src/components/specific/groups/group-card/GroupCard.scss b/src/components/specific/groups/group-card/GroupCard.scss
new file mode 100644
index 000000000..1c4bce618
--- /dev/null
+++ b/src/components/specific/groups/group-card/GroupCard.scss
@@ -0,0 +1,54 @@
+@import "./GroupCard.vars.scss";
+
+.group-card {
+  min-width: $card-width;
+  width: $card-width;
+  height: $card-height;
+
+  .bimdata-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition-duration: 0.35s;
+
+    .group-card__top-stripe {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      width: $card-width;
+      height: 3px;
+    }
+
+    .group-card__btn-menu {
+      position: absolute;
+      top: $spacing-unit/2;
+      right: $spacing-unit/2;
+    }
+
+    .group-card__title {
+      margin-bottom: $spacing-unit;
+    }
+
+    &:deep() {
+      .bimdata-card__content {
+        overflow: hidden;
+        height: $card-content-height;
+        padding: 0;
+        color: $color-primary;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: $spacing-unit;
+
+        font-size: 1.2rem;
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
+    }
+  }
+}
diff --git a/src/components/specific/groups/group-card/GroupCard.vars.scss b/src/components/specific/groups/group-card/GroupCard.vars.scss
new file mode 100644
index 000000000..bc2a1fc2b
--- /dev/null
+++ b/src/components/specific/groups/group-card/GroupCard.vars.scss
@@ -0,0 +1,4 @@
+$card-width: 320px;
+$card-height: 261px;
+$card-content-height: $card-height;
+$card-background: $color-tertiary-lightest;
diff --git a/src/components/specific/groups/group-card/GroupCard.vue b/src/components/specific/groups/group-card/GroupCard.vue
new file mode 100644
index 000000000..000396818
--- /dev/null
+++ b/src/components/specific/groups/group-card/GroupCard.vue
@@ -0,0 +1,91 @@
+<template>
+  <FlippableCard
+    data-test="group-card"
+    class="group-card"
+    :flipped="showMenu"
+    v-click-away="closeMenu"
+  >
+    <template #front-face>
+      <BIMDataCard>
+        <template #content>
+          <div
+            class="group-card__top-stripe"
+            :style="{ backgroundColor: group.color }"
+          ></div>
+          <BIMDataButton
+            v-if="actionMenu"
+            class="group-card__btn-menu"
+            ghost
+            rounded
+            icon
+            @click="openMenu"
+          >
+            <BIMDataIcon name="ellipsis" size="l" fill color="tertiary-dark" />
+          </BIMDataButton>
+          <BIMDataIcon name="group" size="xxl" />
+          <TextBox
+            class="group-card__title"
+            :text="group.name"
+            :maxLength="32"
+          />
+          <UserAvatarList
+            class="group-card__avatars"
+            :users="group.members"
+            itemSize="72"
+            itemGap="44"
+          />
+        </template>
+      </BIMDataCard>
+    </template>
+    <template #back-face>
+      <GroupCardActionMenu :group="group" @close="closeMenu" />
+    </template>
+  </FlippableCard>
+</template>
+
+<script>
+import { useToggle } from "@/composables/toggle";
+// Components
+import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataCard.js";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+import FlippableCard from "@/components/generic/flippable-card/FlippableCard";
+import TextBox from "@/components/generic/text-box/TextBox";
+import UserAvatarList from "@/components/specific/users/user-avatar-list/UserAvatarList";
+import GroupCardActionMenu from "./group-card-action-menu/GroupCardActionMenu";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataCard,
+    BIMDataIcon,
+    FlippableCard,
+    TextBox,
+    UserAvatarList,
+    GroupCardActionMenu
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    },
+    actionMenu: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup() {
+    const { isOpen: showMenu, open: openMenu, close: closeMenu } = useToggle();
+
+    return {
+      // References
+      showMenu,
+      // Methods
+      closeMenu,
+      openMenu
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./GroupCard.scss"></style>
diff --git a/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.scss b/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.scss
new file mode 100644
index 000000000..b6582896e
--- /dev/null
+++ b/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.scss
@@ -0,0 +1,33 @@
+.group-card-action-menu {
+  height: 100%;
+  background-color: $color-white;
+
+  &__loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    transform: scale(2);
+  }
+
+  &__menu {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    padding: $spacing-unit * 2;
+
+    &__title {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      padding: $spacing-unit $spacing-unit * 2;
+      font-weight: bold;
+    }
+  }
+}
diff --git a/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.vue b/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.vue
new file mode 100644
index 000000000..cf3debefb
--- /dev/null
+++ b/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="group-card-action-menu" v-click-away="resetMenu">
+    <transition name="fade" mode="out-in">
+      <template v-if="loading">
+        <div class="group-card-action-menu__loader">
+          <BIMDataSpinner />
+        </div>
+      </template>
+
+      <template v-else-if="showUpdateForm">
+        <GroupCardUpdateForm
+          :group="group"
+          @close="closeUpdateForm"
+          @success="closeMenu"
+        />
+      </template>
+
+      <template v-else-if="showColorPicker">
+        <GroupCardColorPicker
+          :group="group"
+          @close="closeColorPicker"
+          @success="closeMenu"
+        />
+      </template>
+
+      <template v-else-if="showDeleteGuard">
+        <GroupCardDeleteGuard :group="group" @close="closeDeleteGuard" />
+      </template>
+
+      <template v-else>
+        <div class="group-card-action-menu__menu">
+          <div class="group-card-action-menu__menu__title">
+            <TextBox :text="group.name" :maxLength="32" />
+            <BIMDataButton
+              data-test="btn-close-menu"
+              ghost
+              rounded
+              icon
+              @click="closeMenu"
+            >
+              <BIMDataIcon name="close" size="xxs" />
+            </BIMDataButton>
+          </div>
+          <BIMDataButton
+            data-test="btn-open-update"
+            ghost
+            squared
+            @click="openUpdateForm"
+          >
+            {{ $t("GroupCardActionMenu.renameButtonText") }}
+          </BIMDataButton>
+          <BIMDataButton
+            data-test="btn-open-color"
+            ghost
+            squared
+            @click="openColorPicker"
+          >
+            {{ $t("GroupCardActionMenu.changeColorButtonText") }}
+          </BIMDataButton>
+          <BIMDataButton
+            data-test="btn-open-delete"
+            ghost
+            squared
+            @click="openDeleteGuard"
+          >
+            {{ $t("GroupCardActionMenu.deleteButtonText") }}
+          </BIMDataButton>
+        </div>
+      </template>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { provide, ref } from "vue";
+// Components
+import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
+import TextBox from "@/components/generic/text-box/TextBox";
+import GroupCardColorPicker from "../group-card-color-picker/GroupCardColorPicker";
+import GroupCardDeleteGuard from "../group-card-delete-guard/GroupCardDeleteGuard";
+import GroupCardUpdateForm from "../group-card-update-form/GroupCardUpdateForm";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon,
+    BIMDataSpinner,
+    TextBox,
+    GroupCardColorPicker,
+    GroupCardDeleteGuard,
+    GroupCardUpdateForm
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["close"],
+  setup(props, { emit }) {
+    const loading = ref(false);
+    provide("loading", loading);
+
+    const showUpdateForm = ref(false);
+    const openUpdateForm = () => {
+      showUpdateForm.value = true;
+    };
+    const closeUpdateForm = () => {
+      showUpdateForm.value = false;
+    };
+
+    const showColorPicker = ref(false);
+    const openColorPicker = () => {
+      showColorPicker.value = true;
+    };
+    const closeColorPicker = () => {
+      showColorPicker.value = false;
+    };
+
+    const showDeleteGuard = ref(false);
+    const openDeleteGuard = () => {
+      showDeleteGuard.value = true;
+    };
+    const closeDeleteGuard = () => {
+      showDeleteGuard.value = false;
+    };
+
+    const resetMenu = () => {
+      closeColorPicker();
+      closeDeleteGuard();
+      closeUpdateForm();
+      loading.value = false;
+    };
+
+    const closeMenu = () => {
+      resetMenu();
+      emit("close");
+    };
+
+    return {
+      // References
+      loading,
+      showColorPicker,
+      showDeleteGuard,
+      showUpdateForm,
+      // Methods
+      closeColorPicker,
+      closeDeleteGuard,
+      closeMenu,
+      closeUpdateForm,
+      openColorPicker,
+      openDeleteGuard,
+      openUpdateForm,
+      resetMenu
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./GroupCardActionMenu.scss"></style>
diff --git a/src/components/specific/groups/group-card/group-card-color-picker/GroupCardColorPicker.scss b/src/components/specific/groups/group-card/group-card-color-picker/GroupCardColorPicker.scss
new file mode 100644
index 000000000..1af7899ae
--- /dev/null
+++ b/src/components/specific/groups/group-card/group-card-color-picker/GroupCardColorPicker.scss
@@ -0,0 +1,46 @@
+.group-card-color-picker {
+  display: flex;
+  height: 100%;
+  padding: $spacing-unit $spacing-unit * 2;
+  padding-right: $spacing-unit;
+
+  &__grid {
+    $item-size: 26px;
+
+    flex-grow: 1;
+    display: grid;
+    grid-template-columns: repeat(5, $item-size);
+    justify-content: space-between;
+    row-gap: $spacing-unit;
+
+    &__item {
+      position: relative;
+      width: $item-size;
+      height: $item-size;
+      border-radius: 3px;
+
+      &.selected {
+        &::before {
+          content: "";
+          position: absolute;
+          top: -$spacing-unit/2;
+          left: -$spacing-unit/2;
+          width: 100%;
+          height: 100%;
+          border: $spacing-unit/2 solid rgba(0, 0, 0, 0.1);
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+
+  &__side {
+    width: 32px;
+    margin-left: $spacing-unit/2;
+
+    &__btn-close {
+      position: relative;
+      top: -$spacing-unit/4;
+    }
+  }
+}
diff --git a/src/components/specific/groups/group-card/group-card-color-picker/GroupCardColorPicker.vue b/src/components/specific/groups/group-card/group-card-color-picker/GroupCardColorPicker.vue
new file mode 100644
index 000000000..736c0e45d
--- /dev/null
+++ b/src/components/specific/groups/group-card/group-card-color-picker/GroupCardColorPicker.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="group-card-color-picker">
+    <div class="group-card-color-picker__grid">
+      <div
+        class="group-card-color-picker__grid__item"
+        v-for="color of colors"
+        :key="color"
+        :class="{ selected: groupColor === color }"
+        :style="{ backgroundColor: color }"
+        @click="groupColor = color"
+      ></div>
+    </div>
+    <div class="group-card-color-picker__side">
+      <BIMDataButton
+        data-test="btn-close-delete"
+        class="group-card-color-picker__side__btn-close"
+        ghost
+        rounded
+        icon
+        @click="submit"
+      >
+        <BIMDataIcon name="close" size="xxs" />
+      </BIMDataButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import { inject, ref } from "vue";
+import { useGroups } from "@/state/groups";
+import colors from "./colors";
+// Components
+import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["close", "success", "error"],
+  setup(props, { emit }) {
+    const { updateGroup } = useGroups();
+
+    const loading = inject("loading", false);
+
+    const groupColor = ref(props.group.color);
+
+    const submit = async () => {
+      if (groupColor.value !== props.group.color) {
+        try {
+          loading.value = true;
+          await updateGroup(props.group.project, {
+            ...props.group,
+            color: groupColor.value
+          });
+          emit("success");
+        } catch (error) {
+          emit("error", error);
+        }
+      } else {
+        emit("close");
+      }
+    };
+
+    return {
+      // References
+      colors,
+      groupColor,
+      // Methods
+      submit
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./GroupCardColorPicker.scss"></style>
diff --git a/src/components/specific/groups/group-card/group-card-color-picker/colors.js b/src/components/specific/groups/group-card/group-card-color-picker/colors.js
new file mode 100644
index 000000000..51852fe12
--- /dev/null
+++ b/src/components/specific/groups/group-card/group-card-color-picker/colors.js
@@ -0,0 +1,32 @@
+export default [
+  "#FFE4C4",
+  "#FFA500",
+  "#FF7F50",
+  "#FF4500",
+  "#800000",
+  "#F0E68C",
+  "#D2B48C",
+  "#CD853F",
+  "#A0522D",
+  "#A52A2A",
+  "#ADFF2F",
+  "#9ACD32",
+  "#808000",
+  "#008000",
+  "#006400",
+  "#E0FFFF",
+  "#87CEEB",
+  "#4682B4",
+  "#0000FF",
+  "#00008B",
+  "#DDA0DD",
+  "#FF69B4",
+  "#FF00FF",
+  "#800080",
+  "#4B0082",
+  "#F8F8FF",
+  "#C0C0C0",
+  "#A9A9A9",
+  "#808080",
+  "#000000"
+];
diff --git a/src/components/specific/groups/group-card/group-card-delete-guard/GroupCardDeleteGuard.scss b/src/components/specific/groups/group-card/group-card-delete-guard/GroupCardDeleteGuard.scss
new file mode 100644
index 000000000..89fafda4c
--- /dev/null
+++ b/src/components/specific/groups/group-card/group-card-delete-guard/GroupCardDeleteGuard.scss
@@ -0,0 +1,25 @@
+.group-card-delete-guard {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  padding: $spacing-unit $spacing-unit * 2 $spacing-unit * 2;
+
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    font-weight: bold;
+  }
+
+  &__message {
+    width: 100%;
+    color: $color-tertiary-dark;
+  }
+
+  &__btn-submit {
+    width: 100%;
+  }
+}
diff --git a/src/components/specific/groups/group-card/group-card-delete-guard/GroupCardDeleteGuard.vue b/src/components/specific/groups/group-card/group-card-delete-guard/GroupCardDeleteGuard.vue
new file mode 100644
index 000000000..62e163f7c
--- /dev/null
+++ b/src/components/specific/groups/group-card/group-card-delete-guard/GroupCardDeleteGuard.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="group-card-delete-guard">
+    <div class="group-card-delete-guard__title">
+      {{ $t("GroupCardDeleteGuard.title") }}
+      <BIMDataButton
+        data-test="btn-close-delete"
+        ghost
+        rounded
+        icon
+        @click="close"
+      >
+        <BIMDataIcon name="close" size="xxs" />
+      </BIMDataButton>
+    </div>
+    <div class="group-card-delete-guard__message">
+      {{ $t("GroupCardDeleteGuard.message", { name: group.name }) }}
+    </div>
+    <BIMDataButton
+      data-test="btn-submit-delete"
+      class="group-card-delete-guard__btn-submit"
+      color="high"
+      fill
+      radius
+      @click="removeGroup"
+    >
+      {{ $t("GroupCardDeleteGuard.deleteButtonText") }}
+    </BIMDataButton>
+  </div>
+</template>
+
+<script>
+import { inject } from "vue";
+import { useGroups } from "@/state/groups";
+// Components
+import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["close"],
+  setup(props, { emit }) {
+    const { deleteGroup } = useGroups();
+
+    const loading = inject("loading", false);
+
+    const removeGroup = () => {
+      loading.value = true;
+      deleteGroup(props.group);
+    };
+
+    const close = () => {
+      emit("close");
+    };
+
+    return {
+      // Methods
+      close,
+      removeGroup
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./GroupCardDeleteGuard.scss"></style>
diff --git a/src/components/specific/groups/group-card/group-card-update-form/GroupCardUpdateForm.scss b/src/components/specific/groups/group-card/group-card-update-form/GroupCardUpdateForm.scss
new file mode 100644
index 000000000..74d231e01
--- /dev/null
+++ b/src/components/specific/groups/group-card/group-card-update-form/GroupCardUpdateForm.scss
@@ -0,0 +1,21 @@
+.group-card-update-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  padding: $spacing-unit $spacing-unit * 2 $spacing-unit * 2;
+
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    font-weight: bold;
+  }
+
+  &__input,
+  &__btn-submit {
+    width: 100%;
+  }
+}
diff --git a/src/components/specific/groups/group-card/group-card-update-form/GroupCardUpdateForm.vue b/src/components/specific/groups/group-card/group-card-update-form/GroupCardUpdateForm.vue
new file mode 100644
index 000000000..a22d43546
--- /dev/null
+++ b/src/components/specific/groups/group-card/group-card-update-form/GroupCardUpdateForm.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="group-card-update-form">
+    <div class="group-card-update-form__title">
+      {{ $t("GroupCardUpdateForm.title") }}
+      <BIMDataButton
+        data-test="btn-close-update"
+        ghost
+        rounded
+        icon
+        @click="close"
+      >
+        <BIMDataIcon name="close" size="xxs" />
+      </BIMDataButton>
+    </div>
+    <BIMDataInput
+      ref="nameInput"
+      data-test="input-update-name"
+      class="group-card-update-form__input"
+      :placeholder="$t('GroupCardUpdateForm.inputPlaceholder')"
+      v-model="groupName"
+      :error="error"
+      :errorMessage="$t('GroupCardUpdateForm.inputErrorMessage')"
+      @keyup.esc.stop="close"
+      @keyup.enter.stop="submit"
+    />
+    <BIMDataButton
+      data-test="btn-submit-update"
+      class="group-card-update-form__btn-submit"
+      color="primary"
+      fill
+      radius
+      @click="submit"
+    >
+      {{ $t("GroupCardUpdateForm.submitButtonText") }}
+    </BIMDataButton>
+  </div>
+</template>
+
+<script>
+import { inject, onMounted, ref } from "vue";
+import { useGroups } from "@/state/groups";
+// Components
+import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+import BIMDataInput from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataInput.js";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon,
+    BIMDataInput
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["close", "success", "error"],
+  setup(props, { emit }) {
+    const { updateGroup } = useGroups();
+
+    const loading = inject("loading", false);
+
+    const nameInput = ref(null);
+    const groupName = ref(props.group.name);
+    const error = ref(false);
+    const submit = async () => {
+      if (groupName.value) {
+        try {
+          loading.value = true;
+          await updateGroup(props.group.project, {
+            ...props.group,
+            name: groupName.value
+          });
+          emit("success");
+        } catch (error) {
+          emit("error", error);
+        }
+      } else {
+        nameInput.value.focus();
+        error.value = true;
+      }
+    };
+
+    const close = () => {
+      error.value = false;
+      emit("close");
+    };
+
+    onMounted(() => {
+      setTimeout(() => nameInput.value.focus(), 200);
+    });
+
+    return {
+      // References
+      error,
+      groupName,
+      nameInput,
+      // Methods
+      close,
+      submit
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./GroupCardUpdateForm.scss"></style>
diff --git a/src/components/specific/users/user-avatar-list/UserAvatarList.scss b/src/components/specific/users/user-avatar-list/UserAvatarList.scss
new file mode 100644
index 000000000..a4909db12
--- /dev/null
+++ b/src/components/specific/users/user-avatar-list/UserAvatarList.scss
@@ -0,0 +1,18 @@
+.user-avatar-list {
+  display: grid;
+
+  &__item {
+    border: 1px solid $color-white;
+  }
+
+  &__tail-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid $color-white;
+    border-radius: 50%;
+    font-weight: bold;
+    background-color: $color-primary;
+    color: $color-tertiary-lightest;
+  }
+}
diff --git a/src/components/specific/users/user-avatar-list/UserAvatarList.vue b/src/components/specific/users/user-avatar-list/UserAvatarList.vue
new file mode 100644
index 000000000..3b2683505
--- /dev/null
+++ b/src/components/specific/users/user-avatar-list/UserAvatarList.vue
@@ -0,0 +1,77 @@
+<template>
+  <div
+    class="user-avatar-list"
+    :style="{
+      width: `${listWidth}px`,
+      gridTemplateColumns: `repeat(${length}, ${itemGap}px)`
+    }"
+  >
+    <UserAvatar
+      class="user-avatar-list__item"
+      v-for="user of displayedUsers"
+      :key="user.id"
+      :user="user"
+      :size="itemSize"
+    />
+    <template v-if="users.length > length">
+      <div
+        class="user-avatar-list__tail-item"
+        :style="{ width: `${itemSize}px`, height: `${itemSize}px` }"
+      >
+        {{ `+ ${users.length - length + 1}` }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+// Components
+import UserAvatar from "@/components/specific/users/user-avatar/UserAvatar";
+
+export default {
+  components: {
+    UserAvatar
+  },
+  props: {
+    users: {
+      type: Array,
+      required: true
+    },
+    length: {
+      type: Number,
+      default: 4
+    },
+    itemSize: {
+      type: [Number, String],
+      default: 32
+    },
+    itemGap: {
+      type: [Number, String],
+      default: 24
+    }
+  },
+  setup(props) {
+    const displayedUsers = computed(() => {
+      const n = props.users.length;
+      const l = props.length;
+      return props.users.slice(0, n > l ? l - 1 : l);
+    });
+
+    const listWidth = computed(() => {
+      const l = props.length;
+      const w = +props.itemSize;
+      const g = +props.itemGap;
+      return l * g + (w > g ? w - g : 0);
+    });
+
+    return {
+      // References
+      displayedUsers,
+      listWidth
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./UserAvatarList.scss"></style>
diff --git a/src/components/specific/users/user-avatar/UserAvatar.scss b/src/components/specific/users/user-avatar/UserAvatar.scss
new file mode 100644
index 000000000..93f6be82f
--- /dev/null
+++ b/src/components/specific/users/user-avatar/UserAvatar.scss
@@ -0,0 +1,24 @@
+.user-avatar {
+  min-width: 32px;
+  min-height: 32px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+
+  &--primary {
+    background-color: $color-primary;
+    color: $color-tertiary-lightest;
+  }
+
+  &--secondary {
+    background-color: $color-secondary;
+    color: $color-primary;
+  }
+
+  &--tertiary {
+    background-color: $color-tertiary-lightest;
+    color: $color-primary;
+  }
+}
diff --git a/src/components/specific/users/user-avatar/UserAvatar.vue b/src/components/specific/users/user-avatar/UserAvatar.vue
new file mode 100644
index 000000000..90ffdee9c
--- /dev/null
+++ b/src/components/specific/users/user-avatar/UserAvatar.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="user-avatar"
+    :class="`user-avatar--${color}`"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  >
+    <template v-if="user.avatar">
+      <!-- TODO: display avatar -->
+      <!-- <img :src="user.avatar" /> -->
+    </template>
+    <template v-else>
+      {{ initials }}
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+
+export default {
+  props: {
+    user: {
+      type: Object,
+      required: true
+    },
+    size: {
+      type: [Number, String],
+      default: 32
+    },
+    color: {
+      type: String,
+      default: "primary",
+      validate: value => ["primary", "secondary", "tertiary"].includes(value)
+    }
+  },
+  setup(props) {
+    const initials = computed(() =>
+      `${props.user.firstname[0]}${props.user.lastname[0]}`.toUpperCase()
+    );
+
+    return {
+      initials
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./UserAvatar.scss"></style>
diff --git a/src/i18n/lang/en.js b/src/i18n/lang/en.js
index a68b88991..ebc9933f3 100644
--- a/src/i18n/lang/en.js
+++ b/src/i18n/lang/en.js
@@ -181,6 +181,26 @@ export default {
     }
   },
 
+  GroupCardActionMenu: {
+    renameButtonText: "Rename",
+    changeColorButtonText: "Change color",
+    deleteButtonText: "Delete"
+  },
+
+  GroupCardDeleteGuard: {
+    title: "Delete group",
+    message:
+      "You are about to (definitely) delete group {name}, are you sure ?",
+    deleteButtonText: "Delete"
+  },
+
+  GroupCardUpdateForm: {
+    title: "Rename group",
+    inputPlaceholder: "Name",
+    inputErrorMessage: "Invalid group name",
+    submitButtonText: "Rename"
+  },
+
   InvitationCard: {
     pendingMessage: "Invited - Pending.",
     resendLinkText: "Send invitation again ?"
diff --git a/src/i18n/lang/fr.js b/src/i18n/lang/fr.js
index 1d2c5051a..fae014e6f 100644
--- a/src/i18n/lang/fr.js
+++ b/src/i18n/lang/fr.js
@@ -180,6 +180,26 @@ export default {
     }
   },
 
+  GroupCardActionMenu: {
+    renameButtonText: "Renommer",
+    changeColorButtonText: "Modifier la couleur",
+    deleteButtonText: "Supprimer"
+  },
+
+  GroupCardDeleteGuard: {
+    title: "Supprimer le groupe",
+    message:
+      "Êtes vous sûr de vouloir supprimer (définitivement) le groupe {name} ?",
+    deleteButtonText: "Supprimer"
+  },
+
+  GroupCardUpdateForm: {
+    title: "Renommer le groupe",
+    inputPlaceholder: "Nom",
+    inputErrorMessage: "Nom de groupe invalide",
+    submitButtonText: "Renommer"
+  },
+
   InvitationCard: {
     pendingMessage: "Invité - Sans réponse.",
     resendLinkText: "Renvoyer l'invitation ?"
diff --git a/src/server/GroupService.js b/src/server/GroupService.js
new file mode 100644
index 000000000..f3fec7eea
--- /dev/null
+++ b/src/server/GroupService.js
@@ -0,0 +1,52 @@
+import apiClient from "./api-client";
+
+class GroupService {
+  fetchProjectGroups(project) {
+    return [
+      {
+        id: 1,
+        name: "My Group Name",
+        color: "#FF3D1E",
+        project,
+        members: [
+          {
+            firstname: "Gaëlle",
+            lastname: "Leroux"
+          },
+          {
+            firstname: "Gaëtan",
+            lastname: "Lagier"
+          },
+          {
+            firstname: "Hugo",
+            lastname: "Duroux"
+          },
+          {
+            firstname: "Nicolas",
+            lastname: "Richel"
+          },
+          {
+            firstname: "François",
+            lastname: "Thierry"
+          }
+        ]
+      }
+    ];
+  }
+
+  createGroup(project, group) {
+    return group;
+  }
+
+  updateGroup(project, group) {
+    return group;
+  }
+
+  deleteGroup(project, group) {
+    return group;
+  }
+}
+
+const service = new GroupService();
+
+export default service;
diff --git a/src/state/groups.js b/src/state/groups.js
new file mode 100644
index 000000000..9e47bac28
--- /dev/null
+++ b/src/state/groups.js
@@ -0,0 +1,56 @@
+import { reactive, readonly, toRefs } from "vue";
+import GroupService from "@/server/GroupService";
+
+const state = reactive({
+  projectGroups: [],
+  currentGroup: null
+});
+
+const loadProjectGroups = async project => {
+  const groups = await GroupService.fetchProjectGroups(project);
+  state.projectGroups = groups;
+  return groups;
+};
+
+const createGroup = async (project, group) => {
+  const newGroup = await GroupService.createGroup(project, group);
+  state.projectGroups = [newGroup].concat(state.projectGroups);
+  return newGroup;
+};
+
+const updateGroup = async (project, group) => {
+  const newGroup = await GroupService.updateGroup(project, group);
+  softUpdateGroup(newGroup);
+  return newGroup;
+};
+
+const softUpdateGroup = group => {
+  // TODO: update state
+  return group;
+};
+
+const deleteGroup = async (project, group) => {
+  await GroupService.deleteGroup(project, group);
+  softDeleteGroup(group);
+  return group;
+};
+
+const softDeleteGroup = group => {
+  // TODO: update state
+  return group;
+};
+
+export function useGroups() {
+  const readOnlyState = readonly(state);
+  return {
+    // References
+    ...toRefs(readOnlyState),
+    // Methods
+    loadProjectGroups,
+    createGroup,
+    updateGroup,
+    softUpdateGroup,
+    deleteGroup,
+    softDeleteGroup
+  };
+}
diff --git a/src/views/project-board/ProjectBoard.vue b/src/views/project-board/ProjectBoard.vue
index 83600e3cf..ff2c5f927 100644
--- a/src/views/project-board/ProjectBoard.vue
+++ b/src/views/project-board/ProjectBoard.vue
@@ -10,8 +10,8 @@
           height="32px"
           tabSize="100px"
           :tabs="tabs"
-          :selected="currentTab.id"
-          @tab-click="selectTab"
+          :selected="0"
+          @tab-click="changeView($event.id)"
         />
       </template>
       <template #right>
@@ -22,7 +22,7 @@
     <div class="project-board__body">
       <transition name="fade" mode="out-in">
         <keep-alive>
-          <component :is="currentTab.view" />
+          <component :is="currentView" />
         </keep-alive>
       </transition>
     </div>
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { ref, watch } from "vue";
+import { provide, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 // Components
 import BIMDataTabs from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataTabs.js";
@@ -39,13 +39,17 @@ import ViewHeader from "@/components/generic/view-header/ViewHeader";
 import AppBreadcrumb from "@/components/specific/app/app-breadcrumb/AppBreadcrumb";
 import ProjectBcf from "./project-bcf/ProjectBcf";
 import ProjectFiles from "./project-files/ProjectFiles";
+import ProjectGroups from "./project-groups/ProjectGroups";
 import ProjectOverview from "./project-overview/ProjectOverview";
 
-const tabsDef = [
-  { id: "overview", view: "ProjectOverview" },
-  { id: "files", view: "ProjectFiles" },
-  { id: "bcf", view: "ProjectBcf" }
-];
+const views = {
+  overview: "ProjectOverview",
+  files: "ProjectFiles",
+  bcf: "ProjectBcf",
+  groups: "ProjectGroups"
+};
+
+const tabsDef = [{ id: "overview" }, { id: "files" }, { id: "bcf" }];
 
 export default {
   components: {
@@ -55,6 +59,7 @@ export default {
     AppBreadcrumb,
     ProjectBcf,
     ProjectFiles,
+    ProjectGroups,
     ProjectOverview
   },
   setup() {
@@ -65,24 +70,26 @@ export default {
       () => locale.value,
       () => {
         tabs.value = tabsDef.map(tab => ({
-          ...tab,
+          id: tab.id,
           label: t(`ProjectBoard.tabs.${tab.id}`)
         }));
       },
       { immediate: true }
     );
 
-    const currentTab = ref(tabsDef[0]);
-    const selectTab = tab => {
-      currentTab.value = tab;
+    const currentView = ref(views.overview);
+    const changeView = view => {
+      currentView.value = views[view];
     };
 
+    provide("changeView", changeView);
+
     return {
       // References
-      currentTab,
+      currentView,
       tabs,
       // Methods
-      selectTab
+      changeView
     };
   }
 };
diff --git a/src/views/project-board/project-files/ProjectFiles.vue b/src/views/project-board/project-files/ProjectFiles.vue
index 9696ef153..ea0cd533d 100644
--- a/src/views/project-board/project-files/ProjectFiles.vue
+++ b/src/views/project-board/project-files/ProjectFiles.vue
@@ -7,7 +7,7 @@
         color="primary"
         fill
         radius
-        @click="() => {}"
+        @click="openProjectGroups"
       >
         <BIMDataIcon name="group" size="s" />
         <span>{{ $t("ProjectFiles.groupsButtonText") }}</span>
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { provide } from "vue";
+import { inject, provide } from "vue";
 import { useFiles } from "@/state/files";
 import { useModels } from "@/state/models";
 import { useProjects } from "@/state/projects";
@@ -61,11 +61,17 @@ export default {
       }, 1000);
     };
 
+    const changeView = inject("changeView");
+    const openProjectGroups = () => {
+      changeView("groups");
+    };
+
     return {
       // References
       fileStructure: projectFileStructure,
       project: currentProject,
       // Methods
+      openProjectGroups,
       reloadFileStructure
     };
   }
diff --git a/src/views/project-board/project-groups/ProjectGroups.scss b/src/views/project-board/project-groups/ProjectGroups.scss
index f77efae80..524eef588 100644
--- a/src/views/project-board/project-groups/ProjectGroups.scss
+++ b/src/views/project-board/project-groups/ProjectGroups.scss
@@ -3,5 +3,5 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-weight: bold;
+  // font-weight: bold;
 }
diff --git a/src/views/project-board/project-groups/ProjectGroups.vue b/src/views/project-board/project-groups/ProjectGroups.vue
index 0f7eb319b..4a3770088 100644
--- a/src/views/project-board/project-groups/ProjectGroups.vue
+++ b/src/views/project-board/project-groups/ProjectGroups.vue
@@ -1,18 +1,31 @@
 <template>
   <div class="project-groups">
     <!-- TODO -->
-    Project Groups view, coming soon...
+    <GroupCard v-for="group of groups" :key="group.id" :group="group" />
   </div>
 </template>
 
 <script>
+import { onMounted } from "vue";
+import { useGroups } from "@/state/groups";
 import { useProjects } from "@/state/projects";
+// Components
+import GroupCard from "@/components/specific/groups/group-card/GroupCard";
 
 export default {
+  components: {
+    GroupCard
+  },
   setup() {
     const { currentProject } = useProjects();
+    const { projectGroups, loadProjectGroups } = useGroups();
+
+    onMounted(() => {
+      loadProjectGroups(currentProject.value);
+    });
 
     return {
+      groups: projectGroups,
       project: currentProject
     };
   }