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 10f9630f41..c4e81abaab 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 b1d1cc1b49..5aadc45123 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
@@ -68,6 +68,8 @@ notes.featuredImage.size.error.message=Featured image size should be less or equ
 notes.publication.publish.label=Publish
 notes.publication.label=Choose your publication options
 notes.publication.check.properties.label=Check the teaser
+notes.publication.publish.next.label=Next
+
 
 
 popup.confirm=Confirm
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 43f44b1c04..32f05dd990 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
@@ -67,6 +67,7 @@ notes.featuredImage.size.error.message=La taille de l'illustration doit être in
 notes.publication.publish.label=Publier
 notes.publication.label=Choisir les options de publication
 notes.publication.check.properties.label=Vérifier l'accroche
+notes.publication.publish.next.label=Suivant
 
 popup.confirm=Confirmer
 popup.msg.confirmation=Confirmation
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 ca30c2f91a..eb15d3f0eb 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,7 @@
   }
 }
 
-#editorMetadataDrawer {
+#editorMetadataDrawer, #editorPublicationDrawer {
 
   .add-image-area, .image-preview {
     background-color: @primaryBackground !important;
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 4ea5b5428f..7b894e9ddf 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
@@ -80,6 +80,10 @@
       :has-featured-image="hasFeaturedImage" />
     <note-publication-drawer
       ref="editorPublicationDrawer"
+      :has-featured-image="hasFeaturedImage"
+      :is-publishing="isPublishing"
+      @publish="postAndPublishNote"
+      @metadata-updated="metadataUpdated"
       @closed="publicationDrawerClosed" />
   </div>
 </template>
@@ -94,7 +98,8 @@ export default {
       instanceReady: false,
       noteTitleMaxLength: 500,
       updatingProperties: false,
-      enablePostKeys: 0
+      enablePostKeys: 0,
+      isPublishing: false
     };
   },
   props: {
@@ -234,6 +239,15 @@ 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;
     }
@@ -249,6 +263,9 @@ export default {
     document.addEventListener('note-custom-plugins', this.openCustomPluginsDrawer);
   },
   methods: {
+    setPublishing(publishing) {
+      this.isPublishing = publishing;
+    },
     metadataUpdated(properties) {
       this.updatingProperties = true;
       this.noteObject.properties = properties;
@@ -343,12 +360,20 @@ export default {
         }, 200);
       }
     },
-    postNote(toPublish) {
-      if (this.newPublicationDrawerEnabled && this.publicationEnabled) {
+    postNote() {
+      if (this.newPublicationDrawerEnabled && this.publicationEnabled
+          && !this.isTranslation && !this.editMode) {
         this.openPublicationDrawer(this.noteObject);
         return;
       }
-      this.$emit('post-note', toPublish);
+      this.postAndPublishNote();
+    },
+    postAndPublishNote(note) {
+      if (this.newPublicationDrawerEnabled) {
+        this.noteObject = note;
+        this.updateData();
+      }
+      this.$emit('post-note', false);
     },
     resetEditorData() {
       this.noteObject.title = null;
@@ -521,7 +546,7 @@ export default {
       return this.$refs.featuredImageDrawer.isClosed();
     },
     openPublicationDrawer() {
-      this.$refs.editorPublicationDrawer.open();
+      this.$refs.editorPublicationDrawer.open(this.noteObject);
     },
     publicationDrawerClosed() {
       this.enablePostKeys ++;
@@ -536,7 +561,7 @@ export default {
       }}));
     },
     displayNoteTitleMaxLengthCheckAlert(newTitle, oldTitle) {
-      if (newTitle.length > this.noteTitleMaxLength) {
+      if (newTitle?.length > this.noteTitleMaxLength) {
         this.noteObject.title = oldTitle;
         this.displayAlert({
           type: 'warning',
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
index 5145528b5c..3c87df704f 100644
--- 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
@@ -44,7 +44,7 @@
             :current-properties="currentNoteProperties"
             :has-featured-image="hasFeaturedImage"
             :summary-max-length="summaryMaxLength"
-            @properties-updated="propertiesUpdated"/>
+            @properties-updated="propertiesUpdated" />
         </div>
       </template>
       <template slot="footer">
@@ -73,7 +73,8 @@ export default {
     return {
       noteObject: null,
       drawer: false,
-      currentNoteProperties: null,
+      currentNoteProperties: {},
+      propertiesToSave: null,
       summaryMaxLength: 1300,
     };
   },
@@ -96,7 +97,15 @@ export default {
   },
   methods: {
     propertiesUpdated(properties) {
-      this.noteObject.properties = properties;
+      if (!this.noteObject?.properties) {
+        this.noteObject.properties = {};
+      }
+      if (!this.noteObject?.properties?.featuredImage) {
+        this.noteObject.properties.featuredImage = {};
+      }
+
+      this.updateCurrentNoteObjectProperties(properties);
+      this.propertiesToSave = properties;
     },
     resetProperties() {
       this.cancelChanges();
@@ -115,14 +124,27 @@ export default {
     },
     cancelChanges() {
       this.close();
-      this.$refs.propertiesForm.cancelChanges();
+      setTimeout(() => {
+        this.$refs.propertiesForm.cancelChanges();
+      }, 1000);
     },
     close() {
       this.$refs.metadataDrawer.close();
     },
     save() {
-      this.$emit('metadata-updated', this.noteObject.properties);
+      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;
     }
   }
 };
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
index b7f9317adc..d0667260f2 100644
--- 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
@@ -175,12 +175,15 @@ export default {
     }
   },
   watch: {
-    note() {
-      this.noteObject = structuredClone(this.note);
+    '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;
     },
@@ -226,7 +229,8 @@ export default {
           uploadId: this.uploadId,
           mimeType: this.mimeType,
           altText: this.featuredImageAltText,
-          toDelete: this.removeFeaturedImage || (!this.uploadId && !savedFeaturedImageId)
+          toDelete: this.removeFeaturedImage ||
+              (this.isDraft && !this.uploadId && !savedFeaturedImageId)
         },
         draft: this.isDraft || !this.notedId
       };
@@ -237,7 +241,10 @@ export default {
       this.mimeType = mimeType;
     },
     openFeaturedImageDrawer() {
-      this.$root.$emit('open-featured-image-drawer', {altText: this.featuredImageAltText || this.savedFeaturedImageAltText});
+      this.$root.$emit('open-featured-image-drawer', {
+        altText: this.featuredImageAltText || this.savedFeaturedImageAltText,
+        src: this.featuredImageLink
+      });
     },
     removeNoteFeaturedImage() {
       this.featuredImage = null;
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-publication/NotePublicationDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-publication/NotePublicationDrawer.vue
index 0ea1ff01ea..7ad0134b18 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-publication/NotePublicationDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-publication/NotePublicationDrawer.vue
@@ -34,12 +34,85 @@
       @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-form />
+          <v-stepper
+            v-model="stepper"
+            :class="expanded && 'flex-row' || 'flex-column'"
+            class="ma-0 d-flex"
+            vertical
+            flat>
+            <div
+              :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="1300"
+                          @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,
+                'mt-4': !expanded && stepper === 2,
+              }"
+              class="flex-grow-0 flex-shrink-0">
+              <v-stepper-step
+                :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">
+                  <div
+                    class="d-flex flex-column mt-8">
+                    <v-scroll-y-transition hide-on-leave>
+                      <div class="mb-2">
+                      </div>
+                    </v-scroll-y-transition>
+                  </div>
+                </div>
+              </v-slide-y-transition>
+            </div>
+          </v-stepper>
         </div>
       </template>
       <template slot="footer">
@@ -51,8 +124,9 @@
           </v-btn>
           <v-btn
             class="btn btn-primary"
+            :loading="isPublishing"
             @click="save">
-            {{ $t('notes.button.publish') }}
+            {{ saveButtonLabel }}
           </v-btn>
         </div>
       </template>
@@ -64,24 +138,91 @@
 export default {
   data() {
     return {
+      stepper: 1,
       drawer: false,
       noteObject: null,
+      currentNoteProperties: {},
       expanded: false,
     };
   },
+  props: {
+    hasFeaturedImage: {
+      type: Boolean,
+      default: false
+    },
+    isPublishing: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    saveButtonLabel() {
+      return (this.stepper === 1 && !this.expanded) && this.$t('notes.publication.publish.next.label')
+                                                  || this.$t('notes.button.publish');
+    }
+  },
+  watch: {
+    expanded() {
+      this.stepper = this.expanded && 2 || 1;
+    },
+    isPublishing() {
+      if (!this.isPublishing) {
+        this.close();
+      }
+    }
+  },
   methods: {
+    propertiesUpdated(properties) {
+      if (!this.noteObject?.properties) {
+        this.noteObject.properties = {};
+      }
+      if (!this.noteObject?.properties?.featuredImage) {
+        this.noteObject.properties.featuredImage = {};
+      }
+
+      this.updateCurrentNoteObjectProperties(properties);
+      this.propertiesToSave = properties;
+    },
     open(noteObject) {
       this.noteObject = noteObject;
+      this.currentNoteProperties = structuredClone(this.noteObject?.properties || {});
       this.$refs.publicationDrawer.open();
       setTimeout(() => {
         this.$refs.publicationDrawer.toogleExpand();
       }, 50);
+      this.$refs.propertiesForm?.initProperties();
     },
     close() {
+      this.stepper = 1;
       this.$refs.publicationDrawer.close();
     },
     reset() {
       this.$emit('closed');
+    },
+    cancel() {
+      this.close();
+      setTimeout(() => {
+        this.$refs.propertiesForm.cancelChanges();
+      }, 1000);
+    },
+    save() {
+      if (!this.expanded && this.stepper === 1) {
+        this.stepper += 1;
+        return;
+      }
+      this.$emit('metadata-updated', this.noteObject.properties);
+      this.$emit('publish', this.noteObject);
+    },
+    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;
     }
   }
 };