diff --git a/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties b/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties
index dfa82005f..b3c8e2ea1 100644
--- a/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties
@@ -23,9 +23,12 @@ siteNavigation.label.moveDown=Move down
 siteNavigation.drawer.addNode.title=Add node
 siteNavigation.drawer.editNode.title=Edit node
 siteNavigation.label.nodeLabel.title=Node Label
+siteNavigation.label.nodeLabel.placeholder=Give a name to your item
 siteNavigation.label.nodeLabel.description=The node name is also the page name
 siteNavigation.label.nodeId.title=Node name
+siteNavigation.label.nodeId.placeholder=Enter an ID that will be reminded in the URL
 siteNavigation.label.icon.title=Node's icon
+siteNavigation.label.icon.upload=Upload
 siteNavigation.label.icon.description=The image is displayed with the node label in the platform's left navigation menu
 siteNavigation.btn.deleteIcon.title=Delete Icon
 siteNavigation.btn.changeIcon.title=Change Icon
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 040df8eac..a012b6203 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
@@ -33,17 +33,17 @@
           color="white"
           flat
           dense>
-            <span
-              class="font-weight-bold">
-              {{ siteName }}
-            </span>
-            <v-spacer v-if="!$refs.siteNavigationDrawer?.expand" />
-            <v-btn
-              v-if="isMetaSite"
-              @click="createNode"
-              class="btn btn-primary ms-2">
-              {{ $t('siteNavigation.label.btn.createNode') }}
-            </v-btn>
+          <span
+            class="font-weight-bold">
+            {{ siteName }}
+          </span>
+          <v-spacer v-if="!$refs.siteNavigationDrawer?.expand" />
+          <v-btn
+            v-if="isMetaSite"
+            @click="createNode"
+            class="btn btn-primary ms-2">
+            {{ $t('siteNavigation.label.btn.createNode') }}
+          </v-btn>
           <v-spacer v-if="$refs.siteNavigationDrawer?.expand" />
           <select
             id="siteNavigationDrawerFilterSelect"
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 0828420cc..a5b353dbf 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
@@ -43,9 +43,8 @@
           <v-card-text class="d-flex pb-2">
             <v-label>
               <span class="text-color font-weight-bold text-start text-truncate-2">
-                {{ $t('siteNavigation.label.nodeLabel.title') }} *              
+                {{ $t('siteNavigation.label.nodeLabel.title') }}
               </span>
-              <p class="caption">{{ $t('siteNavigation.label.nodeLabel.description') }} </p>
             </v-label>
           </v-card-text>
           <v-card-text class="d-flex py-0">
@@ -55,6 +54,7 @@
               type="text"
               required="required"
               :rules="[nodeLabelRules.required]"
+              :placeholder="$t('siteNavigation.label.nodeLabel.placeholder')"
               outlined
               dense 
               @blur="blurOnNodeLabel">
@@ -68,19 +68,19 @@
               </template>
             </v-text-field>
           </v-card-text>
-          <v-card-text class="d-flex flex-grow-1 pb-2">
-            <v-label>
-              <span class="text-color font-weight-bold text-start mr-6 text-truncate-2">
-                {{ $t('siteNavigation.label.nodeId.title') }} *              
-              </span>
-              <p
-                v-if="nodeId && nodeId.length"
-                class="caption text-break mx-auto text-wrap text-left">
-                {{ nodeUrl }}
-              </p>
-            </v-label>
+          <v-card-text class="py-2">
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <span class="text-color font-weight-bold text-start mr-6 text-truncate-2 v-label">
+                  {{ $t('siteNavigation.label.nodeId.title') }}
+                </span>
+              </div>
+              <v-switch
+                v-model="displayNodeName"
+                class="mt-0 me-0" />
+            </div>
           </v-card-text>
-          <v-card-text class="d-flex py-0">
+          <v-card-text v-if="displayNodeName" class="d-flex pt-0">
             <v-text-field
               v-model="nodeId"
               class="pt-0"
@@ -88,96 +88,10 @@
               required="required"
               :rules="nodeIdRules"
               :disabled="disableNodeId"
+              :placeholder="$t('siteNavigation.label.nodeId.placeholder')"
               outlined
               dense />
           </v-card-text>
-          <v-card-text class="d-flex flex-grow-1 pb-2">
-            <v-label>
-              <span class="text-color font-weight-bold text-start mr-6 text-truncate-2">
-                {{ $t('siteNavigation.label.icon.title') }}             
-              </span>
-              <p class="caption"> {{ $t('siteNavigation.label.icon.description') }}  </p>
-            </v-label>
-          </v-card-text>
-          <v-card-text class="d-flex py-0 pb-8">
-            <div
-              class="d-flex flex-grow-1 full-width">
-              <div class="me-2 ms-auto">
-                <v-tooltip bottom>
-                  <template #activator="{ on, attrs }">
-                    <v-btn
-                      v-on="on"
-                      v-bind="attrs"
-                      id="changeIconButton"
-                      class="light-black-background border-color"
-                      icon
-                      outlined
-                      dark
-                      small
-                      @click="openNodeIconPickerDrawer">
-                      <v-icon size="13">fas fa-file-image</v-icon>
-                    </v-btn>
-                  </template>
-                  <span>{{ $t('siteNavigation.btn.changeIcon.title') }}</span>
-                </v-tooltip>
-              </div>
-            </div>
-          </v-card-text>
-          <v-card-text class="flex-grow-1 align-center pb-8">
-            <v-icon
-              size="32"
-              color="black">
-              {{ icon }}
-            </v-icon>
-          </v-card-text>
-          <v-card-text class="d-flex flex-grow-1 pb-2">
-            <v-label>
-              <span class="text-color font-weight-bold pt-2">
-                {{ $t('siteNavigation.label.visibility.title') }} 
-              </span>
-            </v-label>
-            <v-tooltip bottom>
-              <template #activator="{ on, attrs }">
-                <v-icon
-                  v-on="on"
-                  v-bind="attrs"
-                  color="black"
-                  size="24"
-                  class="pl-2">
-                  fa-info-circle
-                </v-icon>
-              </template>
-              <span>{{ $t('siteNavigation.label.visibility.info') }}</span>
-            </v-tooltip>
-          </v-card-text>
-          <v-card-text>
-            <div class="d-flex flex-row">
-              <v-switch      
-                v-model="visible"
-                class="mt-0 me-1" />
-              <span class="caption pt-1">
-                {{ $t('siteNavigation.label.visibility.visible') }}
-              </span>
-            </div>
-            <div
-              class="d-flex flex-row"
-              v-if="visible">
-              <v-switch   
-                v-model="isScheduled" 
-                class="mt-0 me-1" />
-              <span class="caption pt-1">
-                {{ $t('siteNavigation.label.visibility.scheduleVisibility') }}
-              </span>
-            </div>
-          </v-card-text>
-          <v-card-text class="pt-0" v-if="visible && isScheduled">
-            <site-navigation-schedule-date-pickers
-              :start-schedule-date="startScheduleDate"
-              :end-schedule-date="endScheduleDate"
-              :start-schedule-time="startScheduleTime"
-              :end-schedule-time="endScheduleTime"
-              @change="updateDates" />
-          </v-card-text>
           <v-card-text class="d-flex flex-grow-1 text-no-wrap text-left font-weight-bold pb-2">
             <v-label>
               <span class="text-color font-weight-bold">
@@ -185,7 +99,7 @@
               </span>
             </v-label>
           </v-card-text>
-          <v-card-text class="d-flex flex-row">
+          <v-card-text class="d-flex flex-row pt-0">
             <div class="d-flex flex-column">
               <v-radio-group
                 v-model="nodeType"
@@ -218,6 +132,72 @@
               </v-radio-group>
             </div>
           </v-card-text>
+          <v-card-text class="d-flex flex-grow-1 pb-2 pt-0">
+            <v-label>
+              <span class="text-color font-weight-bold text-start mr-6 text-truncate-2">
+                {{ $t('siteNavigation.label.icon.title') }}
+              </span>
+            </v-label>
+          </v-card-text>
+          <v-card-text class="d-flex pt-2">
+            <div
+              class="d-flex flex-grow-1 full-width">
+              <v-icon
+                size="32"
+                class="icon-default-color">
+                {{ icon }}
+              </v-icon>
+              <v-tooltip bottom>
+                <template #activator="{ on, attrs }">
+                  <v-btn
+                    v-on="on"
+                    v-bind="attrs"
+                    id="changeIconButton"
+                    class="btn btn-primary ms-3"
+                    outlined
+                    @click="openNodeIconPickerDrawer">
+                    <span>{{ $t('siteNavigation.label.icon.upload') }}</span>
+                  </v-btn>
+                </template>
+                <span>{{ $t('siteNavigation.btn.changeIcon.title') }}</span>
+              </v-tooltip>
+            </div>
+          </v-card-text>
+          <v-card-text class="d-flex flex-grow-1 pb-0">
+            <v-label>
+              <span class="text-color font-weight-bold pt-2">
+                {{ $t('siteNavigation.label.visibility.title') }}
+              </span>
+            </v-label>
+          </v-card-text>
+          <v-card-text class="pt-2">
+            <div class="d-flex align-center justify-space-between flex-row">
+              <span class="caption">
+                {{ $t('siteNavigation.label.visibility.visible') }}
+              </span>
+              <v-switch
+                v-model="visible"
+                class="mt-0 me-0" />
+            </div>
+            <div
+              class="d-flex align-center justify-space-between flex-row"
+              v-if="visible">
+              <span class="caption pt-1">
+                {{ $t('siteNavigation.label.visibility.scheduleVisibility') }}
+              </span>
+              <v-switch
+                v-model="isScheduled"
+                class="mt-0 me-0" />
+            </div>
+          </v-card-text>
+          <v-card-text class="pt-0" v-if="visible && isScheduled">
+            <site-navigation-schedule-date-pickers
+              :start-schedule-date="startScheduleDate"
+              :end-schedule-date="endScheduleDate"
+              :start-schedule-time="startScheduleTime"
+              :end-schedule-time="endScheduleTime"
+              @change="updateDates" />
+          </v-card-text>
         </v-form>
       </template>
       <template slot="footer">
@@ -276,6 +256,7 @@ export default {
       visible: true,
       isScheduled: false,
       disableNodeId: false,
+      displayNodeName: false,
       nodeType: 'Group',
       parentNavigationNodeUrl: '',
       editMode: false,
@@ -300,7 +281,7 @@ export default {
   },
   computed: {
     icon() {
-      return this.nodeIcon ? this.nodeIcon : 'fas fa-folder';
+      return this.nodeIcon ? this.nodeIcon : 'fas fa-project-diagram';
     },
     title() {
       return this.editMode ? this.$t('siteNavigation.drawer.editNode.title') : this.$t('siteNavigation.drawer.addNode.title');
@@ -311,10 +292,6 @@ export default {
     displayNextBtn() {
       return this.editMode ? this.nodeType === 'pageOrLink' && !this.navigationNode.pageKey : this.nodeType === 'pageOrLink';
     },
-    nodeUrl() {
-      const nodeuri = `${this.$t('siteNavigation.label.nodeId.description')}${this.parentNavigationNodeUrl}`;
-      return this.editMode ? nodeuri : `${nodeuri}/${this.nodeId}` ;
-    }
   },
   created() {
     this.$root.$on('open-site-navigation-add-node-drawer', this.open);
@@ -365,6 +342,7 @@ export default {
       this.nodeLabel = null;
       this.visible = true;
       this.isScheduled = false;
+      this.displayNodeName = false;
       this.nodeType = 'Group';
       this.disableNodeId = false;
       this.editMode= false;