diff --git a/assets/config/datastoreNavItems.ts b/assets/config/datastoreNavItems.ts
index 20746dd2..2f36eef7 100644
--- a/assets/config/datastoreNavItems.ts
+++ b/assets/config/datastoreNavItems.ts
@@ -55,6 +55,11 @@ export const datastoreNavItems = (currentDatastore?: Datastore): MainNavigationP
         });
     }
 
+    navItems.push({
+        text: t("espaceco"),
+        linkProps: routes.espaceco_community_list().link,
+    });
+
     navItems.push(assistanceNavItems(tNavItems));
 
     return navItems;
@@ -62,7 +67,7 @@ export const datastoreNavItems = (currentDatastore?: Datastore): MainNavigationP
 
 // traductions
 export const { i18n } = declareComponentKeys<
-    "dashboard" | "data" | "members" | "manage_storage" | "consumption_monitoring" | "permissions_granted" | "my_account" | "my_access_keys"
+    "dashboard" | "data" | "members" | "manage_storage" | "consumption_monitoring" | "permissions_granted" | "my_account" | "my_access_keys" | "espaceco"
 >()("datastoreNavItems");
 
 export const datastoreNavItemsFrTranslations: Translations<"fr">["datastoreNavItems"] = {
@@ -74,6 +79,7 @@ export const datastoreNavItemsFrTranslations: Translations<"fr">["datastoreNavIt
     permissions_granted: "Permissions accordées",
     my_account: "Mon compte",
     my_access_keys: "Mes clés d’accès",
+    espaceco: "Espace Collaboratif",
 };
 
 export const datastoreNavItemsEnTranslations: Translations<"en">["datastoreNavItems"] = {
@@ -85,4 +91,5 @@ export const datastoreNavItemsEnTranslations: Translations<"en">["datastoreNavIt
     permissions_granted: undefined,
     my_account: undefined,
     my_access_keys: undefined,
+    espaceco: undefined,
 };
diff --git a/assets/espaceco/pages/communities/Communities.tsx b/assets/espaceco/pages/communities/Communities.tsx
index 22580128..11e755dd 100644
--- a/assets/espaceco/pages/communities/Communities.tsx
+++ b/assets/espaceco/pages/communities/Communities.tsx
@@ -4,9 +4,12 @@ import { Pagination } from "@codegouvfr/react-dsfr/Pagination";
 import RadioButtons from "@codegouvfr/react-dsfr/RadioButtons";
 import { useQuery } from "@tanstack/react-query";
 import { FC, useMemo, useState } from "react";
+
 import { CommunityListFilter, GetResponse, arrCommunityListFilters } from "../../../@types/app_espaceco";
 import { CommunityResponseDTO } from "../../../@types/espaceco";
+import AppLayout from "../../../components/Layout/AppLayout";
 import Skeleton from "../../../components/Utils/Skeleton";
+import { datastoreNavItems } from "../../../config/datastoreNavItems";
 import { useTranslation } from "../../../i18n/i18n";
 import RQKeys from "../../../modules/espaceco/RQKeys";
 import { CartesApiException } from "../../../modules/jsonFetch";
@@ -17,6 +20,8 @@ import SearchCommunity from "./SearchCommunity";
 
 const defaultLimit = 10;
 
+const navItems = datastoreNavItems();
+
 type QueryParamsType = {
     page: number;
     limit: number;
@@ -66,7 +71,7 @@ const Communities: FC = () => {
     };
 
     return (
-        <div className={fr.cx("fr-container")}>
+        <AppLayout navItems={navItems} documentTitle={t("title")}>
             <h1>{t("title")}</h1>
             <div>
                 {communityQuery.isError && <Alert severity="error" closable={false} title={communityQuery.error?.message} />}
@@ -151,7 +156,7 @@ const Communities: FC = () => {
                     )}
                 </div>
             </div>
-        </div>
+        </AppLayout>
     );
 };