diff --git a/layout-webapp/src/main/resources/locale/portlet/SiteManagement_en.properties b/layout-webapp/src/main/resources/locale/portlet/SiteManagement_en.properties
index 6903e9be6..3815fac01 100644
--- a/layout-webapp/src/main/resources/locale/portlet/SiteManagement_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/SiteManagement_en.properties
@@ -8,10 +8,13 @@ siteManagement.label.confirm=Confirm
 siteManagement.label.confirmDelete=Delete site
 siteManagement.label.confirmDelete.message=Are you sure you want to delete "{0}" site?
 siteManagement.drawer.properties.title=Site properties
+siteManagement.drawer.addSite.title=Add Site
 siteManagement.label.properties=Properties
 siteManagement.label.siteName.title=Site name
 siteManagement.label.siteLabel.title=Site label
+siteManagement.label.siteLabel.placeholder=Give a name to your site
 siteManagement.label.siteDescription.title=Site description
+siteManagement.label.siteDescription.placeholder=Describe purpose to inform users via the sidebar
 siteManagement.label.editLayout=Layout
 siteManagement.label.manageAccess=Permissions
 siteManagement.label.managePermissions=Manage permissions
@@ -33,6 +36,7 @@ siteManagement.label.btn.save=Save
 siteManagement.label.btn.cancel=Cancel
 siteManagement.label.btn.next=Next
 siteManagement.label.btn.add=Add
+siteManagement.label.btn.previous=Previous
 siteManagement.label.createSite.error=Error while creating site
 siteManagement.label.createSite.success=Site created successfully
 siteManagement.label.siteTemplate.drawer.title=Select site template
@@ -49,3 +53,21 @@ sites.label.siteNavigation=Site navigation
 sites.filter.placeholder=Filter by name, description
 sites.label.system.noDelete=This default site cannot be deleted
 sites.menu.open=Open
+sites.urlSlug.label=URL Slug
+sites.urlSlug.caption=This can't be updated once created
+sites.urlSlug.placeholder=add your URN
+sites.urlSlug.alreadyExists=Already exists
+sites.urlSlug.badFormat=Only alphanumeric characters, '-' or '_' are accepted
+sites.stepper.properties=Properties
+sites.stepper.permissions=Permissions
+sites.stepper.start=Start
+sites.selectTemplate=Select a template
+sites.permissionSuggester.placeholder=Enter group name
+sites.permissionSuggester.noData=No data
+sites.permission.administrators=Administrators
+sites.permission.users=Users
+sites.permission.guests=Guests
+sites.permission.groupMembers=Group Members
+sites.permission.everyone=Any
+
+
diff --git a/layout-webapp/src/main/webapp/images/defaultSiteBanner.webp b/layout-webapp/src/main/webapp/images/defaultSiteBanner.webp
new file mode 100644
index 000000000..86b3f1c34
Binary files /dev/null and b/layout-webapp/src/main/webapp/images/defaultSiteBanner.webp differ
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageAccessPermission.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageAccessPermission.vue
index 68269a3bb..640bad24b 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageAccessPermission.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageAccessPermission.vue
@@ -55,7 +55,6 @@
     </template>
   </div>
 </template>
-
 <script>
 export default {
   props: {
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManagePermissionsDrawer.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManagePermissionsDrawer.vue
index 8265ba335..51be152d5 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManagePermissionsDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManagePermissionsDrawer.vue
@@ -20,15 +20,16 @@
   <exo-drawer
     ref="managePermissionsDrawer"
     id="managePermissionsDrawer"
+    v-model="drawer"
     :right="!$vuetify.rtl"
     :allow-expand="isSite"
     :go-back-button="goBackButton"
     eager
     @closed="close">
-    <template slot="title">
+    <template #title>
       {{ drawerTitle }}
     </template>
-    <template slot="content">
+    <template v-if="drawer" #content>
       <v-card class="mx-4 my-4 px-2 py-2 elevation-0">
         <manage-edit-permission
           :permission="editPermission"
@@ -63,6 +64,7 @@ export default {
 
   data() {
     return {
+      drawer: false,
       loading: false,
       navigationNode: null,
       editPermission: {
@@ -211,7 +213,7 @@ export default {
       return this.$siteLayoutService.updateSitePermissions(this.site.siteType, this.site.name, this.editPermissionChanged && siteEditPermission || null, this.accessPermissionChanged && siteAccessPermissions || null)
         .then(() => {
           this.$root.$emit('alert-message', this.$t('siteManagement.label.updatePermission.success'), 'success');
-          this.$root.$emit('refresh-sites');
+          this.$root.$emit('site-updated');
           this.close();
         }).catch((e) => {
           const message = e.message ==='401' &&  this.$t('siteManagement.label.updatePermission.unauthorized') || this.$t('siteManagement.label.updatePermission.error');
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/SiteAccessPermissions.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/SiteAccessPermissions.vue
new file mode 100644
index 000000000..6d70c2d2c
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/SiteAccessPermissions.vue
@@ -0,0 +1,225 @@
+<!--
+
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2020 - 2025 Meeds Association contact@meeds.io
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<template>
+  <div class="d-flex flex-column">
+    <div class="font-weight-bold mb-2">
+      {{ $t('siteManagement.label.whoCanView') }}
+    </div>
+    <v-checkbox
+      v-model="isAdministrationPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1"
+      disabled>
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.administrators') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <v-checkbox
+      v-model="isUserPermissions"
+      :disabled="isAnyPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1">
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.users') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <v-checkbox
+      v-model="isGuestPermissions"
+      :disabled="isAnyPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1">
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.guests') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <v-checkbox
+      v-model="isAnyPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1">
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.everyone') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <v-checkbox
+      v-model="isCustomPermissions"
+      :disabled="isAnyPermissions"
+      on-icon="fa-check-square"
+      off-icon="far fa-square"
+      class="mt-0 ms-n1"
+      @click="specificGroupEntries = null">
+      <template #label>
+        <div class="text-body">
+          {{ $t('sites.permission.groupMembers') }}
+        </div>
+      </template>
+    </v-checkbox>
+    <exo-identity-suggester
+      v-if="isCustomPermissions"
+      ref="targetPermissions"
+      v-model="specificGroupEntries"
+      :labels="suggesterLabels"
+      :search-options="{filterType: 'all'}"
+      name="specificGroupPermissions"
+      class="mb-n3"
+      include-spaces
+      include-groups
+      all-groups-for-admin
+      multiple
+      required />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+  },
+  data: () => ({
+    administratorsPermission: '/platform/administrators',
+    usersPermission: '/platform/users',
+    externalsPermission: '/platform/externals',
+    everyonePermission: 'Everyone',
+    isAdministrationPermissions: true,
+    isUserPermissions: false,
+    isGuestPermissions: false,
+    isAnyPermissions: false,
+    isCustomPermissions: false,
+    specificGroupEntries: null,
+  }),
+  computed: {
+    isSpecificGroup() {
+      return !!this.specificGroupEntries?.length;
+    },
+    permissions() {
+      const permissions = [];
+      if (this.isAnyPermissions) {
+        permissions.push(this.everyonePermission);
+      } else {
+        if (this.isUserPermissions) {
+          permissions.push(`*:${this.usersPermission}`);
+        }
+        if (this.isGuestPermissions) {
+          permissions.push(`*:${this.guestsPermission}`);
+        }
+        if (this.specificGroupEntries?.length) {
+          const specificGroupEntries = this.specificGroupEntries?.map?.(g => g.groupId)?.filter?.(g => g) || [];
+          permissions.push(...specificGroupEntries.map(g => `*:${g}`));
+        }
+        if (!permissions.length) {
+          permissions.push(`*:${this.administratorsPermission}`);
+        }
+      }
+      return permissions;
+    },
+    suggesterLabels() {
+      return {
+        placeholder: this.$t('sites.permissionSuggester.placeholder'),
+        noDataLabel: this.$t('sites.permissionSuggester.noData')
+      };
+    },
+  },
+  watch: {
+    permissions() {
+      this.$emit('input', this.permissions);
+    },
+    isAnyPermissions() {
+      if (this.isAnyPermissions) {
+        this.isAdministrationPermissions = true;
+        this.isUserPermissions = true;
+        this.isGuestPermissions = true;
+        this.isCustomPermissions = false;
+      }
+    },
+  },
+  created() {
+    const permissions = this.value?.slice?.();
+    this.isAnyPermissions = permissions?.find?.(p => p === this.everyonePermission) && true || false;
+    this.isUserPermissions = permissions?.find?.(p => p === this.usersPermission) && true || false;
+    this.isGuestPermissions = permissions?.find?.(p => p === this.externalsPermission) && true || false;
+    this.specificGroupEntries = [];
+
+    const specificGroupEntries = permissions?.filter?.(p => {
+      const g = p.includes(':') ? p.split(':')[1] : p;
+      return g !== this.administratorsPermission
+        && g !== this.usersPermission
+        && g !== this.externalsPermission
+        && g !== this.everyonePermission;
+    }) || null;
+    this.isCustomPermissions = !!specificGroupEntries?.length;
+    if (specificGroupEntries?.length) {
+      specificGroupEntries.forEach(this.retrieveObject);
+    }
+  },
+  methods: {
+    async retrieveObject(groupId) {
+      groupId = groupId.includes(':') ? groupId.split(':')[1] : groupId;
+      if (groupId.indexOf('/spaces/') === 0) {
+        const space = await this.$spaceService.getSpaceByGroupId(groupId);
+        if (space) {
+          this.specificGroupEntries.push({
+            id: `space:${space.prettyName}`,
+            remoteId: space.prettyName,
+            spaceId: space.id,
+            groupId: space.groupId,
+            providerId: 'space',
+            displayName: space.displayName,
+            profile: {
+              fullName: space.displayName,
+              originalName: space.shortName,
+              avatarUrl: space.avatarUrl ? space.avatarUrl : `/portal/rest/v1/social/spaces/${space.prettyName}/avatar`,
+            },
+          });
+        }
+      } else {
+        const group = await this.$identityService.getIdentityByProviderIdAndRemoteId('group', groupId);
+        if (group) {
+          this.specificGroupEntries.push({
+            id: `group:${group.remoteId}`,
+            remoteId: group.remoteId,
+            spaceId: groupId,
+            groupId: groupId,
+            providerId: 'group',
+            displayName: group.profile?.fullname,
+            profile: {
+              fullName: group.profile?.fullname,
+              originalName: group.profile?.fullname,
+            },
+          });
+        }
+      }
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/SiteEditPermission.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/SiteEditPermission.vue
new file mode 100644
index 000000000..dfb544507
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/SiteEditPermission.vue
@@ -0,0 +1,153 @@
+<!--
+
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2020 - 2025 Meeds Association contact@meeds.io
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<template>
+  <div class="d-flex flex-column">
+    <div class="font-weight-bold mb-2">
+      {{ $t('siteManagement.label.whoCanEdit') }}
+    </div>
+    <v-radio-group v-model="isAdministrationPermissions" class="mt-0">
+      <v-radio
+        :value="true"
+        class="mt-0 ms-n1">
+        <template #label>
+          <div class="text-body">
+            {{ $t('sites.permission.administrators') }}
+          </div>
+        </template>
+      </v-radio>
+      <v-radio
+        :value="false"
+        class="mt-0 ms-n1">
+        <template #label>
+          <div class="text-body">
+            {{ $t('sites.permission.groupMembers') }}
+          </div>
+        </template>
+      </v-radio>
+    </v-radio-group>
+    <exo-identity-suggester
+      v-if="!isAdministrationPermissions"
+      ref="targetPermissions"
+      v-model="specificGroupEntry"
+      :labels="suggesterLabels"
+      :search-options="{filterType: 'all'}"
+      name="specificGroupPermission"
+      class="mb-n3 mt-n3"
+      include-spaces
+      include-groups
+      all-groups-for-admin
+      required />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+  },
+  data: () => ({
+    administratorsPermission: '/platform/administrators',
+    isAdministrationPermissions: true,
+    specificGroupEntry: null,
+  }),
+  computed: {
+    isSpecificGroup() {
+      return this.specificGroupEntry;
+    },
+    permission() {
+      if (!this.isAdministrationPermissions && this.specificGroupEntry?.groupId) {
+        return `*:${this.specificGroupEntry.groupId}`;
+      } else {
+        return `*:${this.administratorsPermission}`;
+      }
+    },
+    suggesterLabels() {
+      return {
+        placeholder: this.$t('sites.permissionSuggester.placeholder'),
+        noDataLabel: this.$t('sites.permissionSuggester.noData')
+      };
+    },
+  },
+  watch: {
+    permission() {
+      this.$emit('input', this.permission);
+    },
+    isAdministrationPermissions() {
+      if (this.isAdministrationPermissions) {
+        this.specificGroupEntry = null;
+      }
+    },
+  },
+  async created() {
+    const permission = this.value?.includes?.(':') ? this.value?.split?.(':')?.[1] : this.value;
+    this.isAdministrationPermissions = permission === this.administratorsPermission;
+    if (this.isAdministrationPermissions) {
+      this.specificGroupEntry = null;
+    } else if (permission) {
+      this.specificGroupEntry = await this.retrieveObject(permission);
+    } else {
+      this.isAdministrationPermissions = true;
+      this.specificGroupEntry = null;
+    }
+  },
+  methods: {
+    async retrieveObject(groupId) {
+      groupId = groupId.includes(':') ? groupId.split(':')[1] : groupId;
+      if (groupId.indexOf('/spaces/') === 0) {
+        const space = await this.$spaceService.getSpaceByGroupId(groupId);
+        if (space) {
+          this.specificGroupEntries.push({
+            id: `space:${space.prettyName}`,
+            remoteId: space.prettyName,
+            spaceId: space.id,
+            groupId: space.groupId,
+            providerId: 'space',
+            displayName: space.displayName,
+            profile: {
+              fullName: space.displayName,
+              originalName: space.shortName,
+              avatarUrl: space.avatarUrl ? space.avatarUrl : `/portal/rest/v1/social/spaces/${space.prettyName}/avatar`,
+            },
+          });
+        }
+      } else {
+        const group = await this.$identityService.getIdentityByProviderIdAndRemoteId('group', groupId);
+        if (group) {
+          this.specificGroupEntries.push({
+            id: `group:${group.remoteId}`,
+            remoteId: group.remoteId,
+            spaceId: groupId,
+            groupId: groupId,
+            providerId: 'group',
+            displayName: group.profile?.fullname,
+            profile: {
+              fullName: group.profile?.fullname,
+              originalName: group.profile?.fullname,
+            },
+          });
+        }
+      }
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/NodeIconPickerDrawer.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/NodeIconPickerDrawer.vue
index 9ee6bb4f6..cf06fe84b 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/NodeIconPickerDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/NodeIconPickerDrawer.vue
@@ -20,22 +20,16 @@
   <exo-drawer
     ref="nodeIconPickerDrawer"
     id="nodeIconPickerDrawer"
+    v-model="drawer"
     :right="!$vuetify.rtl"
-    eager
     :allow-expand="expanded"
+    go-back-button
+    eager
     @closed="close">
-    <template slot="title">
-      <div class="d-flex">
-        <v-icon
-          size="16"
-          class="clickable"
-          @click="close">
-          fas fa-arrow-left
-        </v-icon>
-        <span class="ms-2"> {{ $t('siteNavigation.nodeIconPickerDrawer.title') }}</span>
-      </div>
+    <template #title>
+      {{ $t('siteNavigation.nodeIconPickerDrawer.title') }}
     </template>
-    <template slot="content">
+    <template v-if="drawer" #content>
       <v-card-text class="d-flex pb-2">
         <v-text-field
           v-model="keyword"
@@ -127,8 +121,6 @@
     </template>
   </exo-drawer>
 </template>
-
-
 <script>
 export default {
   props: {
@@ -139,6 +131,7 @@ export default {
   },
   data() {
     return {
+      drawer: false,
       allIcons: {},
       iconsNumber: 16,
       showMore: false,
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationDrawer.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationDrawer.vue
index 349965416..29fba6d4d 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationDrawer.vue
@@ -25,10 +25,10 @@
     eager
     allow-expand
     @closed="close">
-    <template slot="title">
+    <template #title>
       <span>{{ $t('siteNavigation.drawer.title') }}</span>
     </template>
-    <template slot="content">
+    <template v-if="drawer" #content>
       <div :class="$refs.drawer?.expand ? 'singlePageApplication' : ' ' ">
         <v-alert
           v-if="information"
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationElementDrawer.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationElementDrawer.vue
index 9ff326db6..3324c835e 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationElementDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationElementDrawer.vue
@@ -20,13 +20,14 @@
   <exo-drawer
     ref="siteNavigationAddElementDrawer"
     id="siteNavigationAddElementDrawer"
+    v-moel="drawer"
     :loading="loading"
     right
     eager
     allow-expand
     @closed="close"
     @expand-updated="$root.$emit('toggle-expand',$event)">
-    <template slot="title">
+    <template #title>
       <div class="d-flex">
         <v-icon
           size="16"
@@ -37,7 +38,7 @@
         <span class="ms-2"> {{ drawerTitle }}</span>
       </div>
     </template>
-    <template slot="content">
+    <template v-if="drawer" #content>
       <v-card class="mx-4 my-4 px-2 py-2 elevation-0">
         <v-form
           v-model="isValidForm">
@@ -73,6 +74,7 @@ export default {
     return {
       elementType: 'PAGE',
       target: 'SAME_TAB',
+      drawer: false,
       navigationNode: null,
       elementName: null,
       elementTitle: null,
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationNodeDrawer.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationNodeDrawer.vue
index 63187b2fc..5fb736bd5 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationNodeDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationNodeDrawer.vue
@@ -21,23 +21,17 @@
     <exo-drawer
       id="siteNavigationAddNodeDrawer"
       ref="siteNavigationAddNodeDrawer"
+      v-model="drawer"
       :loading="loading"
-      right
+      go-back-button
       allow-expand
+      right
       @expand-updated="expanded = $event"
       @closed="close">
-      <template slot="title">
-        <div class="d-flex">
-          <v-icon
-            size="16"
-            class="clickable"
-            @click="close()">
-            fas fa-arrow-left
-          </v-icon>
-          <span> {{ title }} </span>
-        </div>
+      <template #title>
+        {{ title }}
       </template>
-      <template slot="content">
+      <template v-if="drawer" #content>
         <v-form
           v-model="isValidInputs">
           <v-card-text class="d-flex pb-2">
@@ -270,6 +264,7 @@ export default {
       startScheduleTime: new Date(new Date().getTime() + 900000),
       endScheduleTime: new Date(new Date().getTime() + 1800000),
       navigationNode: null,
+      drawer: false,
       loading: false,
       nodeLabel: null,
       nodeId: null,
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/initComponents.js b/layout-webapp/src/main/webapp/vue-app/common-layout-components/initComponents.js
index cd418796b..cd7c88e4c 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/initComponents.js
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/initComponents.js
@@ -38,6 +38,9 @@ import NodeIconPickerDrawer from './components/site-navigation/NodeIconPickerDra
 import SiteNavigationNewPageElementItemsList from './components/site-navigation/SiteNavigationNewPageElementItemsList.vue';
 import SiteNavigationNewPageElementItem from './components/site-navigation/SiteNavigationNewPageElementItem.vue';
 
+import SiteAccessPermissions from './components/manage-permissions/SiteAccessPermissions.vue';
+import SiteEditPermission from './components/manage-permissions/SiteEditPermission.vue';
+
 const components = {
   'manage-permissions-drawer': ManagePermissionsDrawer,
   'manage-edit-permission': ManageEditPermission,
@@ -58,6 +61,8 @@ const components = {
   'site-navigation-existing-page-element': SiteNavigationExistingPageElement,
   'site-navigation-page-suggester': SiteNavigationPageSuggester,
   'site-navigation-site-suggester': SiteNavigationSiteSuggester,
+  'site-access-permissions': SiteAccessPermissions,
+  'site-edit-permission': SiteEditPermission,
   'node-icon-picker-drawer': NodeIconPickerDrawer,
 };
 
diff --git a/layout-webapp/src/main/webapp/vue-app/common/js/SiteLayoutService.js b/layout-webapp/src/main/webapp/vue-app/common/js/SiteLayoutService.js
index e1f79ac3d..20b8b55ec 100644
--- a/layout-webapp/src/main/webapp/vue-app/common/js/SiteLayoutService.js
+++ b/layout-webapp/src/main/webapp/vue-app/common/js/SiteLayoutService.js
@@ -17,7 +17,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-export function createSite(siteName, siteTemplate, siteLabel, siteDescription, displayed, displayOrder, bannerUploadId, icon) {
+export function createSite(siteName, siteTemplate, siteLabel, siteDescription, displayed, displayOrder, bannerUploadId, icon, accessPermissions, editPermission) {
   const createModel = {
     siteTemplate,
     portalConfig: {
@@ -27,6 +27,8 @@ export function createSite(siteName, siteTemplate, siteLabel, siteDescription, d
       displayed: displayed,
       displayOrder: displayOrder,
       bannerUploadId: bannerUploadId,
+      accessPermissions,
+      editPermission,
       properties: {
         icon: icon || 'fa-globe',
       },
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteManagement.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteManagement.vue
index 132c121d1..527dd1fdf 100644
--- a/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteManagement.vue
+++ b/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteManagement.vue
@@ -34,8 +34,8 @@
       :ok-label="$t('siteManagement.label.confirm')"
       :cancel-label="$t('siteManagement.label.cancel')"
       @ok="deleteSite" />
-    <site-properties-drawer />
-    <site-template-drawer />
+    <site-form-drawer
+      :sites="sites" />
     <site-navigation-drawer />
     <site-navigation-node-drawer />
     <site-navigation-element-drawer />
@@ -56,12 +56,18 @@ export default {
     };
   },
   created() {
+    this.$root.$on('site-created', this.refreshSites);
+    this.$root.$on('site-updated', this.refreshSites);
+    this.$root.$on('delete-site', this.confirmDelete);
+    this.refreshSites();
+  },
+  beforDestroy() {
+    this.$root.$off('site-created', this.refreshSites);
+    this.$root.$off('site-updated', this.refreshSites);
     this.$root.$on('delete-site', this.confirmDelete);
-    this.$root.$on('refresh-sites', this.getSites);
-    this.getSites();
   },
   methods: {
-    getSites() {
+    refreshSites() {
       this.loading++;
       return this.$siteService.getSites('PORTAL', null, 'public', true, true, false, false, false, null, true)
         .then(sites => this.sites = sites?.filter(s => !s?.properties?.IS_SPACE_PUBLIC_SITE) || [])
@@ -75,7 +81,7 @@ export default {
     deleteSite() {
       this.loading++;
       return this.$siteLayoutService.deleteSite(this.siteToDelete.siteType, this.siteToDelete.name)
-        .then(() => this.$root.$emit('refresh-sites'))
+        .then(() => this.refreshSites)
         .finally(() => this.loading--);
     },
   }
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/drawer/SiteFormDrawer.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/drawer/SiteFormDrawer.vue
new file mode 100644
index 000000000..918d88948
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/site-management/components/drawer/SiteFormDrawer.vue
@@ -0,0 +1,410 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+ 
+ Copyright (C) 2020 - 2025 Meeds Association contact@meeds.io
+ 
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+ 
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+<template>
+  <exo-drawer
+    id="sitePropertiesDrawer"
+    ref="drawer"
+    v-model="drawer"
+    :loading="loading"
+    :right="!$vuetify.rtl"
+    :allow-expand="!$root.isMobile"
+    :go-back-button="isNew && stepper"
+    @expand-updated="expanded = $event"
+    @closed="close"
+    @go-back="stepper = 0">
+    <template #title>
+      <span>{{ isNew && $t('siteManagement.drawer.addSite.title') || $t('siteManagement.drawer.properties.title') }}</span>
+    </template>
+    <template v-if="drawer" #content>
+      <v-expand-transition>
+        <div v-if="!stepper" class="my-4 ms-4">
+          <div class="text-header me-4">
+            {{ $t('sites.selectTemplate') }}
+          </div>
+          <div class="d-flex flex-wrap align-center">
+            <site-management-template
+              v-for="t in sortedTemplates"
+              :key="t.id"
+              :site-template="t"
+              :selected="t.id === templateId"
+              class="col-auto ps-0 pe-4"
+              @select="templateId = t.id" />
+          </div>
+          <div class="d-flex justify-center my-4">
+            <v-btn
+              :disabled="!templateId"
+              class="btn btn-primary"
+              @click="stepper = 1">
+              {{ $t('sites.stepper.start') }}
+            </v-btn>
+          </div>
+          <layout-image-illustration-preview />
+        </div>
+        <v-stepper
+          v-else
+          v-model="stepper"
+          :class="{
+            'pe-3' : $root.isMobile,
+            'mt-5' : !isNew,
+          }"
+          class="ma-0 py-0"
+          vertical
+          flat>
+          <v-stepper-step
+            v-if="isNew"
+            :step="1"
+            class="ma-4 pa-0"
+            editable>
+            {{ $t('sites.stepper.properties') }}
+          </v-stepper-step>
+          <v-stepper-content :step="1" class="pa-0 ma-0 no-border">
+            <form
+              v-if="stepper === 1"
+              ref="form1"
+              class="px-4 pb-4"
+              @submit.stop.prevent="0">
+              <translation-text-field
+                ref="siteTitleTranslation"
+                v-model="siteTitleTranslations"
+                v-bind="{
+                  autofocus: true,
+                }"
+                :placeholder="$t('siteManagement.label.siteLabel.placeholder')"
+                :field-value.sync="siteLabel"
+                :maxlength="maxTitleLength"
+                :no-expand-icon="!expanded"
+                :supported-languages="supportedLanguages"
+                :default-language="defaultLanguage"
+                :object-id="siteId"
+                drawer-title="siteManagement.label.translateTitle"
+                object-type="site"
+                field-name="label"
+                name="siteTitle"
+                class="width-auto flex-grow-1"
+                back-icon
+                required>
+                <template #title>
+                  {{ $t('siteManagement.label.siteName.title') }}
+                </template>
+              </translation-text-field>
+              <v-list-item class="pa-0" dense>
+                <v-list-item-content>
+                  <v-list-item-title />
+                  {{ $t('sites.urlSlug.label') }}
+                  <v-list-item-subtitle>
+                    {{ $t('sites.urlSlug.caption') }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <div class="d-flex align-center">
+                <div class="me-4">/portal/</div>
+                <v-text-field
+                  v-model="siteName"
+                  :aria-label="$t('sites.urlSlug.label')"
+                  :placeholder="$t('sites.urlSlug.placeholder')"
+                  :disabled="!isNew"
+                  :rules="isNew && rules"
+                  class="pt-0"
+                  type="text"
+                  required="required"
+                  outlined
+                  dense
+                  @keyup="customSiteName = true" />
+              </div>
+              <translation-text-field
+                ref="siteDescriptionTranslation"
+                v-model="siteDescriptionTranslations"
+                :placeholder="$t('siteManagement.label.siteDescription.placeholder')"
+                :field-value.sync="siteDescription"
+                :object-id="siteId"
+                :max-length="maxDescriptionLength"
+                :no-expand-icon="!expanded"
+                :supported-languages="supportedLanguages"
+                :default-language="defaultLanguage"
+                drawer-title="siteManagement.label.translateDescription"
+                object-type="site"
+                field-name="description"
+                class="width-auto flex-grow-1 pt-4"
+                back-icon
+                rich-editor>
+                <template #title>
+                  <span>
+                    {{ $t('siteManagement.label.siteDescription.title') }}           
+                  </span>
+                </template>
+                <rich-editor
+                  id="siteDescription"
+                  ref="siteDescriptionEditor"
+                  v-model="siteDescription"
+                  :placeholder="$t('siteManagement.label.siteDescription.placeholder')"
+                  :max-length="maxDescriptionLength"
+                  :tag-enabled="false"
+                  ck-editor-type="site" />
+              </translation-text-field>
+              <font-icon-input
+                v-model="siteIcon"
+                class="my-4" />
+              <site-management-banner
+                ref="siteBanner"
+                v-model="bannerUploadId"
+                :banner-url="siteBannerUrl" />
+            </form>
+          </v-stepper-content>
+          <template v-if="isNew">
+            <v-stepper-step
+              :step="2"
+              :editable="!saveDisabled"
+              class="ma-4 pa-0">
+              {{ $t('sites.stepper.permissions') }}
+            </v-stepper-step>
+            <v-stepper-content :step="2" class="pa-0 ma-0 no-border">
+              <form
+                v-if="stepper === 2"
+                class="px-4"
+                @submit.stop.prevent="0">
+                <site-edit-permission
+                  v-model="editPermission" />
+                <site-access-permissions
+                  v-model="accessPermissions"
+                  class="mt-4" />
+              </form>
+            </v-stepper-content>
+          </template>
+        </v-stepper>
+      </v-expand-transition>
+    </template>
+    <template v-if="stepper > 0" slot="footer">
+      <div class="d-flex">
+        <v-btn
+          v-if="isNew && stepper > 0"
+          class="btn me-2"
+          @click="stepper--">
+          {{ $t('siteManagement.label.btn.previous') }}
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          class="btn ms-2"
+          @click="close">
+          {{ $t('siteManagement.label.btn.cancel') }}
+        </v-btn>
+        <v-btn
+          v-if="isNew && stepper < 2"
+          :disabled="saveDisabled"
+          :loading="loading"
+          @click="stepper++"
+          class="btn btn-primary ms-2">
+          {{ $t('siteManagement.label.btn.next') }}
+        </v-btn>
+        <v-btn
+          v-else
+          :disabled="saveDisabled"
+          :loading="loading"
+          @click="saveSite"
+          class="btn btn-primary ms-2">
+          {{ $t('siteManagement.label.btn.save') }}
+        </v-btn>
+      </div>
+    </template>
+  </exo-drawer>
+</template>
+<script>
+export default {
+  props: {
+    sites: {
+      type: Array,
+      default: null,
+    },
+  },
+  data: () => ({
+    drawer: false,
+    loading: false,
+    templates: null,
+    templateId: null,
+    stepper: 0,
+    site: null,
+    siteId: null,
+    siteName: '',
+    siteLabel: '',
+    siteDescription: '',
+    siteIcon: '',
+    bannerId: null,
+    maxTitleLength: 200,
+    maxDescriptionLength: 1300,
+    siteTitleTranslations: {},
+    siteDescriptionTranslations: {},
+    defaultLanguage: eXo.env.portal.defaultLanguage,
+    supportedLanguages: {},
+    isNew: false,
+    customSiteName: false,
+    expanded: false,
+    siteBannerUrl: null,
+    bannerUploadId: null,
+    accessPermissions: null,
+    editPermission: null,
+  }),
+  computed: {
+    rules() {
+      return [
+        (v) => !this.sites?.find?.(s => s.name === v) || this.$t('sites.urlSlug.alreadyExists'),
+        (v) => (/^[a-zA-Z0-9_-]*$/).test(v) || this.$t('sites.urlSlug.badFormat'),
+      ];
+    },
+    saveDisabled() {
+      return !this.siteLabel
+        || !this.siteName
+        || this.sites?.find?.(s => s.name === this.siteName)
+        || !(/^[a-zA-Z0-9_-]*$/).test(this.siteName);
+    },
+    sortedTemplates() {
+      const siteTemplates = this.templates?.filter?.(t => t.name) || [];
+      siteTemplates.sort((a, b) => this.$root.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
+      return siteTemplates;
+    },
+    siteTemplate() {
+      return this.templates?.find?.(t => t.id === this.templateId);
+    },
+    siteTemplateLayout() {
+      return this.siteTemplate?.layout;
+    },
+  },
+  watch: {
+    siteDescription() {
+      if (this.$refs.siteDescriptionTranslation && this.drawer && this.stepper) {
+        this.$refs.siteDescriptionTranslation.setValue(this.siteDescription);
+      }
+    },
+    siteLabel() {
+      if (this.isNew && !this.customSiteName) {
+        this.siteName = this.normalizeText(this.siteLabel);
+      }
+    },
+  },
+  created() {
+    this.$root.$on('open-site-properties-drawer', this.open);
+  },
+  beforeDestroy() {
+    this.$root.$off('open-site-properties-drawer', this.open);
+  },
+  methods: {
+    async open(site) {
+      this.isNew = !site;
+      if (site) {
+        this.site = site;
+        this.siteName = site.name;
+        this.siteId = site.siteId;
+        this.siteLabel = site.displayName || site.name ;
+        this.siteDescription = site.description || '';
+        this.siteBannerUrl = site.bannerUrl;
+        this.bannerUploadId = null;
+        this.templateId = null;
+        this.stepper = 1;
+        await this.getSiteLabels();
+        await this.getSiteDescriptions();
+      } else {
+        if (!this.templates?.length) {
+          this.templates = await this.$siteTemplateService.getSiteTemplates();
+        }
+        this.siteDescriptionTranslations = {en: null};
+        this.siteTitleTranslations = {en: null};
+        this.accessPermissions = null;
+        this.customSiteName = false;
+        this.editPermission = null;
+        this.bannerUploadId = null;
+        this.templateId = null;
+        this.stepper = 0;
+      }
+      if (this.supportedLanguages) {
+        const translationConfiguration = await this.$translationService.getTranslationConfiguration();
+        this.supportedLanguages = translationConfiguration?.supportedLanguages;
+      }
+      this.siteIcon = site?.icon || 'fa-globe';
+      this.$refs.drawer.open();
+    },
+    getSiteLabels() {
+      return this.$siteLayoutService.getSiteLabels(this.site.siteId)
+        .then(data => this.siteTitleTranslations = data?.labels || {'en': null});
+    },
+    getSiteDescriptions() {
+      return this.$siteLayoutService.getSiteDescriptions(this.site.siteId)
+        .then(data => this.siteDescriptionTranslations = data?.labels || {'en': null});
+    },
+    close() {
+      this.site = null;
+      this.reset();
+      this.$refs.drawer.close();
+    },
+    updateBannerUploadId(bannerUploadId) {
+      this.bannerUploadId = bannerUploadId;
+    },
+    reset() {
+      this.siteId = null;
+      this.siteName = '';
+      this.siteLabel = '';
+      this.siteDescription = '';
+      this.siteTitleTranslations = {};
+      this.siteDescriptionTranslations = {};
+      this.drawer = false;
+      this.siteBannerUrl = null;
+      this.$refs.siteBannerSelector?.reset?.();
+    },
+    async saveSite() {
+      if (this.isNew) {
+        await this.createSite();
+      } else {
+        await this.updateSite();
+      }
+    },
+    async createSite() {
+      this.siteName = this.normalizeText(this.siteName);
+      this.loading = true;
+      try {
+        const site = await this.$siteLayoutService.createSite(this.siteName, this.siteTemplateLayout, this.siteLabel, this.siteDescription, false, 0, this.bannerUploadId !== '0' && this.bannerUploadId || null, this.siteIcon, this.accessPermissions, this.editPermission);
+        await this.$translationService.saveTranslations('site',  site.siteId, 'label', this.siteTitleTranslations);
+        await this.$translationService.saveTranslations('site', site.siteId, 'description', this.siteDescriptionTranslations);
+        this.$root.$emit('alert-message', this.$t('siteManagement.label.createSite.success'), 'success');
+        this.$root.$emit('site-created', site);
+        this.close();
+      } catch (e) {
+        this.$root.$emit('alert-message', this.$t('siteManagement.label.createSite.error'), 'error');
+      } finally {
+        this.loading = false;
+      }
+    },
+    async updateSite() {
+      this.loading = true;
+      try {
+        await this.$siteLayoutService.updateSite(this.site.name, this.site.siteType, this.siteLabel, this.siteDescription, this.site.metaSite || this.site.displayed, this.site.displayed && this.site.displayOrder || 0, this.bannerUploadId !== '0' && this.bannerUploadId || null, this.bannerUploadId === '0', this.siteIcon);
+        await this.$translationService.saveTranslations('site', this.siteId, 'label', this.siteTitleTranslations);
+        await this.$translationService.saveTranslations('site', this.siteId, 'description', this.siteDescriptionTranslations);
+        this.$root.$emit('alert-message', this.$t('siteManagement.label.updateSite.success'), 'success');
+        this.$root.$emit('site-updated', this.site);
+        this.close();
+      } catch (e) {
+        const message = e.message ==='401' &&  this.$t('siteManagement.label.updateSite.unauthorized') || this.$t('siteManagement.label.updateSite.error');
+        this.$root.$emit('alert-message', message, 'error');
+      } finally {
+        this.loading = false;
+      }
+    },
+    normalizeText(text) {
+      return text && text.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-zA-Z0-9_-]/g, '').replace(/\s+/g, '').toLowerCase() || '';
+    },
+  }
+};
+</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/drawer/SitePropertiesDrawer.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/drawer/SitePropertiesDrawer.vue
deleted file mode 100644
index af9dafdda..000000000
--- a/layout-webapp/src/main/webapp/vue-app/site-management/components/drawer/SitePropertiesDrawer.vue
+++ /dev/null
@@ -1,335 +0,0 @@
-<!--
- This file is part of the Meeds project (https://meeds.io/).
- 
- Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
- 
- This program is free software; you can redistribute it and/or
- modify it under the terms of the GNU Lesser General Public
- License as published by the Free Software Foundation; either
- version 3 of the License, or (at your option) any later version.
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- Lesser General Public License for more details.
- 
- You should have received a copy of the GNU Lesser General Public License
- along with this program; if not, write to the Free Software Foundation,
- Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
--->
-<template>
-  <exo-drawer
-    id="sitePropertiesDrawer"
-    ref="drawer"
-    v-model="drawer"
-    :loading="loading"
-    :right="!$vuetify.rtl"
-    :allow-expand="!$root.isMobile && editMode"
-    eager
-    @expand-updated="expanded = $event"
-    @closed="close">
-    <template #title>
-      <span>{{ $t('siteManagement.drawer.properties.title') }}</span>
-    </template>
-    <template v-if="drawer" #content>
-      <v-form>
-        <v-card-text class="d-flex pb-2">
-          <translation-text-field
-            ref="siteTitleTranslation"
-            v-model="siteTitleTranslations"
-            v-bind="{
-              autofocus: true,
-            }"
-            :field-value.sync="siteLabel"
-            :maxlength="maxTitleLength"
-            :no-expand-icon="!expanded"
-            :supported-languages="supportedLanguages"
-            :default-language="defaultLanguage"
-            :object-id="siteId"
-            drawer-title="siteManagement.label.translateTitle"
-            object-type="site"
-            field-name="label"
-            name="siteTitle"
-            class="width-auto flex-grow-1 pt-4"
-            back-icon
-            required
-            @blur="convertSiteName">
-            <template #title>
-              <span>
-                {{ $t('siteManagement.label.siteLabel.title') }} *              
-              </span>
-            </template>
-          </translation-text-field>
-        </v-card-text>
-        <v-card-text class="d-flex pb-2">
-          <span>
-            {{ $t('siteManagement.label.siteName.title') }} *              
-          </span>
-        </v-card-text>
-        <v-card-text class="d-flex py-0">
-          <v-text-field
-            v-model="siteName"
-            class="pt-0"
-            type="text"
-            required="required"
-            :disabled="editMode"
-            outlined
-            dense />
-        </v-card-text>
-        <v-card-text class="d-flex py-0">
-          <translation-text-field
-            ref="siteDescriptionTranslation"
-            v-model="siteDescriptionTranslations"
-            :field-value.sync="siteDescription"
-            :object-id="siteId"
-            :max-length="maxDescriptionLength"
-            :no-expand-icon="!expanded"
-            :supported-languages="supportedLanguages"
-            :default-language="defaultLanguage"
-            drawer-title="siteManagement.label.translateDescription"
-            object-type="site"
-            field-name="description"
-            class="width-auto flex-grow-1 pt-4"
-            back-icon
-            rich-editor>
-            <template #title>
-              <span>
-                {{ $t('siteManagement.label.siteDescription.title') }}           
-              </span>
-            </template>
-            <rich-editor
-              id="siteDescription"
-              ref="siteDescriptionEditor"
-              v-model="siteDescription"
-              :max-length="maxDescriptionLength"
-              :tag-enabled="false"
-              ck-editor-type="site" />
-          </translation-text-field>
-        </v-card-text>
-        <v-card-text class="mt-3 py-4 px-3">
-          <font-icon-input
-            v-model="siteIcon"
-            class="mb-4" />
-          <p class="mb-2 px-1"> {{ $t('siteManagement.label.banner') }}</p>
-          <p class="text-subtitle px-1"> {{ $t('siteManagement.label.caption') }}</p>
-          <site-management-banner-selector
-            ref="siteBannerSelector"
-            :src="siteBannerUrl"
-            :default-src="defaultSiteBannerUrl"
-            :is-default="isDefaultBanner"
-            :no-expand="!expanded"
-            @updated="updateBannerUploadId"
-            @reset="resetBannerUploadId" />
-        </v-card-text>
-      </v-form>
-    </template>
-    <template slot="footer">
-      <div class="d-flex justify-end">
-        <v-btn
-          class="btn ms-2"
-          @click="close">
-          {{ $t('siteManagement.label.btn.cancel') }}
-        </v-btn>
-        <v-btn
-          v-if="editMode"
-          :loading="loading"
-          @click="updateSite"
-          :disabled="saveDisabled"
-          class="btn btn-primary ms-2">
-          {{ $t('siteManagement.label.btn.save') }}
-        </v-btn>
-        <v-btn
-          v-else
-          :disabled="saveDisabled"
-          :loading="loading"
-          @click="$root.$emit('open-site-template-drawer')"
-          class="btn btn-primary ms-2">
-          {{ $t('siteManagement.label.btn.next') }}
-        </v-btn>
-      </div>
-    </template>
-  </exo-drawer>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      drawer: false,
-      site: null,
-      siteName: '',
-      siteLabel: '',
-      siteDescription: '',
-      siteIcon: '',
-      maxDescriptionLength: 1300,
-      siteTitleTranslations: {},
-      siteDescriptionTranslations: {},
-      supportedLanguages: {},
-      defaultLanguage: 'en',
-      siteId: null,
-      expanded: false,
-      siteBannerUrl: '',
-      bannerUploadId: null,
-      hasDefaultBanner: true,
-      isDefaultBanner: true,
-      defaultSiteBannerUrl: '',
-      rules: {
-        value: (v) => (v > 0 && v<= 9999) || this.$t('siteManagement.displayOrder.error')
-      },
-      editMode: false,
-      loading: false,
-    };
-  },
-  created() {
-    this.$root.$on('open-site-properties-drawer', this.open);
-    this.$root.$on('create-site', this.createSite);
-  },
-  watch: {
-    siteDescription() {
-      if (this.$refs.siteDescriptionTranslation && this.drawer) {
-        this.$refs.siteDescriptionTranslation.setValue(this.siteDescription);
-      }
-    },
-  },
-  computed: {
-    saveDisabled(){
-      return !this.siteLabel;
-    },
-  },
-  methods: {
-    async open(site) {
-      this.loading = true;
-      if (site) {
-        this.editMode = true;
-        this.site = site;
-        this.siteName = site.name;
-        this.siteId = site.siteId;
-        this.siteLabel = site.displayName || site.name ;
-        this.siteDescription = site.description;
-        this.siteBannerUrl = site.bannerUrl;
-        this.defaultSiteBannerUrl = `/portal/rest/v1/social/sites/${site.name}/banner?bannerId=0`;
-        this.isDefaultBanner = site.bannerFileId === 0 ;
-        this.hasDefaultBanner = this.isDefaultBanner;
-        this.bannerUploadId = null;
-        await this.getSiteLabels();
-        await this.getSiteDescriptions();
-      } else {
-        this.defaultSiteBannerUrl = '/portal/rest/v1/social/sites/default/banner?bannerId=0';
-        this.isDefaultBanner = true ;
-        this.hasDefaultBanner = true;
-        this.bannerUploadId = null;
-        this.siteTitleTranslations = {};
-        this.siteDescriptionTranslations = {};
-      }
-      this.siteIcon = site?.icon || 'fa-globe';
-      await this.$nextTick().then(() => this.$refs.drawer.open());
-      this.loading = false;
-    },
-    getSiteLabels() {
-      return this.$siteLayoutService.getSiteLabels(this.site.siteId)
-        .then(data => {
-          if (this.editMode && data.labels) {
-            this.siteTitleTranslations = data.labels;
-          } else {
-            this.siteTitleTranslations = {
-              'en': null,
-            };
-          }
-          this.defaultLanguage = data.defaultLanguage;
-          this.supportedLanguages = data.supportedLanguages;
-        });
-    },
-    getSiteDescriptions() {
-      return this.$siteLayoutService.getSiteDescriptions(this.site.siteId)
-        .then(data => {
-          if (this.editMode && data.labels != null) {
-            this.siteDescriptionTranslations = data.labels;
-          } else {
-            this.siteDescriptionTranslations = {
-              'en': null,
-            };
-          }
-          this.defaultLanguage = data.defaultLanguage;
-          this.supportedLanguages = data.supportedLanguages;
-        });
-    },
-    close() {
-      this.site = null;
-      this.reset();
-      this.$refs.drawer.close();
-    },
-    updateBannerUploadId(bannerUploadId) {
-      this.bannerUploadId = bannerUploadId;
-      this.isDefaultBanner = false;
-    },
-    resetBannerUploadId() {
-      this.bannerUploadId = '0';
-      this.isDefaultBanner = true;
-    },
-    reset() {
-      this.siteId = null;
-      this.siteName = '';
-      this.siteLabel = '';
-      this.siteDescription = '';
-      this.editMode = false;
-      this.siteTitleTranslations = {};
-      this.siteDescriptionTranslations = {};
-      this.drawer = false;
-      this.isDefaultBanner = true;
-      this.siteBannerUrl = null;
-      this.defaultSiteBannerUrl = null;
-      this.$refs.siteBannerSelector?.reset?.();
-    },
-    updateSite() {
-      this.loading = true;
-      return this.$siteLayoutService.updateSite(this.site.name, this.site.siteType, this.siteLabel, this.siteDescription, this.site.metaSite || this.site.displayed, this.site.displayed && this.site.displayOrder || 0, this.bannerUploadId !== '0' && this.bannerUploadId || null, !this.hasDefaultBanner && this.bannerUploadId === '0', this.siteIcon)
-        .then(() => this.$translationService.saveTranslations('site', this.siteId, 'label', this.siteTitleTranslations))
-        .then(() => this.$translationService.saveTranslations('site', this.siteId, 'description', this.siteDescriptionTranslations))
-        .then(() => {
-          this.$root.$emit('alert-message', this.$t('siteManagement.label.updateSite.success'), 'success');
-          this.$root.$emit('refresh-sites');
-          this.close();
-        }).catch((e) => {
-          console.error(e);
-          const message = e.message ==='401' &&  this.$t('siteManagement.label.updateSite.unauthorized') || this.$t('siteManagement.label.updateSite.error');
-          this.$root.$emit('alert-message', message, 'error');
-        })
-        .finally(() => this.loading = false);
-    },
-    createSite(template) {
-      if (!template) {
-        const message = this.$t('siteManagement.label.template.mandatory');
-        this.$root.$emit('alert-message', message, 'error');
-        return ;
-      }
-      this.siteName = this.normalizeText(this.siteName);
-      this.loading = true;
-      return this.$siteLayoutService.createSite(this.siteName, template, this.siteLabel, this.siteDescription, false, 0, this.bannerUploadId !== '0' && this.bannerUploadId || null, this.siteIcon)
-        .then((site) =>{
-          this.siteId = site.siteId;
-          if (this.siteTitleTranslations.length) {
-            this.$translationService.saveTranslations('site',  site.siteId, 'label', this.siteTitleTranslations);
-          }
-        })
-        .then(() => this.siteDescriptionTranslations?.length && this.$translationService.saveTranslations('site', this.siteId, 'description', this.siteDescriptionTranslations))
-        .then(() => {
-          this.$root.$emit('alert-message', this.$t('siteManagement.label.createSite.success'), 'success');
-          this.$root.$emit('refresh-sites');
-          this.$root.$emit('close-site-template-drawer', this.close);
-          this.close();
-        }).catch(e => {
-          console.error(e);
-          const message = this.$t('siteManagement.label.createSite.error');
-          this.$root.$emit('alert-message', message, 'error');
-        })
-        .finally(() => this.loading = false);
-    },
-    convertSiteName() {
-      if (!this.editMode && !this.siteName) {
-        this.siteName = this.normalizeText(this.siteLabel);
-      }
-    },
-    normalizeText(text) {
-      return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-zA-Z0-9_-]/g, '').replace(/\s+/g, '').toLowerCase();
-    },
-  }
-};
-</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/form/SiteBanner.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/form/SiteBanner.vue
new file mode 100644
index 000000000..ad9fec258
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/site-management/components/form/SiteBanner.vue
@@ -0,0 +1,132 @@
+<!--
+
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2020 - 2025 Meeds Association contact@meeds.io
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<template>
+  <div>
+    <div class="d-flex pb-2">
+      <v-list-item class="pa-0" dense>
+        <v-list-item-content class="pa-0">
+          <v-list-item-title />
+          {{ $t('siteManagement.label.banner') }}
+          <v-list-item-subtitle>
+            {{ $t('siteManagement.label.caption') }}
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+      <v-spacer />
+      <v-tooltip bottom>
+        <template #activator="{on, attrs}">
+          <div
+            v-on="on"
+            v-bind="attrs">
+            <v-file-input
+              id="imageFileInput"
+              ref="uploadInput"
+              accept="image/*"
+              prepend-icon="fas fa-camera z-index-two rounded-circle primary-border-color white py-1 ms-3"
+              class="file-selector pa-0 ma-0"
+              rounded
+              clearable
+              dense
+              @change="uploadFile" />
+          </div>
+        </template>
+        <span>{{ $t('sites.uploadPreviewTitle') }}</span>
+      </v-tooltip>
+    </div>
+    <v-img
+      :lazy-src="illustrationSrc"
+      :src="illustrationSrc"
+      class="border-radius"
+      transition="none"
+      eager />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+    previewImage: {
+      type: String,
+      default: null,
+    },
+    bannerUrl: {
+      type: String,
+      default: null,
+    },
+  },
+  data: () => ({
+    sendingImage: false,
+    avatarData: null,
+  }),
+  computed: {
+    illustrationSrc() {
+      return this.avatarData || this.bannerUrl || `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/sites/global/banner?isDefault=true`;
+    },
+  },
+  watch: {
+    sendingImage() {
+      this.$emit('sending', this.sendingImage);
+    },
+    previewImage() {
+      this.avatarData = this.previewImage;
+    },
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      if (this.previewImage) {
+        this.avatarData = this.previewImage;
+      } else {
+        this.avatarData = null;
+      }
+    },
+    uploadFile(file) {
+      if (file && file.size) {
+        if (file.size > this.maxUploadSize) {
+          this.$root.$emit('alert-message', this.$t(this.$uploadService.avatarExcceedsLimitError), 'error');
+          return;
+        }
+        this.sendingImage = true;
+        const thiss = this;
+        return this.$uploadService.upload(file)
+          .then(uploadId => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              thiss.avatarData = e.target.result;
+              thiss.$forceUpdate();
+            };
+            reader.readAsDataURL(file);
+            this.$emit('input', uploadId);
+          })
+          .then(() => this.$emit('refresh'))
+          .catch(() => this.$root.$emit('alert-message', this.$t('layout.errorUploadingPreview'), 'error'))
+          .finally(() => this.sendingImage = false);
+      }
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/form/SiteBannerSelector.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/form/SiteBannerSelector.vue
deleted file mode 100644
index 0f42a4652..000000000
--- a/layout-webapp/src/main/webapp/vue-app/site-management/components/form/SiteBannerSelector.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<!--
- This file is part of the Meeds project (https://meeds.io/).
- 
- Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
- 
- This program is free software; you can redistribute it and/or
- modify it under the terms of the GNU Lesser General Public
- License as published by the Free Software Foundation; either
- version 3 of the License, or (at your option) any later version.
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- Lesser General Public License for more details.
- 
- You should have received a copy of the GNU Lesser General Public License
- along with this program; if not, write to the Free Software Foundation,
- Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
--->
-<template>
-  <v-container class="px-0">
-    <v-tooltip bottom>
-      <template #activator="{ on }">
-        <v-card
-          elevation="0"
-          height="140px"
-          class="px-1"
-          v-on="on">
-          <v-img
-            :key="key"
-            :src="imageSrc"
-            role="presentation" />
-          <div
-            class="d-flex flex-grow-1 position-absolute full-height full-width justify-center"
-            :style="{ 'top': '40%' }">
-            <v-btn
-              v-if="imageData || !isDefault"
-              class="border-color mask-color me-1"
-              outlined
-              icon
-              small
-              dark
-              @click="reset">
-              <v-icon size="16">mdi-delete</v-icon>
-            </v-btn>
-            <v-btn
-              class="border-color mask-color"
-              outlined
-              icon
-              small
-              dark
-              @click="openCropperDrawer">
-              <v-icon size="16">fas fa-file-image</v-icon>
-            </v-btn>
-          </div>
-        </v-card>
-      </template>
-      <span>{{ $t(`siteManagement.label.bannerSelector.tooltip`) }}</span>
-    </v-tooltip>
-    <image-crop-drawer
-      ref="imageCropDrawer"
-      :crop-options="imageCropperOptions"
-      :max-file-size="maxUploadSizeInBytes"
-      :src="imageSrc"
-      max-image-width="500"
-      :drawer-title="imageCropperDrawerTitle"
-      @input="updateUploadId"
-      @data="imageData = $event" />
-  </v-container>
-</template>
-<script>
-export default {
-  props: {
-    isDefault: {
-      type: Boolean,
-      default: false,
-    },
-    src: {
-      type: String,
-      default: null,
-    },
-    defaultSrc: {
-      type: String,
-      default: null,
-    },
-    maxUploadSize: {
-      type: Number,
-      default: () => 2,
-    },
-    noExpand: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data: () => ({
-    imageData: null,
-    imageCropperOptions: {
-      aspectRatio: 278 / 107,
-      viewMode: 1,
-    },
-    key: `siteBanner${parseInt(Math.random() * 10000).toString()}`,
-  }),
-  computed: {
-    imageCropperDrawerTitle() {
-      return this.$t('siteManagement.label.bannerSelector.addBanner');
-    },
-    maxUploadSizeInBytes() {
-      return this.maxUploadSize * 1024 * 1024;
-    },
-    imageSrc() {
-      return this.imageData || this.isDefault && this.defaultSrc || this.src ;
-    },
-  },
-  methods: {
-    openCropperDrawer() {
-      this.$refs.imageCropDrawer.open();
-    },
-    updateUploadId(uploadId) {
-      this.$emit('updated', uploadId);
-    },
-    reset() {
-      this.imageData = null;
-      this.$emit('reset');
-    }
-  },
-};
-</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/form/SiteTemplate.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/form/SiteTemplate.vue
new file mode 100644
index 000000000..6164ee5f9
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/site-management/components/form/SiteTemplate.vue
@@ -0,0 +1,116 @@
+<!--
+
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2020 - 2025 Meeds Association contact@meeds.io
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<template>
+  <div>
+    <v-hover
+      v-model="hover">
+      <v-card
+        :class="{
+          'primary-border-color': selected,
+          'border-color': !selected,
+        }"
+        class="d-flex flex-column pa-2 hover-elevation overflow-hidden position-relative"
+        min-width="170"
+        max-width="170"
+        min-height="150"
+        max-height="150"
+        flat
+        @click="$root.$emit('layout-illustration-preview', illustrationSrc, illustrationAction)">
+        <div class="d-flex flex-column flex-grow-1 align-center justify-center">
+          <v-icon size="32" class="py-4">{{ siteTemplate.icon }}</v-icon>
+          <p
+            v-if="title"
+            v-sanitized-html="title"
+            class="mb-0 font-weight-regular text-truncate-2"></p>
+        </div>
+        <div
+          v-if="hover"
+          class="position-absolute full-height full-width t-0 l-0 mask-color z-index-drawer d-flex flex-column pa-2 overflow-hidden text-start">
+          <p
+            v-if="title"
+            v-sanitized-html="title"
+            class="white--text mb-1 font-weight-regular text-truncate-2"></p>
+          <p
+            v-if="description"
+            v-sanitized-html="description"
+            class="white--text mb-0 text-subtitle text-truncate-3"></p>
+          <div class="d-flex flex-grow-1 align-end justify-end">
+            <v-btn
+              small
+              class="btn btn-primary me-2"
+              @click.prevent.stop="$emit('select')">
+              {{ $t('layout.use') }}
+            </v-btn>
+            <v-btn
+              small
+              class="btn"
+              color="white"
+              @click="$root.$emit('layout-illustration-preview', illustrationSrc, illustrationAction)">
+              {{ $t('layout.preview') }}
+            </v-btn>
+          </div>
+        </div>
+      </v-card>
+    </v-hover>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    siteTemplate: {
+      type: Object,
+      default: null
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    hover: false,
+  }),
+  computed: {
+    title() {
+      return this.siteTemplate?.name;
+    },
+    description() {
+      return this.siteTemplate?.description;
+    },
+    illustrationId() {
+      return this.siteTemplate?.illustrationId;
+    },
+    siteTemplateId() {
+      return this.siteTemplate?.id;
+    },
+    illustrationSrc() {
+      return this.illustrationId && `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/attachments/siteTemplate/${this.siteTemplateId}/${this.illustrationId}` ||  '/layout/images/page-templates/DefaultPreview.webp';
+    },
+    illustrationAction() {
+      return {
+        label: this.$t('layout.use'),
+        closeOnClick: true,
+        click: () => this.$emit('select'),
+      };
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/main/Item.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/main/Item.vue
index 0655a4aab..38634bdb2 100644
--- a/layout-webapp/src/main/webapp/vue-app/site-management/components/main/Item.vue
+++ b/layout-webapp/src/main/webapp/vue-app/site-management/components/main/Item.vue
@@ -30,7 +30,7 @@
           min-width="35"
           class="me-4"
           flat>
-          <v-icon size="28" >{{ site.icon || 'fa-globe' }}</v-icon>
+          <v-icon size="28">{{ site.icon || 'fa-globe' }}</v-icon>
         </v-card>
         <div v-sanitized-html="name"></div>
       </div>
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/initComponents.js b/layout-webapp/src/main/webapp/vue-app/site-management/initComponents.js
index f194acfb6..cd8261a78 100644
--- a/layout-webapp/src/main/webapp/vue-app/site-management/initComponents.js
+++ b/layout-webapp/src/main/webapp/vue-app/site-management/initComponents.js
@@ -25,10 +25,11 @@ import SiteList from './components/main/List.vue';
 import SiteItem from './components/main/Item.vue';
 import SiteItemMenu from './components/main/Menu.vue';
 
-import SitePropertiesDrawer from './components/drawer/SitePropertiesDrawer.vue';
+import SiteFormDrawer from './components/drawer/SiteFormDrawer.vue';
 import SiteTemplateDrawer from './components/drawer/SiteTemplateDrawer.vue';
 
-import SiteBannerSelector from './components/form/SiteBannerSelector.vue';
+import SiteBanner from './components/form/SiteBanner.vue';
+import SiteTemplate from './components/form/SiteTemplate.vue';
 
 const components = {
   'site-management': SiteManagement,
@@ -39,10 +40,11 @@ const components = {
   'site-management-item': SiteItem,
   'site-management-item-menu': SiteItemMenu,
 
-  'site-properties-drawer': SitePropertiesDrawer,
+  'site-form-drawer': SiteFormDrawer,
   'site-template-drawer': SiteTemplateDrawer,
 
-  'site-management-banner-selector': SiteBannerSelector ,
+  'site-management-banner': SiteBanner,
+  'site-management-template': SiteTemplate,
 };
 
 for (const key in components) {
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/main.js b/layout-webapp/src/main/webapp/vue-app/site-management/main.js
index 3d99791ac..5c92cbdaf 100644
--- a/layout-webapp/src/main/webapp/vue-app/site-management/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/site-management/main.js
@@ -19,7 +19,7 @@
 
 import './initComponents.js';
 import '../common-layout-components/initComponents.js';
-import '../common-site-template/initComponents.js';
+import '../common-site-template/main.js';
 
 // get overridden components if exists
 if (extensionRegistry) {
@@ -39,7 +39,8 @@ const lang = eXo?.env.portal.language || 'en';
 //should expose the locale ressources as REST API
 const urls = [
   `/layout/i18n/locale.portlet.SiteManagement?lang=${lang}`,
-  `/layout/i18n/locale.portlet.SiteNavigation?lang=${lang}`
+  `/layout/i18n/locale.portlet.SiteNavigation?lang=${lang}`,
+  `/layout/i18n/locale.portlet.LayoutEditor?lang=${lang}`
 ];
 
 export function init() {
@@ -52,6 +53,7 @@ export function init() {
         i18n,
         data: () => ({
           pageTemplates: null,
+          collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
         }),
         computed: {
           isMobile() {