diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index 10f9630f4..c4e81abaa 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -761,8 +761,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           }
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE, identity);
         } else {
-          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE, identity);
+          note_.setLang(note.getLang());
           note_.setTitle(note.getTitle());
           note_.setContent(note.getContent());
           note_.setProperties(notePageProperties);
@@ -783,8 +783,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_TITLE, identity);
         } else {
-          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_TITLE, identity);
+          note_.setLang(note.getLang());
           note_.setTitle(note.getTitle());
           note_.setProperties(notePageProperties);
         }
@@ -799,8 +799,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT, identity);
         } else {
-          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT, identity);
+          note_.setLang(note.getLang());
           note_.setContent(note.getContent());
           note_.setProperties(notePageProperties);
         }
@@ -815,8 +815,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_PROPERTIES, identity);
         } else {
-          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_PROPERTIES, identity);
+          note_.setLang(note.getLang());
           note_.setProperties(notePageProperties);
         }
         noteService.createVersionOfNote(note_, identity.getUserId());
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
index 0a5cdf5b7..8dba53fa5 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
@@ -54,7 +54,7 @@ notes.save.success.message=Note saved successfully
 notes.view.label=View
 
 notes.metadata.properties.label=Properties
-notes.metadata.featuredImage.label=Featured images
+notes.metadata.featuredImage.label=Featured image
 notes.metadata.featuredImage.add.label=Add an image
 notes.metadata.featuredImage.alt=Featured image
 notes.metadata.summary.label=Summary
@@ -66,6 +66,13 @@ notes.featuredImage.remove.error.message=Error while removing featured image
 notes.featuredImage.remove.success.message=Featured image removed successfully
 notes.featuredImage.size.error.message=Featured image size should be less or equals to 20MB
 
+notes.publication.publish.label=Publication
+notes.publication.label=Choose your publication options
+notes.publication.check.properties.label=Check the teaser
+notes.publication.publish.next.label=Next
+notes.publication.post.in.feed.label=Post in Activity stream of
+notes.publication.publish.save.label=Publish
+
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
 popup.confirmation.delete=Delete the note
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
index db7ddf35b..989e371a8 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
@@ -65,6 +65,13 @@ notes.featuredImage.remove.error.message=Erreur lors de la suppression de l'illu
 notes.featuredImage.remove.success.message=Illustration supprimée avec succès
 notes.featuredImage.size.error.message=La taille de l'illustration doit être inférieure ou égale à 20Mo
 
+notes.publication.publish.label=Publication
+notes.publication.label=Choisir les options de publication
+notes.publication.check.properties.label=Vérifier l'accroche
+notes.publication.publish.next.label=Suivant
+notes.publication.post.in.feed.label=Publier dans le fil d'activités de
+notes.publication.publish.save.label=Publier
+
 popup.confirm=Confirmer
 popup.msg.confirmation=Confirmation
 popup.confirmation.delete=Supprimer la note
diff --git a/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml b/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
index 41917e491..fbb9ee85e 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -86,6 +86,9 @@
     <script>
       <path>/javascript/notesRichEditor.bundle.js</path>
     </script>
+    <depends>
+      <module>NotesPublication</module>
+    </depends>
     <depends>
       <module>commonVueComponents</module>
     </depends>
@@ -114,6 +117,32 @@
     </depends>
   </module>
 
+  <module>
+    <name>NotesPublication</name>
+    <load-group>NotesGRP</load-group>
+    <script>
+      <path>/javascript/notesPublication.bundle.js</path>
+    </script>
+    <depends>
+      <module>commonVueComponents</module>
+    </depends>
+    <depends>
+      <module>extensionRegistry</module>
+    </depends>
+    <depends>
+      <module>vue</module>
+    </depends>
+    <depends>
+      <module>vuetify</module>
+    </depends>
+    <depends>
+      <module>eXoVueI18n</module>
+    </depends>
+    <depends>
+      <module>imageCropper</module>
+    </depends>
+  </module>
+  
   <portlet>
     <name>NotesEditor</name>
     <module>
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index ca30c2f91..80cf009d0 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -212,7 +212,14 @@
   }
 }
 
-#editorMetadataDrawer {
+#editorPublicationDrawer {
+  .post-feed-target {
+    max-width: 335px;
+  }
+
+}
+
+#editorMetadataDrawer, #editorPublicationDrawer {
 
   .add-image-area, .image-preview {
     background-color: @primaryBackground !important;
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 2e3bf4cc0..72c0417d1 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -281,7 +281,7 @@ export default {
       this.note.content = noteObject.content;
       this.note.properties = noteObject.properties;
     },
-    postNote(toPublish) {
+    postNote() {
       this.postingNote = true;
       clearTimeout(this.saveDraft);
       const properties = this.note?.properties;
@@ -297,7 +297,7 @@ export default {
         wikiOwner: this.note.wikiOwner,
         content: this.$noteUtils.getContentToSave('notesContent', this.oembedMinWidth) || this.note.content,
         parentPageId: this.note?.draftPage && this.note?.targetPageId === this.parentPageId ? null : this.parentPageId,
-        toBePublished: toPublish,
+        toBePublished: false,
         appName: this.appName,
         properties: properties
       };
@@ -550,7 +550,7 @@ export default {
         if (draftNote.properties) {
           draftNote.properties.draft = true;
           if (this.newTranslation && !this.featuredImageUpdated) {
-            draftNote.properties.featuredImage = null;
+            draftNote.properties.featuredImage = {};
           }
         }
         this.$notesService.saveDraftNote(draftNote, this.parentPageId).then(savedDraftNote => {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue
new file mode 100644
index 000000000..f707dce70
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue
@@ -0,0 +1,291 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 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>
+  <div>
+    <v-overlay
+      z-index="2000"
+      :value="drawer"
+      @click.native="drawer = false" />
+    <exo-drawer
+      id="editorPublicationDrawer"
+      ref="publicationDrawer"
+      v-model="drawer"
+      :right="!$vuetify.rtl"
+      allow-expand
+      show-overlay
+      @expand-updated="expanded = $event"
+      @closed="reset">
+      <template slot="title">
+        <div class="d-flex my-auto text-header font-weight-bold text-color">
+          {{ $t('notes.publication.publish.label') }}
+        </div>
+      </template>
+      <template slot="content">
+        <div class="pa-5">
+          <v-stepper
+            v-model="stepper"
+            :class="expanded && 'flex-row' || 'flex-column'"
+            class="ma-0 d-flex"
+            vertical
+            flat>
+            <div
+              v-if="!editMode"
+              :class="{
+                'col-6': expanded,
+                'flex-grow-1': expanded || stepper === 1,
+                'flex-grow-0': !expanded && stepper !== 1,
+              }"
+              class="flex-shrink-0">
+              <v-stepper-step
+                :step="1"
+                :editable="!expanded"
+                width="100%"
+                class="ma-0 pa-0 position-relative">
+                <div class="d-flex">
+                  <div class="d-flex align-center flex-grow-1 flex-shrink-1 text-truncate text-header">
+                    {{ $t('notes.publication.check.properties.label') }}
+                  </div>
+                </div>
+              </v-stepper-step>
+              <v-slide-y-transition>
+                <div v-show="expanded || stepper === 1">
+                  <div
+                    class="d-flex flex-column mt-8">
+                    <v-scroll-y-transition hide-on-leave>
+                      <div class="mb-2">
+                        <note-metadata-properties-form
+                          ref="propertiesForm"
+                          :note="noteObject"
+                          :current-properties="currentNoteProperties"
+                          :has-featured-image="hasFeaturedImage"
+                          :summary-max-length="summaryMaxLength"
+                          @properties-updated="propertiesUpdated" />
+                      </div>
+                    </v-scroll-y-transition>
+                  </div>
+                </div>
+              </v-slide-y-transition>
+            </div>
+            <div
+              :class="{
+                'col-6': expanded,
+                'mt-8': !expanded && stepper < 2 && !editMode,
+                'mt-4': !expanded && stepper === 2 && !editMode,
+              }"
+              class="flex-grow-0 flex-shrink-0">
+              <v-stepper-step
+                v-if="!editMode"
+                :step="2"
+                :editable="!expanded"
+                width="100%"
+                class="ma-0 pa-0 position-relative">
+                <div class="d-flex">
+                  <div class="d-flex align-center flex-grow-1 flex-shrink-1 text-truncate text-header">
+                    {{ $t('notes.publication.label') }}
+                  </div>
+                </div>
+              </v-stepper-step>
+              <v-slide-y-transition>
+                <div v-show="expanded || stepper === (2 - editMode)">
+                  <div
+                    :class="{'mt-8': !editMode}"
+                    class="d-flex flex-column">
+                    <v-scroll-y-transition hide-on-leave>
+                      <div class="mb-2">
+                        <div class="d-flex">
+                          <v-switch
+                            v-model="publicationSettings.post"
+                            :disabled="isPublishing"
+                            :aria-label="$t('notes.publication.post.in.feed.label')"
+                            :ripple="false"
+                            color="primary"
+                            class="mt-n1 me-1" />
+                          <div class="d-flex flex-wrap">
+                            <p class="me-2">
+                              {{ $t('notes.publication.post.in.feed.label') }}
+                            </p>
+                            <exo-space-avatar
+                              :space-id="spaceId"
+                              size="21"
+                              :extra-class="['mb-auto text-truncate', {
+                                'post-feed-target': !expanded
+                              }]"
+                              bold-title
+                              popover />
+                          </div>
+                        </div>
+                      </div>
+                    </v-scroll-y-transition>
+                  </div>
+                </div>
+              </v-slide-y-transition>
+            </div>
+          </v-stepper>
+        </div>
+      </template>
+      <template slot="footer">
+        <div class="d-flex width-fit-content ms-auto">
+          <v-btn
+            class="btn me-5"
+            @click="cancel">
+            {{ $t('notes.button.cancel') }}
+          </v-btn>
+          <v-btn
+            class="btn btn-primary"
+            :disabled="summaryLengthError"
+            :loading="isPublishing"
+            @click="save">
+            {{ saveButtonLabel }}
+          </v-btn>
+        </div>
+      </template>
+    </exo-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      stepper: 1,
+      drawer: false,
+      noteObject: null,
+      currentNoteProperties: {},
+      expanded: false,
+      summaryMaxLength: 1300,
+      publicationSettings: {
+        post: true
+      }
+    };
+  },
+  props: {
+    hasFeaturedImage: {
+      type: Boolean,
+      default: false
+    },
+    isPublishing: {
+      type: Boolean,
+      default: false
+    },
+    spaceId: {
+      type: String,
+      default: null
+    },
+    editMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    saveButtonLabel() {
+      return (!this.editMode && this.stepper === 1 && !this.expanded) && this.$t('notes.publication.publish.next.label')
+                                                  || this.$t('notes.publication.publish.save.label');
+    },
+    summaryLengthError() {
+      return this.noteObject?.properties?.summary?.length > this.summaryMaxLength;
+    },
+  },
+  watch: {
+    expanded() {
+      this.stepper = this.expanded && 2 || 1;
+    },
+    isPublishing() {
+      if (!this.isPublishing) {
+        this.close();
+      }
+    }
+  },
+  methods: {
+    propertiesUpdated(properties) {
+      if (!this.noteObject?.properties || !Object.keys(this.noteObject?.properties).length) {
+        this.noteObject.properties = structuredClone(properties || {});
+      }
+      if (!this.noteObject.properties?.featuredImage) {
+        this.noteObject.properties.featuredImage = {};
+      }
+      this.updateCurrentNoteObjectProperties(properties);
+      this.propertiesToSave = properties;
+    },
+    open(noteObject) {
+      this.noteObject = noteObject;
+      if (this.editMode) {
+        this.publicationSettings.post = this.noteObject?.activityPosted;
+      }
+      this.cloneProperties();
+      this.$refs.publicationDrawer.open();
+      this.toggleExpand();
+      this.$refs.propertiesForm?.initProperties();
+    },
+    toggleExpand() {
+      if (!this.editMode) {
+        setTimeout(() => {
+          this.$refs.publicationDrawer.toogleExpand();
+        }, 50);
+      }
+    },
+    cloneProperties() {
+      this.currentNoteProperties = structuredClone(
+        this.noteObject?.id &&
+          this.noteObject?.properties || {
+          noteId: 0,
+          summary: '',
+          featuredImage: {uploadId: null, mimeType: null, altText: null},
+          draft: true
+        });
+    },
+    close() {
+      this.stepper = 1;
+      this.$refs.publicationDrawer.close();
+    },
+    reset() {
+      this.$emit('closed');
+    },
+    cancel() {
+      this.close();
+      setTimeout(() => {
+        this.$refs.propertiesForm.cancelChanges();
+      }, 1000);
+    },
+    save() {
+      if (this.editMode) {
+        this.$emit('publish', this.publicationSettings);
+        return;
+      }
+      if (!this.expanded && this.stepper === 1) {
+        this.stepper += 1;
+        return;
+      }
+      this.$emit('metadata-updated', this.noteObject.properties);
+      this.$emit('publish', this.noteObject, this.publicationSettings);
+    },
+    updateCurrentNoteObjectProperties(properties) {
+      this.noteObject.properties.noteId = Number(properties.noteId);
+      this.noteObject.properties.summary = properties.summary;
+      this.noteObject.properties.draft = properties.draft;
+
+      this.noteObject.properties.featuredImage.id = properties?.featuredImage?.id;
+      this.noteObject.properties.featuredImage.uploadId = properties?.featuredImage?.uploadId;
+      this.noteObject.properties.featuredImage.mimeType = properties?.featuredImage?.mimeType;
+      this.noteObject.properties.featuredImage.altText = properties?.featuredImage?.altText;
+      this.noteObject.properties.featuredImage.toDelete = properties?.featuredImage?.toDelete;
+    }
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notes-publication/initComponents.js
new file mode 100644
index 000000000..7c7fc54b7
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/initComponents.js
@@ -0,0 +1,11 @@
+import NotePublicationDrawer from './components/NotePublicationDrawer.vue';
+import NoteMetadataPropertiesForm from '../notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue';
+
+const components = {
+  'note-publication-drawer': NotePublicationDrawer,
+  'note-metadata-properties-form': NoteMetadataPropertiesForm
+};
+
+for (const key in components) {
+  Vue.component(key, components[key]);
+}
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/main.js b/notes-webapp/src/main/webapp/vue-app/notes-publication/main.js
new file mode 100644
index 000000000..73ebc6d78
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/main.js
@@ -0,0 +1,11 @@
+import './initComponents.js';
+
+// get overrided components if exists
+if (extensionRegistry) {
+  const components = extensionRegistry.loadComponents('notesPublication');
+  if (components && components.length > 0) {
+    components.forEach(cmp => {
+      Vue.component(cmp.componentName, cmp.componentOptions);
+    });
+  }
+}
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
deleted file mode 100644
index 970319b5b..000000000
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ /dev/null
@@ -1,310 +0,0 @@
-<!--
- This file is part of the Meeds project (https://meeds.io/).
-
- Copyright (C) 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>
-  <div>
-    <v-overlay
-      z-index="2000"
-      :value="drawer"
-      @click.native="closeDrawersByOverlay" />
-    <exo-drawer
-      id="editorMetadataDrawer"
-      ref="metadataDrawer"
-      v-model="drawer"
-      allow-expand
-      show-overlay
-      right
-      @closed="resetProperties">
-      <template slot="title">
-        <div class="d-flex my-auto text-header font-weight-bold text-color">
-          {{ $t('notes.metadata.properties.label') }}
-        </div>
-      </template>
-      <template slot="content">
-        <div class="pa-5">
-          <v-form>
-            <label for="image-area">
-              <p class="text-color text-body mb-3">
-                {{ $t('notes.metadata.featuredImage.label') }}
-              </p>
-              <v-btn
-                v-if="!canShowFeaturedImagePreview"
-                name="image-area"
-                class="btn add-image-area d-flex"
-                height="206"
-                width="100%"
-                text
-                @click="openFeaturedImageDrawer">
-                <div class="d-flex width-fit-content mx-auto">
-                  <v-icon
-                    class="me-15 icon-default-color"
-                    size="40">
-                    fas fa-image
-                  </v-icon>
-                  <p class="text-header text-color my-auto">
-                    {{ $t('notes.metadata.featuredImage.add.label') }}
-                  </p>
-                </div>
-              </v-btn>
-              <v-sheet
-                v-else
-                height="206"
-                min-width="48"
-                class="card-border-radius image-preview">
-                <v-hover v-slot="{ hover }">
-                  <div class="d-flex full-height">
-                    <v-img
-                      width="100%"
-                      contain
-                      :lazy-src="featuredImageLink"
-                      :alt="savedFeaturedImageAltText"
-                      :src="featuredImageLink">
-                      <div
-                        v-if="hover && canShowFeaturedImagePreview"
-                        class="width-fit-content full-height ms-auto d-flex me-2">
-                        <v-btn
-                          class="feature-image-button me-1 mt-2 mb-auto"
-                          icon
-                          @click.stop="removeNoteFeaturedImage">
-                          <v-icon
-                            class="feature-image-trash-icon"
-                            size="20">
-                            fa-solid fa-trash
-                          </v-icon>
-                        </v-btn>
-                        <v-btn
-                          class="feature-image-button mt-2 mb-auto"
-                          icon
-                          @click="openFeaturedImageDrawer">
-                          <v-icon
-                            class="feature-image-file-icon"
-                            size="20">
-                            fa-regular fa-file-image
-                          </v-icon>
-                        </v-btn>
-                      </div>
-                    </v-img>
-                  </div>
-                </v-hover>
-              </v-sheet>
-            </label>
-            <label for="summaryInputEditor">
-              <div class="mt-5">
-                <p class="text-color text-body mb-3">
-                  {{ $t('notes.metadata.summary.label') }}
-                </p>
-                <v-textarea
-                  v-model="summaryContent"
-                  name="summaryInputEditor"
-                  class="summary-metadata-input pt-0 overflow-auto"
-                  :placeholder="$t('notes.metadata.add.summary.placeholder')"
-                  rows="17"
-                  row-height="8"
-                  dense
-                  outlined
-                  auto-grow />
-                <span
-                  class="d-flex justify-end me-1"
-                  :class="{'error-color': summaryLengthError}">
-                  {{ summaryContent?.length }}/{{ summaryMaxLength }}
-                  <v-icon
-                    class="ms-1 my-auto"
-                    :class="[{ 'success-color': !summaryLengthError }, 'error-color']"
-                    size="16">
-                    fas fa-info-circle
-                  </v-icon>
-                </span>
-              </div>
-            </label>
-          </v-form>
-        </div>
-      </template>
-      <template slot="footer">
-        <div class="d-flex width-fit-content ms-auto">
-          <v-btn
-            class="btn me-5"
-            @click="cancelChanges">
-            {{ $t('notes.button.cancel') }}
-          </v-btn>
-          <v-btn
-            :disabled="saveDisabled"
-            class="btn btn-primary"
-            @click="save">
-            {{ $t('notes.button.publish') }}
-          </v-btn>
-        </div>
-      </template>
-    </exo-drawer>
-  </div>
-</template>
-
-<script>
-
-export default {
-  data() {
-    return {
-      maxFileSize: 20 * 1024 * 1024,
-      noteObject: null,
-      drawer: false,
-      summaryContent: null,
-      imageData: null,
-      uploadId: null,
-      mimeType: null,
-      featuredImageAltText: null,
-      hasFeaturedImageValue: false,
-      featureImageUpdated: false,
-      illustrationBaseUrl: `${eXo.env.portal.context}/${eXo.env.portal.rest}/notes/illustration/`,
-      currentNoteProperties: {},
-      removeFeaturedImage: false,
-      summaryMaxLength: 1300
-    };
-  },
-  props: {
-    hasFeaturedImage: {
-      type: Boolean,
-      default: false
-    }
-  },
-  created() {
-    this.$root.$on('image-data', this.imageDataUpdated);
-    this.$root.$on('image-uploaded', (uploadId) => this.uploadId = uploadId);
-    this.$root.$on('image-alt-text', (altText) => this.featuredImageAltText = altText);
-  },
-  computed: {
-    summaryLengthError() {
-      return this.summaryContent?.length > this.summaryMaxLength;
-    },
-    savedFeaturedImageAltText() {
-      return this.noteObject?.properties.featuredImage?.altText;
-    },
-    saveDisabled() {
-      return (!this.propertiesChanged && !this.imageData && !this.removeFeaturedImage) || this.summaryLengthError;
-    },
-    propertiesChanged() {
-      return JSON.stringify(this.noteObject?.properties || {}) !== JSON.stringify(this.currentNoteProperties || {});
-    },
-    canShowFeaturedImagePreview() {
-      return this.hasFeaturedImageValue || this.imageData?.length;
-    },
-    notedId() {
-      return this.noteObject?.id;
-    },
-    langParam() {
-      return this.noteObject?.lang && `&lang=${this.noteObject?.lang}` || '';
-    },
-    isDraft() {
-      return this.noteObject?.draftPage;
-    },
-    noteFeatureImageUpdatedDate() {
-      return this.noteObject?.properties?.featuredImage?.lastUpdated || 0;
-    },
-    featuredImageLink() {
-      return this.imageData || this.hasFeaturedImageValue
-                            && `${this.illustrationBaseUrl}${this.notedId}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${this.langParam}` || '';
-    }
-  },
-  watch: {
-    'noteObject.lang': function () {
-      this.imageData = null;
-    },
-    hasFeaturedImage() {
-      this.hasFeaturedImageValue = this.hasFeaturedImage;
-    },
-    imageData() {
-      if (!this.imageData?.length) {
-        this.$root.$emit('reset-featured-image-data');
-      }
-      this.featureImageUpdated = true;
-    },
-    summaryContent() {
-      if (!this.noteObject?.properties) {
-        this.noteObject.properties = {};
-      }
-      this.noteObject.properties.summary = this.summaryContent;
-    },
-    uploadId() {
-      if (this.uploadId) {
-        this.removeFeaturedImage = false;
-      }
-    },
-  },
-  methods: {
-    resetProperties() {
-      this.featureImageUpdated = false;
-      this.cancelChanges();
-    },
-    imageDataUpdated(data, mimeType) {
-      this.imageData = data;
-      this.mimeType = mimeType;
-    },
-    openFeaturedImageDrawer() {
-      this.$root.$emit('open-featured-image-drawer', {altText: this.featuredImageAltText || this.savedFeaturedImageAltText});
-    },
-    closeFeaturedImageDrawerByOverlay() {
-      this.$root.$emit('close-featured-image-byOverlay');
-    },
-    closeDrawersByOverlay() {
-      this.closeFeaturedImageDrawerByOverlay();
-    },
-    open(note) {
-      this.noteObject = note;
-      this.currentNoteProperties = structuredClone(this.noteObject?.properties || {});
-      this.summaryContent = this.currentNoteProperties?.summary || '';
-      this.removeFeaturedImage = false;
-      this.$refs.metadataDrawer.open();
-    },
-    cancelChanges() {
-      this.close();
-      this.noteObject.properties = structuredClone(this.currentNoteProperties || {});
-      this.summaryContent = this.currentNoteProperties?.summary || '';
-      this.featuredImageAltText = this.savedFeaturedImageAltText;
-      this.hasFeaturedImageValue = this.hasFeaturedImage;
-      this.imageData = null;
-      this.uploadId = null;
-    },
-    close() {
-      this.$refs.metadataDrawer.close();
-    },
-    save() {
-      const savedFeaturedImageId = this.noteObject?.properties?.featuredImage?.id;
-      const properties = {
-        noteId: this.noteObject?.id,
-        summary: this.summaryContent,
-        featuredImage: {
-          id: savedFeaturedImageId,
-          uploadId: this.uploadId,
-          mimeType: this.mimeType,
-          altText: this.featuredImageAltText,
-          toDelete: this.removeFeaturedImage || (!this.uploadId && !savedFeaturedImageId)
-        },
-        draft: this.isDraft || !this.notedId
-      };
-      this.$emit('metadata-updated', properties);
-      this.close();
-    },
-    removeNoteFeaturedImage() {
-      this.featuredImage = null;
-      this.removeFeaturedImage = true;
-      this.hasFeaturedImageValue = false;
-      this.imageData = null;
-      this.$root.$emit('reset-featured-image-data');
-    }
-  }
-};
-</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
index 7a5b434f8..53415268e 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
@@ -30,7 +30,7 @@
       :selected-language="selectedLanguage"
       :translations="translations"
       :is-mobile="isMobile"
-      :post-key="postKey"
+      :post-key="postKey + enablePostKeys"
       :draft-saving-status="draftSavingStatus"
       :publish-button-text="publishButtonText"
       :lang-button-tooltip-text="langButtonTooltipText"
@@ -78,6 +78,16 @@
       ref="featuredImageDrawer"
       :note="noteObject"
       :has-featured-image="hasFeaturedImage" />
+    <note-publication-drawer
+      v-if="canPublish"
+      ref="editorPublicationDrawer"
+      :has-featured-image="hasFeaturedImage"
+      :is-publishing="isPublishing"
+      :space-id="spaceId"
+      :edit-mode="editMode"
+      @publish="postAndPublishNote"
+      @metadata-updated="metadataUpdated"
+      @closed="publicationDrawerClosed" />
   </div>
 </template>
 
@@ -90,7 +100,9 @@ export default {
       initialized: false,
       instanceReady: false,
       noteTitleMaxLength: 500,
-      updatingProperties: null
+      updatingProperties: false,
+      enablePostKeys: 0,
+      isPublishing: false
     };
   },
   props: {
@@ -189,14 +201,19 @@ export default {
     imagesDownloadFolder: {
       type: String,
       default: 'DRIVE_ROOT_NODE/notes/images'
+    },
+    canPublish: {
+      type: Boolean,
+      default: false
+    },
+    spaceId: {
+      type: String,
+      default: null
     }
   },
   watch: {
     'noteObject.title': function(newVal, oldVal) {
-      if (newVal.length > this.noteTitleMaxLength) {
-        this.displayNoteTitleMaxLengthCheckAlert();
-        this.noteObject.title = oldVal;
-      }
+      this.displayNoteTitleMaxLengthCheckAlert(newVal, oldVal);
       this.updateData();
     },
     'noteObject.content': function () {
@@ -228,6 +245,18 @@ export default {
     },
     saveNoteButtonDisabled() {
       return this.updatingProperties || this.saveButtonDisabled;
+    },
+    newPageDraft() {
+      return !this.noteObject?.id || (this.noteObject?.draftPage && !this.noteObject?.targetPageId);
+    },
+    editMode() {
+      return this.noteObject?.id && !this.newPageDraft;
+    },
+    isTranslation() {
+      return !!this.noteObject?.lang;
+    },
+    newPublicationDrawerEnabled() {
+      return eXo?.env?.portal?.newPublicationDrawerEnabled;
     }
   },
   created() {
@@ -249,7 +278,7 @@ export default {
         this.autoSave();
         this.waitForNoteMetadataUpdate();
       } else {
-        this.updatingProperties = null;
+        this.updatingProperties = false;
       }
     },
     editorClosed(){
@@ -335,8 +364,20 @@ export default {
         }, 200);
       }
     },
-    postNote(toPublish) {
-      this.$emit('post-note', toPublish);
+    postNote() {
+      if (this.newPublicationDrawerEnabled && this.canPublish
+          && !this.isTranslation && !this.editMode) {
+        this.openPublicationDrawer(this.noteObject);
+        return;
+      }
+      this.postAndPublishNote();
+    },
+    postAndPublishNote(note, publicationSettings) {
+      if (this.newPublicationDrawerEnabled) {
+        this.noteObject = note;
+        this.updateData();
+      }
+      this.$emit('post-note', publicationSettings);
     },
     resetEditorData() {
       this.noteObject.title = null;
@@ -508,6 +549,12 @@ export default {
     isImageDrawerClosed() {
       return this.$refs.featuredImageDrawer.isClosed();
     },
+    openPublicationDrawer() {
+      this.$refs.editorPublicationDrawer.open(this.noteObject);
+    },
+    publicationDrawerClosed() {
+      this.enablePostKeys ++;
+    },
     openMetadataDrawer() {
       this.$refs.editorMetadataDrawer.open(this.noteObject);
     },
@@ -517,18 +564,23 @@ export default {
         alertMessage: detail?.message,
       }}));
     },
-    displayNoteTitleMaxLengthCheckAlert(){
-      const messageObject = {
-        type: 'warning',
-        message: this.$t('notes.title.max.length.warning.message', {0: this.noteTitleMaxLength})
-      };
-      this.displayAlert(messageObject);
+    displayNoteTitleMaxLengthCheckAlert(newTitle, oldTitle) {
+      if (newTitle?.length > this.noteTitleMaxLength) {
+        this.noteObject.title = oldTitle;
+        this.displayAlert({
+          type: 'warning',
+          message: this.$t('notes.title.max.length.warning.message', {0: this.noteTitleMaxLength})
+        });
+      }
     },
     waitForNoteMetadataUpdate() {
       setTimeout(() => {
-        this.updatingProperties = null;
+        this.updatingProperties = false;
       }, 1000);
-    }
+    },
+    setPublishing(publishing) {
+      this.isPublishing = publishing;
+    },
   }
 };
 </script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorFeaturedImageDrawer.vue
similarity index 100%
rename from notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue
rename to notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorFeaturedImageDrawer.vue
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorMetadataDrawer.vue
new file mode 100644
index 000000000..89fd086cb
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorMetadataDrawer.vue
@@ -0,0 +1,160 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 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>
+  <div>
+    <v-overlay
+      z-index="2000"
+      :value="drawer"
+      @click.native="closeDrawersByOverlay" />
+    <exo-drawer
+      id="editorMetadataDrawer"
+      ref="metadataDrawer"
+      v-model="drawer"
+      allow-expand
+      show-overlay
+      right
+      @closed="resetProperties">
+      <template slot="title">
+        <div class="d-flex my-auto text-header font-weight-bold text-color">
+          {{ $t('notes.metadata.properties.label') }}
+        </div>
+      </template>
+      <template slot="content">
+        <div class="pa-5">
+          <note-metadata-properties-form
+            ref="propertiesForm"
+            :note="noteObject"
+            :current-properties="currentNoteProperties"
+            :has-featured-image="hasFeaturedImage"
+            :summary-max-length="summaryMaxLength"
+            @properties-updated="propertiesUpdated" />
+        </div>
+      </template>
+      <template slot="footer">
+        <div class="d-flex width-fit-content ms-auto">
+          <v-btn
+            class="btn me-5"
+            @click="cancelChanges">
+            {{ $t('notes.button.cancel') }}
+          </v-btn>
+          <v-btn
+            :disabled="saveDisabled"
+            class="btn btn-primary"
+            @click="save">
+            {{ $t('notes.button.publish') }}
+          </v-btn>
+        </div>
+      </template>
+    </exo-drawer>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      noteObject: null,
+      drawer: false,
+      currentNoteProperties: {},
+      propertiesToSave: null,
+      summaryMaxLength: 1300,
+    };
+  },
+  props: {
+    hasFeaturedImage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    summaryLengthError() {
+      return this.noteObject?.properties?.summary?.length > this.summaryMaxLength;
+    },
+    propertiesChanged() {
+      return JSON.stringify(this.noteObject?.properties) !== JSON.stringify(this.currentNoteProperties);
+    },
+    saveDisabled() {
+      return (!this.propertiesChanged && !this.imageData) || this.summaryLengthError;
+    }
+  },
+  methods: {
+    propertiesUpdated(properties) {
+      if (!this.noteObject?.properties || !Object.keys(this.noteObject?.properties).length) {
+        this.noteObject.properties = structuredClone(properties || {});
+      }
+      if (!this.noteObject.properties?.featuredImage) {
+        this.noteObject.properties.featuredImage = {};
+      }
+      this.updateCurrentNoteObjectProperties(properties);
+      this.propertiesToSave = properties;
+    },
+    resetProperties() {
+      this.cancelChanges();
+    },
+    closeFeaturedImageDrawerByOverlay() {
+      this.$root.$emit('close-featured-image-byOverlay');
+    },
+    closeDrawersByOverlay() {
+      this.closeFeaturedImageDrawerByOverlay();
+    },
+    open(note) {
+      this.noteObject = note;
+      this.cloneProperties();
+      this.$refs.metadataDrawer.open();
+      this.$refs.propertiesForm?.initProperties();
+    },
+    cloneProperties() {
+      this.currentNoteProperties = structuredClone(
+        this.noteObject?.id &&
+          this.noteObject?.properties || {
+          noteId: 0,
+          summary: '',
+          featuredImage: {uploadId: null, mimeType: null, altText: null},
+          draft: true
+        });
+    },
+    cancelChanges() {
+      this.close();
+      setTimeout(() => {
+        this.$refs.propertiesForm.cancelChanges();
+      }, 1000);
+    },
+    close() {
+      this.$refs.metadataDrawer.close();
+    },
+    save() {
+      this.$emit('metadata-updated', this.propertiesToSave);
+      this.close();
+    },
+    updateCurrentNoteObjectProperties(properties) {
+      this.noteObject.properties.noteId = Number(properties.noteId);
+      this.noteObject.properties.summary = properties.summary;
+      this.noteObject.properties.draft = properties.draft;
+
+      this.noteObject.properties.featuredImage.id = properties?.featuredImage?.id;
+      this.noteObject.properties.featuredImage.uploadId = properties?.featuredImage?.uploadId;
+      this.noteObject.properties.featuredImage.mimeType = properties?.featuredImage?.mimeType;
+      this.noteObject.properties.featuredImage.altText = properties?.featuredImage?.altText;
+      this.noteObject.properties.featuredImage.toDelete = properties?.featuredImage?.toDelete;
+    }
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue
new file mode 100644
index 000000000..498ab83a1
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue
@@ -0,0 +1,272 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 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-form>
+    <label for="image-area">
+      <p class="text-color text-body mb-3">
+        {{ $t('notes.metadata.featuredImage.label') }}
+      </p>
+      <v-btn
+        v-if="!canShowFeaturedImagePreview"
+        name="image-area"
+        class="btn add-image-area d-flex"
+        height="206"
+        width="100%"
+        text
+        @click="openFeaturedImageDrawer">
+        <div class="d-flex width-fit-content mx-auto">
+          <v-icon
+            class="me-15 icon-default-color"
+            size="40">
+            fas fa-image
+          </v-icon>
+          <p class="text-header text-color my-auto">
+            {{ $t('notes.metadata.featuredImage.add.label') }}
+          </p>
+        </div>
+      </v-btn>
+      <v-sheet
+        v-else
+        height="206"
+        min-width="48"
+        class="card-border-radius image-preview">
+        <v-hover v-slot="{ hover }">
+          <div class="d-flex full-height">
+            <v-img
+              width="100%"
+              contain
+              :lazy-src="featuredImageLink"
+              :alt="savedFeaturedImageAltText"
+              :src="featuredImageLink">
+              <div
+                v-if="hover && canShowFeaturedImagePreview"
+                class="width-fit-content full-height ms-auto d-flex me-2">
+                <v-btn
+                  class="feature-image-button me-1 mt-2 mb-auto"
+                  icon
+                  @click.stop="removeNoteFeaturedImage">
+                  <v-icon
+                    class="feature-image-trash-icon"
+                    size="20">
+                    fa-solid fa-trash
+                  </v-icon>
+                </v-btn>
+                <v-btn
+                  class="feature-image-button mt-2 mb-auto"
+                  icon
+                  @click="openFeaturedImageDrawer">
+                  <v-icon
+                    class="feature-image-file-icon"
+                    size="20">
+                    fa-regular fa-file-image
+                  </v-icon>
+                </v-btn>
+              </div>
+            </v-img>
+          </div>
+        </v-hover>
+      </v-sheet>
+    </label>
+    <label for="summaryInputEditor">
+      <div class="mt-5">
+        <p class="text-color text-body mb-3">
+          {{ $t('notes.metadata.summary.label') }}
+        </p>
+        <v-textarea
+          v-model="summaryContent"
+          name="summaryInputEditor"
+          class="summary-metadata-input pt-0 overflow-auto"
+          :placeholder="$t('notes.metadata.add.summary.placeholder')"
+          rows="17"
+          row-height="8"
+          dense
+          outlined
+          auto-grow />
+        <span
+          class="d-flex justify-end me-1"
+          :class="{'error-color': summaryLengthError}">
+          {{ summaryContent?.length }}/{{ summaryMaxLength }}
+          <v-icon
+            class="ms-1 my-auto"
+            :class="[{ 'success-color': !summaryLengthError }, 'error-color']"
+            size="16">
+            fas fa-info-circle
+          </v-icon>
+        </span>
+      </div>
+    </label>
+  </v-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      initialized: false,
+      noteObject: null,
+      summaryContent: null,
+      imageData: null,
+      uploadId: null,
+      mimeType: null,
+      featuredImageAltText: null,
+      hasFeaturedImageValue: false,
+      removeFeaturedImage: false,
+      illustrationBaseUrl: `${eXo.env.portal.context}/${eXo.env.portal.rest}/notes/illustration/`,
+    };
+  },
+  props: {
+    note: {
+      type: Object,
+      default: null
+    },
+    currentProperties: {
+      type: Object,
+      default: null
+    },
+    hasFeaturedImage: {
+      type: Boolean,
+      default: false
+    },
+    summaryMaxLength: {
+      type: Number,
+      default: 1300
+    }
+  },
+  computed: {
+    summaryLengthError() {
+      return this.summaryContent?.length > this.summaryMaxLength;
+    },
+    savedFeaturedImageAltText() {
+      return this.noteObject?.properties.featuredImage?.altText;
+    },
+    canShowFeaturedImagePreview() {
+      return this.hasFeaturedImageValue || this.imageData?.length;
+    },
+    notedId() {
+      return this.noteObject?.id;
+    },
+    langParam() {
+      return this.noteObject?.lang && `&lang=${this.noteObject?.lang}` || '';
+    },
+    isDraft() {
+      return this.noteObject?.draftPage;
+    },
+    noteFeatureImageUpdatedDate() {
+      return this.noteObject?.properties?.featuredImage?.lastUpdated || 0;
+    },
+    featuredImageLink() {
+      return this.imageData || this.hasFeaturedImageValue
+          && `${this.illustrationBaseUrl}${this.notedId}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${this.langParam}` || '';
+    }
+  },
+  watch: {
+    'currentProperties.summary': function () {
+      this.summaryContent = this.currentProperties.summary;
+    },
+    'noteObject.lang': function () {
+      this.imageData = null;
+    },
+    note() {
+      this.noteObject = structuredClone(this.note);
+    },
+    hasFeaturedImage() {
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+    },
+    imageData() {
+      if (!this.imageData?.length) {
+        this.$root.$emit('reset-featured-image-data');
+      }
+      this.propertiesUpdated();
+    },
+    summaryContent() {
+      if (!this.noteObject?.properties) {
+        this.noteObject.properties = {};
+      }
+      this.noteObject.properties.summary = this.summaryContent;
+      this.propertiesUpdated();
+    },
+    uploadId() {
+      if (this.uploadId) {
+        this.removeFeaturedImage = false;
+      }
+      this.propertiesUpdated();
+    },
+  },
+  created() {
+    this.initProperties();
+    this.$root.$on('image-data', this.imageDataUpdated);
+    this.$root.$on('image-uploaded', (uploadId) => this.uploadId = uploadId);
+    this.$root.$on('image-alt-text', (altText) => this.featuredImageAltText = altText);
+  },
+  methods: {
+    initProperties() {
+      this.noteObject = structuredClone(this.note);
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+      this.summaryContent = this.currentProperties?.summary || '';
+    },
+    propertiesUpdated() {
+      const savedFeaturedImageId = this.noteObject?.properties?.featuredImage?.id;
+      const properties = {
+        noteId: this.noteObject?.id,
+        summary: this.summaryContent,
+        featuredImage: {
+          id: savedFeaturedImageId,
+          uploadId: this.uploadId,
+          mimeType: this.mimeType,
+          altText: this.featuredImageAltText
+        },
+        draft: this.isDraft || !this.notedId
+      };
+      if (this.notedId) {
+        properties.featuredImage.toDelete = this.removeFeaturedImage;
+      }
+      this.$emit('properties-updated', properties);
+    },
+    imageDataUpdated(data, mimeType) {
+      this.imageData = data;
+      this.mimeType = mimeType;
+    },
+    openFeaturedImageDrawer() {
+      this.$root.$emit('open-featured-image-drawer', {
+        altText: this.featuredImageAltText || this.savedFeaturedImageAltText,
+        src: this.featuredImageLink
+      });
+    },
+    removeNoteFeaturedImage() {
+      this.featuredImage = null;
+      this.removeFeaturedImage = true;
+      this.hasFeaturedImageValue = false;
+      this.$root.$emit('reset-featured-image-data');
+      this.resetUploadedImage();
+      this.propertiesUpdated();
+    },
+    resetUploadedImage() {
+      this.imageData = null;
+      this.uploadId = null;
+    },
+    cancelChanges() {
+      this.noteObject.properties = structuredClone(this.currentProperties || {});
+      this.summaryContent = this.currentProperties?.summary || '';
+      this.featuredImageAltText = this.savedFeaturedImageAltText;
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+      this.resetUploadedImage();
+    }
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
index 91112ea13..b98d5b607 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
@@ -3,8 +3,9 @@ import TranslationsEditBar from '../notes-rich-editor/components/TranslationsEdi
 import NoteTreeviewDrawer from '../notes/components/NoteTreeviewDrawer.vue';
 import NoteEditorTopBar from '../notes-rich-editor/components/NoteEditorTopBar.vue';
 import NoteFullRichEditor from './components/NoteFullRichEditor.vue';
-import NoteEditorMetadataDrawer from './components/NoteEditorMetadataDrawer.vue';
-import NoteEditorFeaturedImageDrawer from './components/NoteEditorFeaturedImageDrawer.vue';
+import NoteEditorMetadataDrawer from './components/note-properties/NoteEditorMetadataDrawer.vue';
+import NoteEditorFeaturedImageDrawer from './components/note-properties/NoteEditorFeaturedImageDrawer.vue';
+import NoteMetadataPropertiesForm from './components/note-properties/NoteMetadataPropertiesForm.vue';
 
 const components = {
   'note-custom-plugins': NoteCustomPlugins,
@@ -13,7 +14,8 @@ const components = {
   'note-editor-top-bar': NoteEditorTopBar,
   'note-full-rich-editor': NoteFullRichEditor,
   'note-editor-metadata-drawer': NoteEditorMetadataDrawer,
-  'note-editor-featured-image-drawer': NoteEditorFeaturedImageDrawer
+  'note-editor-featured-image-drawer': NoteEditorFeaturedImageDrawer,
+  'note-metadata-properties-form': NoteMetadataPropertiesForm
 };
 
 for (const key in components) {
diff --git a/notes-webapp/webpack.prod.js b/notes-webapp/webpack.prod.js
index 022fdf509..a896dc3f8 100644
--- a/notes-webapp/webpack.prod.js
+++ b/notes-webapp/webpack.prod.js
@@ -19,7 +19,9 @@ const config = {
     engagementCenterExtensions: './src/main/webapp/vue-app/engagementCenterExtensions/extensions.js',
     connectorEventExtensions: './src/main/webapp/vue-app/connectorEventExtensions/extensions.js',
     notePageView: './src/main/webapp/vue-app/note-page-view/main.js',
-    notesNotificationExtension: './src/main/webapp/vue-app/notification-extensions/main.js'
+    notesNotificationExtension: './src/main/webapp/vue-app/notification-extensions/main.js',
+    notesPublication: './src/main/webapp/vue-app/notes-publication/main.js',
+
   },
   output: {
     publicPath: '',