From 406e7d49b5794ffaa2c16a6f140cf3d82b0e6b22 Mon Sep 17 00:00:00 2001
From: Andrea Cordoba <dandrea.cordoba@gmail.com>
Date: Thu, 5 Dec 2024 12:48:54 +0100
Subject: [PATCH] feat: add group page design

---
 client/src/components/EntityWatermark.tsx     |  43 +++
 client/src/components/PageNav.tsx             |  56 ++++
 .../components/DataConnectorsBox.tsx          |  48 ++-
 .../DataConnectorsBoxListDisplay.tsx          |  61 +++-
 .../features/groupsV2/LazyGroupContainer.tsx  |  30 ++
 ...roupV2Show.tsx => LazyGroupV2Overview.tsx} |   6 +-
 .../members/GroupV2MemberListDisplay.tsx      |  72 ++---
 .../settings/GroupSettingsMetadata.tsx        | 151 ++++++---
 .../groupsV2/settings/GroupV2Settings.tsx     |  62 ++--
 .../groupsV2/show/GroupPageContainer.tsx      | 144 +++++++++
 .../groupsV2/show/GroupV2Information.tsx      |  92 ++++++
 .../features/groupsV2/show/GroupV2Show.tsx    | 165 ++--------
 .../projectsV2/list/ProjectV2ListDisplay.tsx  | 289 +++++++++++-------
 client/src/features/rootV2/RootV2.tsx         |  15 +-
 .../src/features/usersV2/show/UserAvatar.tsx  |  25 ++
 client/src/features/usersV2/show/UserShow.tsx |   4 +-
 tests/cypress/e2e/groupV2.spec.ts             |  13 +-
 17 files changed, 866 insertions(+), 410 deletions(-)
 create mode 100644 client/src/components/EntityWatermark.tsx
 create mode 100644 client/src/components/PageNav.tsx
 create mode 100644 client/src/features/groupsV2/LazyGroupContainer.tsx
 rename client/src/features/groupsV2/{LazyGroupV2Show.tsx => LazyGroupV2Overview.tsx} (86%)
 create mode 100644 client/src/features/groupsV2/show/GroupPageContainer.tsx
 create mode 100644 client/src/features/groupsV2/show/GroupV2Information.tsx

diff --git a/client/src/components/EntityWatermark.tsx b/client/src/components/EntityWatermark.tsx
new file mode 100644
index 000000000..dd3c190d0
--- /dev/null
+++ b/client/src/components/EntityWatermark.tsx
@@ -0,0 +1,43 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { CSSProperties } from "react";
+import { Folder, People, Person } from "react-bootstrap-icons";
+
+interface EntityWatermarkProps {
+  type: "project" | "user" | "group";
+}
+export function EntityWatermark({ type }: EntityWatermarkProps) {
+  const watermarkStyles: CSSProperties = {
+    right: "0",
+    fontSize: "150px",
+    lineHeight: "0",
+    color: "rgba(0, 0, 0, 0.1)",
+  };
+  return (
+    <div
+      style={watermarkStyles}
+      className={cx("d-none", "d-lg-block", "position-absolute", "top-0")}
+    >
+      {type === "group" && <People />}
+      {type === "user" && <Person />}
+      {type === "project" && <Folder />}
+    </div>
+  );
+}
diff --git a/client/src/components/PageNav.tsx b/client/src/components/PageNav.tsx
new file mode 100644
index 000000000..fb80614e1
--- /dev/null
+++ b/client/src/components/PageNav.tsx
@@ -0,0 +1,56 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import cx from "classnames";
+import { Eye, Sliders } from "react-bootstrap-icons";
+import { Nav, NavItem } from "reactstrap";
+import RenkuNavLinkV2 from "./RenkuNavLinkV2";
+
+export interface PageNavOptions {
+  overviewUrl: string;
+  settingsUrl: string;
+}
+export default function PageNav({ options }: { options: PageNavOptions }) {
+  return (
+    <>
+      <Nav tabs>
+        <NavItem>
+          <RenkuNavLinkV2
+            end
+            to={options.overviewUrl}
+            title="Overview"
+            data-cy="nav-link-overview"
+          >
+            <Eye className={cx("bi", "me-1")} />
+            Overview
+          </RenkuNavLinkV2>
+        </NavItem>
+        <NavItem>
+          <RenkuNavLinkV2
+            end
+            to={options.settingsUrl}
+            title="Settings"
+            data-cy="nav-link-settings"
+          >
+            <Sliders className={cx("bi", "me-1")} />
+            Settings
+          </RenkuNavLinkV2>
+        </NavItem>
+      </Nav>
+    </>
+  );
+}
diff --git a/client/src/features/dataConnectorsV2/components/DataConnectorsBox.tsx b/client/src/features/dataConnectorsV2/components/DataConnectorsBox.tsx
index 8b1ed9286..e67a53f56 100644
--- a/client/src/features/dataConnectorsV2/components/DataConnectorsBox.tsx
+++ b/client/src/features/dataConnectorsV2/components/DataConnectorsBox.tsx
@@ -212,16 +212,20 @@ function DataConnectorBoxContent({
           totalConnectors={data.total}
         />
         <CardBody>
-          {data.total === 0 && (
-            <p className="m-0">
-              Add published datasets from data repositories, and connect to
-              cloud storage to read and write custom data.
-            </p>
+          {data.total === 0 && namespaceKind === "group" && (
+            <AddEmptyListForGroupNamespace namespace={namespace} />
+          )}
+          {data.total === 0 && namespaceKind === "user" && (
+            <AddEmptyListForUserNamespace namespace={namespace} />
           )}
           {data.total > 0 && (
             <ListGroup flush>
               {data.dataConnectors?.map((dc) => (
-                <DataConnectorBoxListDisplay key={dc.id} dataConnector={dc} />
+                <DataConnectorBoxListDisplay
+                  key={dc.id}
+                  dataConnector={dc}
+                  extendedPreview={true}
+                />
               ))}
             </ListGroup>
           )}
@@ -320,3 +324,35 @@ function DataConnectorLoadingBoxContent() {
     </Card>
   );
 }
+
+function AddEmptyListForGroupNamespace({ namespace }: { namespace: string }) {
+  const { permissions } = useGroupPermissions({ groupSlug: namespace });
+
+  return (
+    <PermissionsGuard
+      disabled={<p>This group has no visible data connectors.</p>}
+      enabled={
+        <p>
+          Add published datasets from data repositories, and connect to cloud
+          storage to read and write custom data.
+        </p>
+      }
+      requestedPermission="write"
+      userPermissions={permissions}
+    />
+  );
+}
+
+function AddEmptyListForUserNamespace({ namespace }: { namespace: string }) {
+  const { data: currentUser } = useGetUserQuery();
+
+  if (currentUser?.isLoggedIn && currentUser.username === namespace) {
+    return (
+      <p>
+        Add published datasets from data repositories, and connect to cloud
+        storage to read and write custom data.
+      </p>
+    );
+  }
+  return <p>This user has no visible data connectors.</p>;
+}
diff --git a/client/src/features/dataConnectorsV2/components/DataConnectorsBoxListDisplay.tsx b/client/src/features/dataConnectorsV2/components/DataConnectorsBoxListDisplay.tsx
index 181338226..6a1fcf91d 100644
--- a/client/src/features/dataConnectorsV2/components/DataConnectorsBoxListDisplay.tsx
+++ b/client/src/features/dataConnectorsV2/components/DataConnectorsBoxListDisplay.tsx
@@ -18,11 +18,12 @@
 
 import cx from "classnames";
 import { useCallback, useState } from "react";
-import { Globe2, Lock } from "react-bootstrap-icons";
+import { EyeFill, Globe2, Lock, Pencil } from "react-bootstrap-icons";
 import { Col, ListGroupItem, Row } from "reactstrap";
 
 import ClampedParagraph from "../../../components/clamped/ClampedParagraph";
 import { TimeCaption } from "../../../components/TimeCaption";
+import UserAvatar, { UserAvatarSize } from "../../usersV2/show/UserAvatar.tsx";
 import type {
   DataConnector,
   DataConnectorToProjectLink,
@@ -33,16 +34,20 @@ import DataConnectorView from "./DataConnectorView";
 interface DataConnectorBoxListDisplayProps {
   dataConnector: DataConnector;
   dataConnectorLink?: DataConnectorToProjectLink;
+  extendedPreview?: boolean;
 }
 export default function DataConnectorBoxListDisplay({
   dataConnector,
   dataConnectorLink,
+  extendedPreview,
 }: DataConnectorBoxListDisplayProps) {
   const {
     name,
     description,
     visibility,
     creation_date: creationDate,
+    storage,
+    namespace,
   } = dataConnector;
 
   const [showDetails, setShowDetails] = useState(false);
@@ -50,6 +55,21 @@ export default function DataConnectorBoxListDisplay({
     setShowDetails((open) => !open);
   }, []);
 
+  const type = `${storage?.configuration?.type?.toString() ?? ""} ${
+    storage?.configuration?.provider?.toString() ?? ""
+  }`;
+  const readOnly = storage?.readonly ? (
+    <div>
+      <EyeFill className={cx("bi", "me-1")} />
+      Read only
+    </div>
+  ) : (
+    <div>
+      <Pencil className={cx("bi", "me-1")} />
+      Allow Read-write
+    </div>
+  );
+
   return (
     <>
       <ListGroupItem
@@ -58,33 +78,56 @@ export default function DataConnectorBoxListDisplay({
         onClick={toggleDetails}
       >
         <Row className={cx("align-items-center", "g-2")}>
-          <Col>
+          <Col className={cx("d-flex", "flex-column", "gap-1")}>
             <span className="fw-bold" data-cy="data-connector-name">
               {name}
             </span>
+            <div
+              className={cx(
+                "d-flex",
+                "flex-row",
+                "text-truncate",
+                "gap-2",
+                "align-items-center"
+              )}
+            >
+              <UserAvatar username={namespace} size={UserAvatarSize.small} />
+              <p className={cx("mb-0", "text-truncate", "text-muted")}>
+                {namespace}
+              </p>
+            </div>
             {description && <ClampedParagraph>{description}</ClampedParagraph>}
+            {extendedPreview && <div className="text-muted">{type}</div>}
             <div
               className={cx(
                 "align-items-center",
                 "d-flex",
                 "flex-wrap",
                 "gap-2",
-                "justify-content-between",
-                "mt-auto"
+                "justify-content-between"
               )}
             >
-              <div>
+              <div
+                className={cx(
+                  "align-items-center",
+                  "d-flex",
+                  "flex-wrap",
+                  "gap-3",
+                  "mt-auto"
+                )}
+              >
                 {visibility.toLowerCase() === "private" ? (
-                  <>
+                  <div>
                     <Lock className={cx("bi", "me-1")} />
                     Private
-                  </>
+                  </div>
                 ) : (
-                  <>
+                  <div>
                     <Globe2 className={cx("bi", "me-1")} />
                     Public
-                  </>
+                  </div>
                 )}
+                {extendedPreview && readOnly}
               </div>
               <TimeCaption
                 datetime={creationDate}
diff --git a/client/src/features/groupsV2/LazyGroupContainer.tsx b/client/src/features/groupsV2/LazyGroupContainer.tsx
new file mode 100644
index 000000000..369591574
--- /dev/null
+++ b/client/src/features/groupsV2/LazyGroupContainer.tsx
@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Suspense, lazy } from "react";
+import PageLoader from "../../components/PageLoader";
+
+const GroupV2Container = lazy(() => import("./show/GroupPageContainer"));
+
+export default function LazyGroupContainer() {
+  return (
+    <Suspense fallback={<PageLoader />}>
+      <GroupV2Container />
+    </Suspense>
+  );
+}
diff --git a/client/src/features/groupsV2/LazyGroupV2Show.tsx b/client/src/features/groupsV2/LazyGroupV2Overview.tsx
similarity index 86%
rename from client/src/features/groupsV2/LazyGroupV2Show.tsx
rename to client/src/features/groupsV2/LazyGroupV2Overview.tsx
index f666626d6..0f2adabcb 100644
--- a/client/src/features/groupsV2/LazyGroupV2Show.tsx
+++ b/client/src/features/groupsV2/LazyGroupV2Overview.tsx
@@ -19,12 +19,12 @@
 import { Suspense, lazy } from "react";
 import PageLoader from "../../components/PageLoader";
 
-const GroupV2Show = lazy(() => import("./show/GroupV2Show"));
+const GroupV2Overview = lazy(() => import("./show/GroupV2Show"));
 
-export default function LazyGroupV2Show() {
+export default function LazyGroupV2Overview() {
   return (
     <Suspense fallback={<PageLoader />}>
-      <GroupV2Show />
+      <GroupV2Overview />
     </Suspense>
   );
 }
diff --git a/client/src/features/groupsV2/members/GroupV2MemberListDisplay.tsx b/client/src/features/groupsV2/members/GroupV2MemberListDisplay.tsx
index c0a5e7372..b87f9366a 100644
--- a/client/src/features/groupsV2/members/GroupV2MemberListDisplay.tsx
+++ b/client/src/features/groupsV2/members/GroupV2MemberListDisplay.tsx
@@ -19,8 +19,9 @@
 import cx from "classnames";
 import { capitalize } from "lodash-es";
 import { useMemo } from "react";
+import { People } from "react-bootstrap-icons";
 import { Link, generatePath } from "react-router-dom-v5-compat";
-import { ListGroup } from "reactstrap";
+import { Badge } from "reactstrap";
 
 import { Loader } from "../../../components/Loader";
 import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
@@ -28,7 +29,7 @@ import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants";
 import { toSortedMembers } from "../../ProjectPageV2/utils/roleUtils";
 import type { ProjectMemberResponse } from "../../projectsV2/api/projectV2.api";
 import { useGetGroupsByGroupSlugMembersQuery } from "../../projectsV2/api/projectV2.enhanced-api";
-import UserAvatar from "../../usersV2/show/UserAvatar";
+import { GroupInformationBox } from "../show/GroupV2Information";
 
 interface GroupV2MemberListDisplayProps {
   group: string;
@@ -48,30 +49,33 @@ export default function GroupV2MemberListDisplay({
     [members]
   );
 
-  if (isLoading)
-    return (
-      <div className={cx("d-flex", "justify-content-center", "w-100")}>
-        <div className={cx("d-flex", "flex-column")}>
-          <Loader />
-          <div>Retrieving group members...</div>
-        </div>
-      </div>
-    );
-
   if (error || sortedMembers == null) {
     return <RtkOrNotebooksError error={error} dismissible={false} />;
   }
 
-  if (!sortedMembers.length) {
-    return <p>There are no members in this group.</p>;
-  }
-
   return (
-    <ListGroup className="mb-3">
+    <GroupInformationBox
+      icon={<People className="bi" />}
+      title={
+        <>
+          <span>Members</span>
+          <Badge>{sortedMembers.length ?? 0}</Badge>
+        </>
+      }
+    >
+      {!sortedMembers.length && <p>There are no members in this group.</p>}
+      {isLoading && (
+        <div className={cx("d-flex", "justify-content-center", "w-100")}>
+          <div className={cx("d-flex", "flex-column")}>
+            <Loader />
+            <div>Retrieving group members...</div>
+          </div>
+        </div>
+      )}
       {sortedMembers?.map((member) => (
         <GroupV2Member key={member.id} member={member} />
       ))}
-    </ListGroup>
+    </GroupInformationBox>
   );
 }
 
@@ -95,32 +99,22 @@ function GroupV2Member({ member }: GroupV2MemberProps) {
   return (
     <>
       <Link
-        className={cx("list-group-item-action", "list-group-item")}
+        className={cx("mb-0")}
         to={generatePath(ABSOLUTE_ROUTES.v2.users.show, { username })}
       >
-        <div
-          className={cx(
-            "align-items-center",
-            "d-flex",
-            "flex-wrap",
-            "gap-2",
-            "justify-content-between"
-          )}
-        >
+        <div className={cx("d-flex", "gap-2")}>
           <div
-            className={cx("align-items-center", "d-flex", "flex-wrap", "gap-2")}
+            className={cx(
+              "d-flex",
+              "flex-column",
+              "justify-content-center",
+              "text-truncate"
+            )}
           >
-            <div className={cx("align-items-center", "d-flex", "gap-2")}>
-              <UserAvatar
-                firstName={firstName}
-                lastName={lastName}
-                username={username}
-              />
-              <span className={cx("fw-bold")}>{name ?? "Unknown user"}</span>{" "}
-            </div>
-            <p className="m-0">{`@${username}`}</p>
+            <p className={cx("m-0", "text-truncate")}>
+              {name ?? "Unknown user"} ({capitalize(role)})
+            </p>
           </div>
-          <p className="m-0">{capitalize(role)}</p>
         </div>
       </Link>
     </>
diff --git a/client/src/features/groupsV2/settings/GroupSettingsMetadata.tsx b/client/src/features/groupsV2/settings/GroupSettingsMetadata.tsx
index 5095e2650..97275710b 100644
--- a/client/src/features/groupsV2/settings/GroupSettingsMetadata.tsx
+++ b/client/src/features/groupsV2/settings/GroupSettingsMetadata.tsx
@@ -17,7 +17,7 @@
  */
 
 import cx from "classnames";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { CheckLg, Pencil, XLg } from "react-bootstrap-icons";
 import { useForm } from "react-hook-form";
 import { generatePath, useNavigate } from "react-router-dom-v5-compat";
@@ -25,6 +25,7 @@ import {
   Button,
   Form,
   Input,
+  Label,
   Modal,
   ModalBody,
   ModalFooter,
@@ -33,6 +34,8 @@ import {
 import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
 import { Loader } from "../../../components/Loader";
 import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants";
+import AppContext from "../../../utils/context/appContext.ts";
+import PermissionsGuard from "../../permissionsV2/PermissionsGuard.tsx";
 import type {
   GroupPatchRequest,
   GroupResponse,
@@ -44,6 +47,7 @@ import {
 import DescriptionFormField from "../../projectsV2/fields/DescriptionFormField";
 import NameFormField from "../../projectsV2/fields/NameFormField";
 import SlugFormField from "../../projectsV2/fields/SlugFormField";
+import useGroupPermissions from "../utils/useGroupPermissions.hook.ts";
 
 type GroupMetadata = Omit<GroupPatchRequest, "repositories">;
 
@@ -58,7 +62,9 @@ function GroupDeleteConfirmation({
   toggle,
   group,
 }: GroupDeleteConfirmationProps) {
+  const navigate = useNavigate();
   const [deleteGroup, result] = useDeleteGroupsByGroupSlugMutation();
+  const { notifications } = useContext(AppContext);
   const onDelete = useCallback(() => {
     deleteGroup({ groupSlug: group.slug });
   }, [deleteGroup, group.slug]);
@@ -71,10 +77,15 @@ function GroupDeleteConfirmation({
   );
 
   useEffect(() => {
-    if (result.isSuccess || result.isError) {
-      toggle();
+    if (result.isError)
+      notifications?.addError(`Error deleting the group ${group.name}`);
+    if (result.isSuccess) {
+      notifications?.addSuccess(
+        `Group ${group.name} has been successfully deleted.`
+      );
+      navigate(generatePath(ABSOLUTE_ROUTES.v2.root));
     }
-  }, [result.isError, result.isSuccess, toggle]);
+  }, [result.isError, result.isSuccess, notifications, group.name, navigate]);
 
   return (
     <Modal centered isOpen={isOpen} size="lg" toggle={toggle}>
@@ -131,6 +142,7 @@ export default function GroupMetadataForm({ group }: GroupMetadataFormProps) {
       slug: group.slug ?? "",
     },
   });
+  const permissions = useGroupPermissions({ groupSlug: group.slug });
 
   const [updateGroup, updateGroupResult] = usePatchGroupsByGroupSlugMutation();
 
@@ -165,42 +177,113 @@ export default function GroupMetadataForm({ group }: GroupMetadataFormProps) {
       )}
       <GroupDeleteConfirmation isOpen={isOpen} group={group} toggle={toggle} />
       <Form noValidate onSubmit={handleSubmit(onSubmit)}>
-        <NameFormField
-          control={control}
-          entityName="group"
-          errors={errors}
-          name="name"
+        <PermissionsGuard
+          disabled={<GroupReadOnlyField title="Name" value={group.name} />}
+          enabled={
+            <NameFormField
+              control={control}
+              entityName="group"
+              errors={errors}
+              name="name"
+            />
+          }
+          requestedPermission="write"
+          userPermissions={permissions.permissions}
         />
-        <SlugFormField
-          control={control}
-          entityName="group"
-          errors={errors}
-          name="slug"
+
+        <PermissionsGuard
+          disabled={<GroupReadOnlyField title="Slug" value={group.slug} />}
+          enabled={
+            <SlugFormField
+              control={control}
+              entityName="group"
+              errors={errors}
+              name="slug"
+            />
+          }
+          requestedPermission="write"
+          userPermissions={permissions.permissions}
         />
-        <DescriptionFormField
-          control={control}
-          entityName="group"
-          errors={errors}
-          name="description"
+
+        <PermissionsGuard
+          disabled={
+            <GroupReadOnlyField
+              title="Description"
+              value={group.description ?? ""}
+            />
+          }
+          enabled={
+            <DescriptionFormField
+              control={control}
+              entityName="group"
+              errors={errors}
+              name="description"
+            />
+          }
+          requestedPermission="write"
+          userPermissions={permissions.permissions}
         />
+
         <div className={cx("d-flex", "gap-2")}>
-          <Button className="ms-auto" color="outline-danger" onClick={toggle}>
-            Delete
-          </Button>
-          <Button
-            color="primary"
-            disabled={isUpdating || !isDirty}
-            type="submit"
-          >
-            {isUpdating ? (
-              <Loader inline size={16} />
-            ) : (
-              <Pencil className={cx("bi", "me-1")} />
-            )}
-            Update
-          </Button>
+          <PermissionsGuard
+            disabled={null}
+            enabled={
+              <Button
+                className="ms-auto"
+                color="outline-danger"
+                onClick={toggle}
+              >
+                Delete
+              </Button>
+            }
+            requestedPermission="delete"
+            userPermissions={permissions.permissions}
+          />
+
+          <PermissionsGuard
+            disabled={null}
+            enabled={
+              <Button
+                color="primary"
+                disabled={isUpdating || !isDirty}
+                type="submit"
+              >
+                {isUpdating ? (
+                  <Loader inline size={16} />
+                ) : (
+                  <Pencil className={cx("bi", "me-1")} />
+                )}
+                Update
+              </Button>
+            }
+            requestedPermission="write"
+            userPermissions={permissions.permissions}
+          />
         </div>
       </Form>
     </div>
   );
 }
+function GroupReadOnlyField({
+  title,
+  value,
+}: {
+  title: string;
+  value: string;
+}) {
+  return (
+    <div className="mb-3">
+      <Label className="form-label" for={`group-${title}`}>
+        {title}
+      </Label>
+      <Input
+        className="form-control"
+        id={`group-${title}`}
+        type="text"
+        value={value}
+        disabled={true}
+        readOnly
+      />
+    </div>
+  );
+}
diff --git a/client/src/features/groupsV2/settings/GroupV2Settings.tsx b/client/src/features/groupsV2/settings/GroupV2Settings.tsx
index d9f324d98..7f16e99af 100644
--- a/client/src/features/groupsV2/settings/GroupV2Settings.tsx
+++ b/client/src/features/groupsV2/settings/GroupV2Settings.tsx
@@ -18,14 +18,12 @@
 
 import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
-import { ArrowLeft, Sliders } from "react-bootstrap-icons";
-import { Link, generatePath, useParams } from "react-router-dom-v5-compat";
+import { Sliders } from "react-bootstrap-icons";
+import { useParams } from "react-router-dom-v5-compat";
 import { Card, CardBody, CardHeader } from "reactstrap";
 
 import { Loader } from "../../../components/Loader";
-import ContainerWrap from "../../../components/container/ContainerWrap";
 import LazyNotFound from "../../../not-found/LazyNotFound";
-import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants";
 import { useGetGroupsByGroupSlugQuery } from "../../projectsV2/api/projectV2.enhanced-api";
 import GroupNotFound from "../../projectsV2/notFound/GroupNotFound";
 import GroupSettingsMembers from "./GroupSettingsMembers";
@@ -53,42 +51,26 @@ export default function GroupV2Settings() {
   }
 
   return (
-    <ContainerWrap>
-      <div className={cx("d-flex", "flex-column", "gap-3")}>
-        <div>
-          <h2>{group.name ?? "Unknown group"}</h2>
-          <div>
-            <Link
-              to={generatePath(ABSOLUTE_ROUTES.v2.groups.show.root, {
-                slug: group.slug,
-              })}
-            >
-              <ArrowLeft className={cx("bi", "me-1")} />
-              Back to group
-            </Link>
-          </div>
-        </div>
+    <div className={cx("d-flex", "flex-column", "gap-3")}>
+      <section>
+        <Card data-cy="group-general-settings">
+          <CardHeader>
+            <h4 className="m-0">
+              <Sliders className={cx("me-1", "bi")} />
+              General settings
+            </h4>
+          </CardHeader>
+          <CardBody>
+            <GroupMetadataForm group={group} />
+          </CardBody>
+        </Card>
+      </section>
 
-        <section>
-          <Card data-cy="group-general-settings">
-            <CardHeader>
-              <h4 className="m-0">
-                <Sliders className={cx("me-1", "bi")} />
-                General settings
-              </h4>
-            </CardHeader>
-            <CardBody>
-              <GroupMetadataForm group={group} />
-            </CardBody>
-          </Card>
-        </section>
-
-        <section>
-          <Card data-cy="group-members-settings">
-            <GroupSettingsMembers group={group} />
-          </Card>
-        </section>
-      </div>
-    </ContainerWrap>
+      <section>
+        <Card data-cy="group-members-settings">
+          <GroupSettingsMembers group={group} />
+        </Card>
+      </section>
+    </div>
   );
 }
diff --git a/client/src/features/groupsV2/show/GroupPageContainer.tsx b/client/src/features/groupsV2/show/GroupPageContainer.tsx
new file mode 100644
index 000000000..35380c579
--- /dev/null
+++ b/client/src/features/groupsV2/show/GroupPageContainer.tsx
@@ -0,0 +1,144 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { skipToken } from "@reduxjs/toolkit/query";
+import cx from "classnames";
+import { useEffect } from "react";
+import {
+  generatePath,
+  Outlet,
+  useNavigate,
+  useOutletContext,
+  useParams,
+} from "react-router-dom-v5-compat";
+import { Col, Row } from "reactstrap";
+import ContainerWrap from "../../../components/container/ContainerWrap.tsx";
+import { EntityWatermark } from "../../../components/EntityWatermark.tsx";
+import { Loader } from "../../../components/Loader.tsx";
+import PageNav, { PageNavOptions } from "../../../components/PageNav.tsx";
+import LazyNotFound from "../../../not-found/LazyNotFound.tsx";
+import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants.ts";
+import { GroupResponse } from "../../projectsV2/api/namespace.api.ts";
+import {
+  useGetGroupsByGroupSlugQuery,
+  useGetNamespacesByNamespaceSlugQuery,
+} from "../../projectsV2/api/projectV2.enhanced-api.ts";
+import GroupNotFound from "../../projectsV2/notFound/GroupNotFound.tsx";
+import UserAvatar, {
+  AvatarTypeWrap,
+  UserAvatarSize,
+} from "../../usersV2/show/UserAvatar.tsx";
+
+export default function GroupPageContainer() {
+  const { slug } = useParams<{ slug: string }>();
+
+  const navigate = useNavigate();
+
+  const {
+    data: namespace,
+    isLoading: isLoadingNamespace,
+    error: namespaceError,
+  } = useGetNamespacesByNamespaceSlugQuery(
+    slug ? { namespaceSlug: slug } : skipToken
+  );
+  const {
+    data: group,
+    isLoading: isLoadingGroup,
+    error: groupError,
+  } = useGetGroupsByGroupSlugQuery(slug ? { groupSlug: slug } : skipToken);
+
+  const isLoading = isLoadingNamespace || isLoadingGroup;
+  const error = namespaceError ?? groupError;
+
+  useEffect(() => {
+    if (slug && namespace?.namespace_kind === "user") {
+      navigate(
+        generatePath(ABSOLUTE_ROUTES.v2.users.show, { username: slug }),
+        {
+          replace: true,
+        }
+      );
+    }
+  }, [namespace?.namespace_kind, navigate, slug]);
+
+  if (!slug) {
+    return <LazyNotFound />;
+  }
+
+  if (isLoading) {
+    return <Loader className="align-self-center" />;
+  }
+
+  if (error || !namespace || !group) {
+    return <GroupNotFound error={error} />;
+  }
+
+  const options: PageNavOptions = {
+    overviewUrl: generatePath(ABSOLUTE_ROUTES.v2.groups.show.root, {
+      slug: group.slug,
+    }),
+    settingsUrl: generatePath(ABSOLUTE_ROUTES.v2.groups.show.settings, {
+      slug: group.slug,
+    }),
+  };
+  return (
+    <ContainerWrap className="position-relative">
+      <EntityWatermark type="group" />
+      <Row>
+        <Col xs={12}>
+          <GroupHeader group={group} slug={slug} />
+        </Col>
+        <Col xs={12} className="mb-0">
+          <div className="my-3">
+            <PageNav options={options} />
+          </div>
+        </Col>
+        <Col xs={12}>
+          <main>
+            <Outlet context={{ group: group } satisfies ContextType} />
+          </main>
+        </Col>
+      </Row>
+    </ContainerWrap>
+  );
+}
+
+type ContextType = { group: GroupResponse };
+export function useGroup() {
+  return useOutletContext<ContextType>();
+}
+
+function GroupHeader({ group, slug }: { group: GroupResponse; slug: string }) {
+  return (
+    <div className={cx("d-flex", "flex-row", "flex-nowrap", "gap-2")}>
+      <div className={cx("d-flex", "gap-2")}>
+        <AvatarTypeWrap type={"Group"}>
+          <UserAvatar username={slug} size={UserAvatarSize.large} />
+        </AvatarTypeWrap>
+        <div>
+          <h2 className="mb-0">{group.name ?? "Unknown group"}</h2>
+          {group.description && (
+            <section>
+              <p>{group.description}</p>
+            </section>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/features/groupsV2/show/GroupV2Information.tsx b/client/src/features/groupsV2/show/GroupV2Information.tsx
new file mode 100644
index 000000000..50ee0f611
--- /dev/null
+++ b/client/src/features/groupsV2/show/GroupV2Information.tsx
@@ -0,0 +1,92 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { Clock, InfoCircle, JournalAlbum } from "react-bootstrap-icons";
+import { Card, CardBody, CardHeader } from "reactstrap";
+import { TimeCaption } from "../../../components/TimeCaption.tsx";
+import GroupV2MemberListDisplay from "../members/GroupV2MemberListDisplay.tsx";
+import { useGroup } from "./GroupPageContainer.tsx";
+
+interface GroupInformationProps {
+  output?: "plain" | "card";
+}
+export default function GroupInformation({
+  output = "plain",
+}: GroupInformationProps) {
+  const { group } = useGroup();
+
+  const information = (
+    <div className={cx("d-flex", "flex-column", "gap-3")}>
+      <GroupInformationBox
+        icon={<JournalAlbum className="bi" />}
+        title="Identifier:"
+      >
+        <p className="mb-0">@{group.slug}</p>
+      </GroupInformationBox>
+      <GroupInformationBox icon={<Clock className="bi" />} title="Created:">
+        <p className="mb-0">
+          <TimeCaption datetime={group.creation_date} className={cx("fs-6")} />
+        </p>
+      </GroupInformationBox>
+      <GroupV2MemberListDisplay group={group.slug} />
+    </div>
+  );
+  return output === "plain" ? (
+    information
+  ) : (
+    <Card data-cy="project-info-card">
+      <CardHeader>
+        <div
+          className={cx(
+            "align-items-center",
+            "d-flex",
+            "justify-content-between"
+          )}
+        >
+          <h4 className="m-0">
+            <InfoCircle className={cx("me-1", "bi")} />
+            Info
+          </h4>
+        </div>
+      </CardHeader>
+      <CardBody>{information}</CardBody>
+    </Card>
+  );
+}
+
+interface GroupInformationBoxProps {
+  children: React.ReactNode;
+  icon: React.ReactNode;
+  title: React.ReactNode;
+}
+export function GroupInformationBox({
+  children,
+  icon,
+  title,
+}: GroupInformationBoxProps) {
+  return (
+    <div>
+      <p className={cx("align-items-center", "d-flex", "gap-2", "mb-0")}>
+        {icon}
+        {title}
+      </p>
+      <div className="ms-4">{children}</div>
+    </div>
+  );
+}
diff --git a/client/src/features/groupsV2/show/GroupV2Show.tsx b/client/src/features/groupsV2/show/GroupV2Show.tsx
index 5205e7d80..cebb1d3f9 100644
--- a/client/src/features/groupsV2/show/GroupV2Show.tsx
+++ b/client/src/features/groupsV2/show/GroupV2Show.tsx
@@ -16,163 +16,38 @@
  * limitations under the License.
  */
 
-import { skipToken } from "@reduxjs/toolkit/query";
-import cx from "classnames";
-import { useEffect } from "react";
-import { Pencil } from "react-bootstrap-icons";
-import {
-  Link,
-  generatePath,
-  useNavigate,
-  useParams,
-} from "react-router-dom-v5-compat";
 import { Col, Row } from "reactstrap";
-
-import { Loader } from "../../../components/Loader";
-import ContainerWrap from "../../../components/container/ContainerWrap";
-import LazyNotFound from "../../../not-found/LazyNotFound";
-import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants";
-
 import DataConnectorsBox from "../../dataConnectorsV2/components/DataConnectorsBox";
-import PermissionsGuard from "../../permissionsV2/PermissionsGuard";
-import type { GroupResponse } from "../../projectsV2/api/namespace.api";
-import {
-  useGetGroupsByGroupSlugQuery,
-  useGetNamespacesByNamespaceSlugQuery,
-} from "../../projectsV2/api/projectV2.enhanced-api";
 import ProjectV2ListDisplay from "../../projectsV2/list/ProjectV2ListDisplay";
-import GroupNotFound from "../../projectsV2/notFound/GroupNotFound";
-import { EntityPill } from "../../searchV2/components/SearchV2Results";
-import UserAvatar, { UserAvatarSize } from "../../usersV2/show/UserAvatar";
-import GroupV2MemberListDisplay from "../members/GroupV2MemberListDisplay";
-import useGroupPermissions from "../utils/useGroupPermissions.hook";
+import { useGroup } from "./GroupPageContainer.tsx";
+import GroupInformation from "./GroupV2Information.tsx";
 
 export default function GroupV2Show() {
-  const { slug } = useParams<{ slug: string }>();
-
-  const navigate = useNavigate();
-
-  const {
-    data: namespace,
-    isLoading: isLoadingNamespace,
-    error: namespaceError,
-  } = useGetNamespacesByNamespaceSlugQuery(
-    slug ? { namespaceSlug: slug } : skipToken
-  );
-  const {
-    data: group,
-    isLoading: isLoadingGroup,
-    error: groupError,
-  } = useGetGroupsByGroupSlugQuery(slug ? { groupSlug: slug } : skipToken);
-
-  const isLoading = isLoadingNamespace || isLoadingGroup;
-  const error = namespaceError ?? groupError;
-
-  useEffect(() => {
-    if (slug && namespace?.namespace_kind === "user") {
-      navigate(
-        generatePath(ABSOLUTE_ROUTES.v2.users.show, { username: slug }),
-        {
-          replace: true,
-        }
-      );
-    }
-  }, [namespace?.namespace_kind, navigate, slug]);
-
-  if (!slug) {
-    return <LazyNotFound />;
-  }
-
-  if (isLoading) {
-    return <Loader className="align-self-center" />;
-  }
-
-  if (error || !namespace || !group) {
-    return <GroupNotFound error={error} />;
-  }
+  const { group } = useGroup();
 
   return (
-    <ContainerWrap>
-      <div
-        className={cx("d-flex", "flex-column", "flex-sm-row", "gap-3", "mb-3")}
-      >
-        <div>
-          <div className={cx("d-flex", "flex-row", "flex-nowrap", "gap-2")}>
-            <div className={cx("align-items-center", "d-flex", "gap-2")}>
-              <UserAvatar
-                username={group.name || slug}
-                size={UserAvatarSize.medium}
-              />
-              <h2 className="mb-0">{group.name ?? "Unknown group"}</h2>
-            </div>
-            <div className={cx("align-items-center", "d-flex")}>
-              <EntityPill entityType="Group" size="sm" />
-            </div>
-          </div>
-          <p className={cx("fst-italic", "mb-0")}>{`@${slug}`}</p>
-        </div>
-        <div className={cx("mb-0", "ms-sm-auto")}>
-          <GroupSettingsButton group={group} />
-        </div>
-      </div>
-
-      {group.description && (
-        <section>
-          <p>{group.description}</p>
-        </section>
-      )}
-      <section>
-        <h4>Group Members</h4>
-        <GroupV2MemberListDisplay group={slug} />
-      </section>
-
-      <section>
-        <h4>Group Projects</h4>
-        <ProjectV2ListDisplay
-          namespace={slug}
-          pageParam="projects_page"
-          emptyListElement={<p>No visible projects.</p>}
-        />
-      </section>
-
-      <section className="mt-3">
-        <Row>
-          <Col className="order-3" xs={12} xl={8}>
+    <Row className="g-4">
+      <Col xs={12} md={8} xl={9}>
+        <Row className="g-4">
+          <Col xs={12}>
+            <ProjectV2ListDisplay
+              namespace={group.slug}
+              pageParam="projects_page"
+              namespaceKind="group"
+            />
+          </Col>
+          <Col className="order-3" xs={12}>
             <DataConnectorsBox
-              namespace={slug}
+              namespace={group.slug}
               namespaceKind="group"
               pageParam="data_connectors_page"
             />
           </Col>
         </Row>
-      </section>
-    </ContainerWrap>
-  );
-}
-
-interface GroupSettingsButtonProps {
-  group: GroupResponse;
-}
-
-function GroupSettingsButton({ group }: GroupSettingsButtonProps) {
-  const { permissions } = useGroupPermissions({ groupSlug: group.slug });
-
-  return (
-    <PermissionsGuard
-      enabled={
-        <Link
-          to={generatePath(ABSOLUTE_ROUTES.v2.groups.show.settings, {
-            slug: group.slug,
-          })}
-          className={cx("btn", "btn-outline-primary")}
-        >
-          <Pencil className={cx("bi", "me-1")} />
-          Edit settings
-        </Link>
-      }
-      disabled={null}
-      requestedPermission="write"
-      userPermissions={permissions}
-    />
+      </Col>
+      <Col xs={12} md={4} xl={3}>
+        <GroupInformation output="card" />
+      </Col>
+    </Row>
   );
 }
diff --git a/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx b/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx
index 7787793e5..ea4b36d34 100644
--- a/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx
+++ b/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx
@@ -17,42 +17,36 @@
  */
 
 import cx from "classnames";
-import { ReactNode, useCallback, useEffect, useMemo } from "react";
-import { Globe2, Lock } from "react-bootstrap-icons";
-import {
-  Link,
-  generatePath,
-  useSearchParams,
-} from "react-router-dom-v5-compat";
-import { Card, CardBody, Col, Row } from "reactstrap";
+import { useCallback, useEffect, useMemo } from "react";
+import { Folder, PlusLg } from "react-bootstrap-icons";
+import { Link, useSearchParams } from "react-router-dom-v5-compat";
+import { Badge, Card, CardBody, CardHeader, ListGroup } from "reactstrap";
 
 import { Loader } from "../../../components/Loader";
 import Pagination from "../../../components/Pagination";
-import { TimeCaption } from "../../../components/TimeCaption";
 import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
-import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants";
-import type { Project } from "../api/projectV2.api";
-import {
-  useGetNamespacesByNamespaceSlugQuery,
-  useGetProjectsQuery,
-} from "../api/projectV2.enhanced-api";
-import ClampedParagraph from "../../../components/clamped/ClampedParagraph";
-
-const DEFAULT_PER_PAGE = 12;
+import useGroupPermissions from "../../groupsV2/utils/useGroupPermissions.hook.ts";
+import PermissionsGuard from "../../permissionsV2/PermissionsGuard.tsx";
+import { useGetUserQuery } from "../../usersV2/api/users.api.ts";
+import { NamespaceKind } from "../api/namespace.api.ts";
+import { useGetProjectsQuery } from "../api/projectV2.enhanced-api";
+import ProjectShortHandDisplay from "../show/ProjectShortHandDisplay.tsx";
+
+const DEFAULT_PER_PAGE = 5;
 const DEFAULT_PAGE_PARAM = "page";
 
 interface ProjectListDisplayProps {
   namespace?: string;
   pageParam?: string;
   perPage?: number;
-  emptyListElement?: ReactNode;
+  namespaceKind: NamespaceKind;
 }
 
 export default function ProjectListDisplay({
   namespace: ns,
   pageParam: pageParam_,
   perPage: perPage_,
-  emptyListElement,
+  namespaceKind,
 }: ProjectListDisplayProps) {
   const pageParam = useMemo(
     () => (pageParam_ ? pageParam_ : DEFAULT_PAGE_PARAM),
@@ -115,120 +109,179 @@ export default function ProjectListDisplay({
     }
   }, [data?.totalPages, page, pageParam, setSearchParams]);
 
-  if (isLoading)
-    return (
-      <div className={cx("d-flex", "justify-content-center", "w-100")}>
-        <div className={cx("d-flex", "flex-column")}>
-          <Loader />
-          <div>Retrieving projects...</div>
-        </div>
-      </div>
-    );
-
   if (error || data == null) {
     return <RtkOrNotebooksError error={error} dismissible={false} />;
   }
 
-  if (!data.total) {
-    return emptyListElement ?? <p>The project list is empty.</p>;
-  }
+  const emptyListElement =
+    namespaceKind === "group" ? (
+      <AddEmptyListForGroupNamespace namespace={ns ?? ""} />
+    ) : (
+      <AddEmptyListForUserNamespace namespace={ns ?? ""} />
+    );
 
   return (
     <div className={cx("d-flex", "flex-column", "gap-3")}>
-      <Row
-        className={cx("row-cols-1", "row-cols-md-2", "row-cols-xxl-3", "g-3")}
-      >
-        {data.projects?.map((project) => (
-          <ProjectV2ListProject key={project.id} project={project} />
-        ))}
-      </Row>
-      <Pagination
-        currentPage={data.page}
-        perPage={perPage}
-        totalItems={data.total}
-        onPageChange={onPageChange}
+      <Card className="h-100" data-cy="project-box">
+        <ProjectBoxHeader
+          totalProjects={data.total ?? 0}
+          namespaceKind={namespaceKind}
+          namespace={ns ?? ""}
+        />
+        <CardBody>
+          {isLoading && (
+            <div className={cx("d-flex", "justify-content-center", "w-100")}>
+              <div className={cx("d-flex", "flex-column")}>
+                <Loader />
+                <div>Retrieving projects...</div>
+              </div>
+            </div>
+          )}
+          {!data.total && emptyListElement}
+          {data.projects.length > 0 && (
+            <>
+              <div className={cx("d-flex", "flex-column", "gap-3")}>
+                <ListGroup flush data-cy="dashboard-project-list">
+                  {data?.projects?.map((project) => (
+                    <ProjectShortHandDisplay
+                      key={project.id}
+                      project={project}
+                    />
+                  ))}
+                </ListGroup>
+              </div>
+              <Pagination
+                currentPage={data.page}
+                perPage={perPage}
+                totalItems={data.total}
+                onPageChange={onPageChange}
+                className={cx(
+                  "d-flex",
+                  "justify-content-center",
+                  "rk-search-pagination"
+                )}
+              />
+            </>
+          )}
+        </CardBody>
+      </Card>
+    </div>
+  );
+}
+
+interface ProjectBoxHeaderProps {
+  totalProjects: number;
+  namespace: string;
+  namespaceKind: NamespaceKind;
+}
+function ProjectBoxHeader({
+  totalProjects,
+  namespaceKind,
+  namespace,
+}: ProjectBoxHeaderProps) {
+  return (
+    <CardHeader>
+      <div
         className={cx(
+          "align-items-center",
           "d-flex",
-          "justify-content-center",
-          "rk-search-pagination"
+          "justify-content-between"
         )}
-      />
-    </div>
+      >
+        <div className={cx("align-items-center", "d-flex")}>
+          <h4 className={cx("mb-0", "me-2")}>
+            <Folder className={cx("me-1", "bi")} />
+            Projects
+          </h4>
+          <Badge>{totalProjects}</Badge>
+        </div>
+        {namespaceKind === "group" && (
+          <AddButtonForGroupNamespace namespace={namespace} />
+        )}
+        {namespaceKind === "user" && (
+          <AddButtonForUserNamespace namespace={namespace} />
+        )}
+      </div>
+    </CardHeader>
   );
 }
 
-interface ProjectV2ListProjectProps {
-  project: Project;
+function AddButtonForGroupNamespace({ namespace }: { namespace: string }) {
+  const { permissions } = useGroupPermissions({ groupSlug: namespace });
+
+  return (
+    <PermissionsGuard
+      disabled={null}
+      enabled={
+        <Link
+          className={cx(
+            "btn",
+            "btn-outline-primary",
+            "btn-sm",
+            "ms-auto",
+            "my-auto"
+          )}
+          to="/v2/projects/new"
+        >
+          <PlusLg className="bi" id="createPlus" />
+        </Link>
+      }
+      requestedPermission="write"
+      userPermissions={permissions}
+    />
+  );
 }
-function ProjectV2ListProject({ project }: ProjectV2ListProjectProps) {
-  const { data: namespaceData } = useGetNamespacesByNamespaceSlugQuery({
-    namespaceSlug: project.namespace,
-  });
 
-  const {
-    name,
-    namespace,
-    description,
-    visibility,
-    creation_date: creationDate,
-  } = project;
-
-  const projectUrl = generatePath(ABSOLUTE_ROUTES.v2.projects.show.root, {
-    namespace: project.namespace,
-    slug: project.slug,
-  });
-  const namespaceUrl =
-    namespaceData && namespaceData.namespace_kind === "group"
-      ? generatePath(ABSOLUTE_ROUTES.v2.groups.show.root, { slug: namespace })
-      : generatePath(ABSOLUTE_ROUTES.v2.users.show, {
-          username: project.namespace,
-        });
+function AddButtonForUserNamespace({ namespace }: { namespace: string }) {
+  const { data: currentUser } = useGetUserQuery();
+
+  if (currentUser?.isLoggedIn && currentUser.username === namespace) {
+    return (
+      <Link
+        className={cx(
+          "btn",
+          "btn-outline-primary",
+          "btn-sm",
+          "ms-auto",
+          "my-auto"
+        )}
+        to="/v2/projects/new"
+      >
+        <PlusLg className="bi" id="createPlus" />
+      </Link>
+    );
+  }
+  return null;
+}
+
+function AddEmptyListForGroupNamespace({ namespace }: { namespace: string }) {
+  const { permissions } = useGroupPermissions({ groupSlug: namespace });
 
   return (
-    <Col>
-      <Card className="h-100" data-cy="project-card">
-        <CardBody className={cx("d-flex", "flex-column")}>
-          <h5>
-            <Link to={projectUrl}>{name}</Link>
-          </h5>
-          <p>
-            <Link to={namespaceUrl}>
-              {"@"}
-              {namespace}
-            </Link>
-          </p>
-          {description && <ClampedParagraph>{description}</ClampedParagraph>}
-          <div
-            className={cx(
-              "align-items-center",
-              "d-flex",
-              "flex-wrap",
-              "gap-2",
-              "justify-content-between",
-              "mt-auto"
-            )}
-          >
-            <div>
-              {visibility.toLowerCase() === "private" ? (
-                <>
-                  <Lock className={cx("bi", "me-1")} />
-                  Private
-                </>
-              ) : (
-                <>
-                  <Globe2 className={cx("bi", "me-1")} />
-                  Public
-                </>
-              )}
-            </div>
-            <TimeCaption
-              datetime={creationDate}
-              prefix="Created"
-              enableTooltip
-            />
-          </div>
-        </CardBody>
-      </Card>
-    </Col>
+    <PermissionsGuard
+      disabled={<p>This group has no visible projects.</p>}
+      enabled={
+        <p>
+          Collaborate on projects with anyone, with data, code, and compute
+          together in one place.
+        </p>
+      }
+      requestedPermission="write"
+      userPermissions={permissions}
+    />
   );
 }
+
+function AddEmptyListForUserNamespace({ namespace }: { namespace: string }) {
+  const { data: currentUser } = useGetUserQuery();
+
+  if (currentUser?.isLoggedIn && currentUser.username === namespace) {
+    return (
+      <p>
+        Collaborate on projects with anyone, with data, code, and compute
+        together in one place.
+      </p>
+    );
+  }
+  return <p>This user has no visible personal projects.</p>;
+}
diff --git a/client/src/features/rootV2/RootV2.tsx b/client/src/features/rootV2/RootV2.tsx
index 19b8a5620..617ac28ab 100644
--- a/client/src/features/rootV2/RootV2.tsx
+++ b/client/src/features/rootV2/RootV2.tsx
@@ -26,6 +26,7 @@ import { RELATIVE_ROUTES } from "../../routing/routes.constants";
 import useAppDispatch from "../../utils/customHooks/useAppDispatch.hook";
 import useAppSelector from "../../utils/customHooks/useAppSelector.hook";
 import { setFlag } from "../../utils/feature-flags/featureFlags.slice";
+import LazyGroupContainer from "../groupsV2/LazyGroupContainer.tsx";
 
 import LazyProjectPageV2Show from "../ProjectPageV2/LazyProjectPageV2Show";
 import LazyProjectPageOverview from "../ProjectPageV2/ProjectPageContent/LazyProjectPageOverview";
@@ -33,7 +34,7 @@ import LazyProjectPageSettings from "../ProjectPageV2/ProjectPageContent/LazyPro
 import LazyConnectedServicesPage from "../connectedServices/LazyConnectedServicesPage";
 import LazyDashboardV2 from "../dashboardV2/LazyDashboardV2";
 import LazyHelpV2 from "../dashboardV2/LazyHelpV2";
-import LazyGroupV2Show from "../groupsV2/LazyGroupV2Show";
+import LazyGroupV2Overview from "../groupsV2/LazyGroupV2Overview.tsx";
 import LazyGroupV2New from "../projectsV2/LazyGroupNew";
 import LazyProjectV2New from "../projectsV2/LazyProjectV2New";
 import LazyProjectV2ShowByProjectId from "../projectsV2/LazyProjectV2ShowByProjectId";
@@ -143,11 +144,13 @@ function GroupsV2Routes() {
         element={<LazyGroupV2New />}
       />
       <Route path={RELATIVE_ROUTES.v2.groups.show.root}>
-        <Route index element={<LazyGroupV2Show />} />
-        <Route
-          path={RELATIVE_ROUTES.v2.groups.show.settings}
-          element={<LazyGroupV2Settings />}
-        />
+        <Route element={<LazyGroupContainer />}>
+          <Route index element={<LazyGroupV2Overview />} />
+          <Route
+            path={RELATIVE_ROUTES.v2.groups.show.settings}
+            element={<LazyGroupV2Settings />}
+          />
+        </Route>
       </Route>
       <Route
         path="*"
diff --git a/client/src/features/usersV2/show/UserAvatar.tsx b/client/src/features/usersV2/show/UserAvatar.tsx
index 0623a6dfd..f6e5150dc 100644
--- a/client/src/features/usersV2/show/UserAvatar.tsx
+++ b/client/src/features/usersV2/show/UserAvatar.tsx
@@ -17,6 +17,8 @@
  */
 
 import cx from "classnames";
+import { CSSProperties, ReactNode } from "react";
+import { EntityPill } from "../../searchV2/components/SearchV2Results.tsx";
 
 import styles from "./UserAvatar.module.scss";
 
@@ -76,3 +78,26 @@ function generatePastelColor(input: string) {
 function hashStringToNumber(str: string) {
   return str.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
 }
+
+interface AvatarType {
+  type: "User" | "Group";
+  children: ReactNode;
+}
+export function AvatarTypeWrap({ type, children }: AvatarType) {
+  const styles: CSSProperties = {
+    width: "75px",
+    height: "65px",
+  };
+
+  return (
+    <div
+      style={styles}
+      className={cx("d-flex", "align-items-end", "position-relative")}
+    >
+      {children}
+      <div style={{ right: "0" }} className={cx("position-absolute", "top-0")}>
+        <EntityPill entityType={type} size="sm" />
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/features/usersV2/show/UserShow.tsx b/client/src/features/usersV2/show/UserShow.tsx
index 9801e88c2..3c9cd67e6 100644
--- a/client/src/features/usersV2/show/UserShow.tsx
+++ b/client/src/features/usersV2/show/UserShow.tsx
@@ -128,9 +128,7 @@ export default function UserShow() {
         <ProjectV2ListDisplay
           namespace={username}
           pageParam="projects_page"
-          emptyListElement={
-            <p>{name ?? username} has no visible personal projects.</p>
-          }
+          namespaceKind="user"
         />
       </section>
       <section className="mt-3">
diff --git a/tests/cypress/e2e/groupV2.spec.ts b/tests/cypress/e2e/groupV2.spec.ts
index d98ae4c3d..bafd9b08d 100644
--- a/tests/cypress/e2e/groupV2.spec.ts
+++ b/tests/cypress/e2e/groupV2.spec.ts
@@ -122,8 +122,7 @@ describe("Edit v2 group", () => {
     cy.contains("test 2 group-v2").should("be.visible").click();
     cy.wait("@readGroupV2");
     cy.contains("test 2 group-v2").should("be.visible");
-    cy.wait("@getGroupV2Permissions");
-    cy.contains("Edit settings").should("be.visible").click();
+    cy.getDataCy("nav-link-settings").should("be.visible").click();
     cy.getDataCy("group-name-input").clear().type("new name");
     cy.getDataCy("group-slug-input").clear().type("new-slug");
     cy.getDataCy("group-description-input").clear().type("new description");
@@ -159,8 +158,7 @@ describe("Edit v2 group", () => {
     cy.contains("test 2 group-v2").should("be.visible").click();
     cy.wait("@readGroupV2");
     cy.contains("test 2 group-v2").should("be.visible");
-    cy.wait("@getGroupV2Permissions");
-    cy.contains("Edit settings").should("be.visible").click();
+    cy.getDataCy("nav-link-settings").should("be.visible").click();
     cy.contains("@user1").should("be.visible");
     cy.contains("user3-uuid").should("be.visible");
     fixtures
@@ -206,8 +204,7 @@ describe("Edit v2 group", () => {
     cy.contains("test 2 group-v2").should("be.visible").click();
     cy.wait("@readGroupV2");
     cy.contains("test 2 group-v2").should("be.visible");
-    cy.wait("@getGroupV2Permissions");
-    cy.contains("Edit settings").should("be.visible").click();
+    cy.getDataCy("nav-link-settings").should("be.visible").click();
     cy.getDataCy("group-description-input").clear().type("new description");
     cy.get("button").contains("Delete").should("be.visible").click();
     cy.get("button")
@@ -225,7 +222,9 @@ describe("Edit v2 group", () => {
       fixture: "groupV2/list-groupV2-post-delete.json",
       name: "listGroupV2PostDelete",
     });
-    cy.contains("Group with slug test-2-group-v2 does not exist");
+    cy.contains("Group test 2 group-v2 has been successfully deleted.").should(
+      "be.visible"
+    );
   });
 });