diff --git a/notes-webapp/src/main/webapp/skin/less/notes/editor.less b/notes-webapp/src/main/webapp/skin/less/notes/editor.less
new file mode 100644
index 0000000000..82e76f9484
--- /dev/null
+++ b/notes-webapp/src/main/webapp/skin/less/notes/editor.less
@@ -0,0 +1,130 @@
+#notesOverviewApplication {
+
+  .notes-application-content {
+
+    blockquote {
+      font-weight: 400 !important;
+      padding: 10px !important;
+      border-left-color: @primaryColor !important;
+      margin: 0 0 10px 0 !important;
+
+      p {
+        margin-bottom: 0 !important;
+        line-height: 1.4 !important;
+        font-size: 16px !important;
+        font-style: normal !important;
+      }
+
+      strong {
+        font-weight: bold;
+      }
+    }
+
+    a {
+      color: #0782C1;
+    }
+
+    ol, ul, dl {
+      margin: 0 0 10px 0 !important;
+      padding: 0 40px !important;
+    }
+
+    ol {
+      list-style-type: decimal;
+
+      & ol {
+        list-style-type: lower-latin;
+
+        & ol {
+          list-style-type: lower-roman;
+
+          & ol {
+            list-style-type: upper-latin;
+
+            & ol {
+              list-style-type: upper-roman;
+            }
+          }
+        }
+      }
+    }
+
+    .video {
+      position: relative;
+      clear: both;
+      width: 80%;
+      height: 0;
+      padding-bottom: 33.74%;
+      margin: 15px auto;
+
+      iframe {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    ul li, ol li {
+      list-style: revert;
+      font-size: 16px;
+      line-height: 1.4;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: normal;
+      line-height: 1.2;
+    }
+
+    h1, h2, h3 {
+      font-weight: 500 !important;
+      line-height: 1.2 !important;
+    }
+
+    h1 {
+      font-size: 28px !important;
+      margin-top: 45px !important;
+    }
+
+    h2 {
+      font-size: 23px !important;
+      margin-top: 35px !important;
+    }
+
+    h3 {
+      font-size: 18px !important;
+      margin-top: 25px !important;
+    }
+
+    p, li {
+      line-height: 1.4 !important;
+    }
+
+    p, li, blockquote {
+      font-size: 16px !important;
+    }
+
+    table {
+      margin-top: 0 !important;
+      margin-bottom: 10px !important;
+
+      td {
+        line-height: 1.4 !important;
+        font-size: 16px !important;
+      }
+
+      td:not(:has(p)) {
+        padding-bottom: 10px;
+      }
+    }
+
+    .content-link {
+      font-size: 16px !important;
+    }
+
+    img {
+      margin: 10px !important;
+    }
+
+  }
+}
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 b2d6f4f5c0..759927716f 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -7,7 +7,7 @@
 @import "Notifications/Style.less";
 @import "Sprites/Style.less";
 @import "UIWikiRichTextEditor/Stylesheet.less";
-
+@import "editor.less";
 /************ New css feature notes ****************/
 .customPluginsDrawer {
   z-index: 99999 !important;
@@ -193,6 +193,14 @@
   }
 }
 
+#notesOverviewApplication {
+
+  .notes-application-content {
+    overflow: auto;
+    min-height: calc(~"100vh - 350px");
+    margin: 4px;
+  }
+}
 
 #notesOverviewApplication, .notesApplication {
   max-width: 100%;
@@ -218,51 +226,6 @@
 		  margin: 5px auto 0;
 	  }
   }
-  .notes-application-content {
-    overflow: auto;
-    min-height: calc(~"100vh - 350px");
-    .video {
-      position: relative;
-      clear: both;
-      width: 80%;
-      height: 0;
-      padding-bottom: 33.74%;
-      margin: 15px auto;
-
-      iframe {
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    h1, h2, h3 {
-      font-weight: 400 !important;
-    }
-    
-    h1 {
-      font-size: 34px !important;
-    }
-    
-    h2 {
-      font-size: 28px !important;
-    }
-    
-    h3 {
-      font-size: 21.84px !important;
-    }
-    
-    p, li {
-      font-size:18.6667px !important;
-      line-height: 1.4 !important;
-    }
-    
-    blockquote p {
-      font-size:17.5px !important;
-      font-weight: 300 !important;
-    }
-  }
 
   table {
     width: auto;
@@ -310,13 +273,6 @@
         }
       }
     }
-
-    .notes-application-content {
-      ul li {
-        list-style-position: inside;
-        list-style-type: disc;
-      }
-    }
   }
 
   .notes-tree-items {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue
index 31d57126ed..f0ee0628a2 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue
@@ -336,7 +336,7 @@ export default {
         elementContainer.appendChild(contentSummary);
         elementContainer.appendChild(table);
         div.appendChild(elementContainer);
-        table.setAttribute('width', this.width);
+        table.setAttribute('style', `width:${this.width}px !important`);
         table.setAttribute('border', this.border);
         table.setAttribute('cellPadding', this.internal);
         table.setAttribute('height', this.height);
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 66c537afdb..10c78c4405 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
@@ -21,6 +21,16 @@
             <div class="notesFormLeftActions d-inline-flex align-center me-10">
               <img :src="srcImageNote">
               <span class="notesFormTitle ps-2">{{ noteFormTitle }}</span>
+<<<<<<< HEAD
+=======
+              <v-icon
+                v-if="notesMultilingualActive && note.id"
+                size="22"
+                class="primary--text clickable pa-2"
+                @click="showTranslations">
+                fa-language
+              </v-icon>
+>>>>>>> 03711416 (feat: Notes editor is not wysiwyg - EXO-65725 - Meeds-io/MIPs#71 (#721))
             </div>
             <div class="notesFormRightActions pr-7">
               <p class="draftSavingStatus mr-7">{{ draftSavingStatus }}</p>
@@ -546,13 +556,27 @@ export default {
           removePlugins = `${removePlugins},${ckEditorRemovePlugins}`;
         }
       }
-      CKEDITOR.addCss('h1 { font-size: 34px;font-weight: 400;}');
-      CKEDITOR.addCss('h2 { font-size: 28px;font-weight: 400;}');
-      CKEDITOR.addCss('h3 { font-size: 21.84px;font-weight: 400;}');
-      CKEDITOR.addCss('p,li { font-size: 18.6667px;}');
-      CKEDITOR.addCss('blockquote p { font-size: 17.5px;font-weight: 300;}');
+
+      CKEDITOR.addCss('h1 { font-size: 28px;margin-top:45px; }');
+      CKEDITOR.addCss('h2 { font-size: 23px;margin-top:35px; }');
+      CKEDITOR.addCss('h3 { font-size: 18px;margin-top:25px; }');
+      CKEDITOR.addCss('h1, h2, h3 { font-weight: 500; line-height:1.2; }');
+      CKEDITOR.addCss('p,li, table td { line-height:1.4}');
+      CKEDITOR.addCss('p, li, table td, blockquote { font-size: 16px;}');
+      CKEDITOR.addCss('ol, ul, dl {margin: 0 0 10px 0px;padding: 0 40px;}');
+      CKEDITOR.addCss('ul li {list-style: revert; list-style-type: inherit !important;}');
+      CKEDITOR.addCss('table td:not(:has(p)) {padding-bottom: 10px;}');
+      CKEDITOR.addCss('blockquote {font-weight: 400; font-style:normal !important; padding: 10px !important; margin: 0 0 10px 0 !important;}');
+      CKEDITOR.addCss('table {margin-bottom: 10px !important; margin-top: 0 !important;}');
+      CKEDITOR.addCss('td {margin-bottom: 10px !important; margin-top: 0 !important;}');
+      CKEDITOR.addCss('img {margin:10px !important; }');
       CKEDITOR.addCss('.cke_editable { font-size: 14px; line-height: 1.4 !important;}');
       CKEDITOR.addCss('.placeholder { color: #5f708a!important;}');
+      CKEDITOR.addCss('ol li {list-style-type: decimal !important;}');
+      CKEDITOR.addCss('ol ol li {list-style-type: lower-latin !important;}');
+      CKEDITOR.addCss('ol ol ol li {list-style-type: lower-roman !important;}');
+      CKEDITOR.addCss('ol ol ol ol li {list-style-type: upper-latin !important;}');
+      CKEDITOR.addCss('ol ol ol ol ol li {list-style-type: upper-roman !important;}');
 
       // this line is mandatory when a custom skin is defined
 
@@ -570,7 +594,7 @@ export default {
         toolbarLocation: 'top',
         extraAllowedContent: 'table[!summary]; img[style,class,src,referrerpolicy,alt,width,height]; span(*)[*]{*}; span[data-atwho-at-query,data-atwho-at-value,contenteditable]; a[*];i[*];',
         removeButtons: '',
-        enterMode: CKEDITOR.ENTER_BR,
+        enterMode: CKEDITOR.ENTER_P,
         shiftEnterMode: CKEDITOR.ENTER_BR,
         toolbar: [
           { name: 'format', items: ['Format'] },
@@ -582,6 +606,10 @@ export default {
           { name: 'insert' },
           { name: 'links', items: [ 'simpleLink','InsertOptions'] },
         ],
+        indentBlock: {
+          offset: 40,
+          unit: 'px'
+        },
         format_tags: 'p;h1;h2;h3',
         autoGrow_minHeight: self.noteFormContentHeight,
         height: self.noteFormContentHeight,
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue
new file mode 100644
index 0000000000..c30eaed57e
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue
@@ -0,0 +1,223 @@
+<template>
+  <div
+    v-if="showTranslationbar"
+    id="translationBar"
+    class="d-flex flex-nowrap text-truncate px-1 pt-4 pb-3">
+    <v-btn
+      id="translationBarBackButton"
+      class="px-4  my-auto "
+      small
+      icon
+      @click="hide">
+      <v-icon size="22" class="icon-default-color">fa-arrow-left</v-icon>
+    </v-btn>
+    <div class="px-4 height-auto left-separator right-separator d-flex flex-nowrap">
+      <div class=" d-flex flex-wrap my-auto  height-auto translation-chips">
+        <div v-if="!isMobile" class=" d-flex flex-wrap my-auto  height-auto">
+          <v-chip
+            color="primary"
+            class="ma-1"
+            small
+            :outlined="!!selectedTranslation.value"
+            @click="changeTranslation({value: ''})">
+            {{ $t('notes.label.translation.originalVersion') }}
+          </v-chip>
+          <div v-if="!isMobile" class="ps-2 ma-2">{{ $t('notes.label.translations') }}</div>
+          <div v-if="!translations || translations.length===0" class="ps-2 ma-2 text-sub-title">{{ $t('notes.label.noTranslations') }}</div>
+          <v-chip
+            v-for="(translation, i) in translationToShow"
+            :key="i"
+            close
+            small
+            :outlined="translation.value!==selectedTranslation.value"
+            color="primary"
+            @click:close="removeTranslation(translation)"
+            @click="changeTranslation(translation)"
+            class="ma-1">
+            {{ translation.text }}
+          </v-chip>
+        </div>
+        <v-menu
+          v-if="moreTranslations.length>0"
+          v-model="moreTranslationsMenu"
+          class=" ma-1"
+          bottom>
+          <template #activator="{ on, attrs }">
+            <v-btn
+              v-show="!isMobile"
+              height="32"
+              width="32"
+              fab
+              depressed
+              v-bind="attrs"
+              v-on="on">
+              <v-avatar
+                size="
+              32"
+                class="notDisplayedIdentitiesOverlay">
+                <div class="notDisplayedIdentities d-flex align-center justify-center">
+                  +{{ moreTranslations.length }}
+                </div>
+              </v-avatar>
+            </v-btn>
+            <v-chip
+              v-show="isMobile"
+              color="primary"
+              class="ma-1"
+              small
+              v-bind="attrs"
+              v-on="on">
+              {{ !!selectedTranslation.value ? selectedTranslation.text : $t('notes.label.translation.originalVersion') }}
+            </v-chip>
+          </template>
+
+          <v-list class="pa-0">
+            <v-list-item
+              v-for="(item, i) in moreTranslations"
+              :key="i"
+              class="pa-0 translation-chips">
+              <v-chip
+                close
+                small
+                :outlined="item.value!==selectedTranslation.value"
+                color="primary"
+                @click:close="removeTranslation(item)"
+                @click="changeTranslation(item)"
+                class="ma-2">
+                {{ item.text }}
+              </v-chip>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
+    </div>
+    <div class="px-2  my-auto  height-auto width-auto  d-flex flex-nowrap">
+      <div v-if="!isMobile" class="ma-2">{{ $t('notes.label.translation.add') }}</div>
+      <select
+        id="translationBarFilterSelect"
+        v-model="selectedLang"
+        class="ignore-vuetify-classes py-2 height-auto width-auto text-truncate my-auto mx-2">
+        <option
+          v-for="item in languages"
+          :key="item.value"
+          :value="item">
+          {{ item.text }}
+        </option>
+      </select>
+      <v-btn
+        class="my-auto "
+        small
+        icon
+        @click="add()">
+        <v-icon size="18" class="icon-default-color py-3">fa-plus</v-icon>
+      </v-btn>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    note: {
+      type: Object,
+      default: () => null,
+    },
+  },
+
+  data: () => ({
+    moreTranslationsMenu: false,
+    showTranslationbar: false,
+    languages: [],
+    selectedLang: {},
+    selectedTranslation: {value: ''},
+    displayActionMenu: true,
+    noteLanguages: [],
+    translations: null,
+  }),
+
+  mounted() {
+    $(document).on('click', () => {
+      this.moreTranslationsMenu = false;
+    });
+
+  },
+
+  created() {
+    this.getAvailableLanguages();
+  },
+
+  computed: {
+    moreTranslations(){
+      return this.translations && this.translations.length>this.limitTranslationsToShow ? this.translations.slice(this.limitTranslationsToShow,this.translations.length):[];
+    }, 
+    translationToShow(){
+      return this.translations && this.translations.length>this.limitTranslationsToShow ? this.translations.slice(0,this.limitTranslationsToShow) : this.translations;
+    },
+    noteId(){
+      return !this.note.draftPage?this.note.id:this.note.targetPageId;
+    },
+    isMobile() {
+      return this.$vuetify.breakpoint.name === 'xs';
+    },
+    limitTranslationsToShow() {
+      return this.isMobile?1:3;
+    }
+
+  },
+
+  methods: {
+    show() {
+      this.selectedLang={value: '',text: this.$t('notes.label.chooseLangage')};
+      if (!this.translations && this.note && this.noteId){
+        this.getNoteLanguages(this.noteId);
+      }
+      this.showTranslationbar=true;
+    },
+    hide() {
+      this.showTranslationbar=false;
+      this.$root.$emit('hide-translations');
+    },
+    add(){
+      this.translations.unshift(this.selectedLang);
+      this.selectedTranslation=this.selectedLang;
+      this.languages = this.languages.filter(item => item.value !== this.selectedLang.value);
+      this.$root.$emit('add-translation', this.selectedLang.value);
+      this.selectedLang={value: '',text: this.$t('notes.label.chooseLangage')};
+      
+    },
+    changeTranslation(translation){
+      if (translation.value!=='') {
+        this.translations=this.translations.filter(item => item.value !== translation.value);
+        this.translations.unshift(translation);  
+      }
+      this.selectedTranslation=translation;
+      this.$root.$emit('lang-translation-changed', this.selectedTranslation.value);
+    },
+    getAvailableLanguages(){
+      return this.$notesService.getAvailableLanguages().then(data => {
+        this.languages = data || [];
+        this.languages.unshift({value: '',text: this.$t('notes.label.chooseLangage')});
+        if (this.translations){
+          this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
+        }       
+      });
+    },
+    getNoteLanguages(){
+      return this.$notesService.getNoteLanguages(this.noteId).then(data => {
+        this.translations =  data || [];
+        if (this.translations.length>0) {
+          this.translations = this.languages.filter(item1 => this.translations.some(item2 => item2 === item1.value));
+          this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
+        }
+        if (this.isMobile) {
+          this.translations.unshift({value: '',text: this.$t('notes.label.translation.originalVersion')});
+        }
+      });
+    },
+    removeTranslation(translation){
+      return this.$notesService.deleteNoteTranslation(this.noteId,translation.value).then(() => {
+        this.translations=this.translations.filter(item => item.value !== translation.value);
+      });
+    },
+  }
+};
+</script>
\ No newline at end of file
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
index c5d575efd3..d6f7f71ef0 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
@@ -366,7 +366,7 @@ export default {
               :items="noteChildItems" \
               item-key="noteId"> \
               <template #label="{ item }"> \
-                <v-list-item-title @click="openNoteChild(item)" class="body-2 clickable primary--text"> \
+                <v-list-item-title @click="openNoteChild(item)" class="body-2 content-link clickable primary--text"> \
                 <span>{{ item.name }}</span> \
               </v-list-item-title> \
               </template> \