diff --git a/src/editor/components/seSelect.js b/src/editor/components/seSelect.js
index a8833523..ebef9dbe 100644
--- a/src/editor/components/seSelect.js
+++ b/src/editor/components/seSelect.js
@@ -1,3 +1,4 @@
+import { t } from '../locale.js';
 const template = document.createElement('template');
 template.innerHTML = `
 <style>
@@ -16,7 +17,7 @@ label {
   width:100%;
 }
 </style>
-  <label>Label</label>
+  <label></label>
   <select>
   </select>
 
@@ -41,7 +42,7 @@ export class SeSelect extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'label', 'width', 'height', 'options', 'values' ];
+    return [ 'label', 'width', 'height', 'options', 'values', 'title' ];
   }
 
   /**
@@ -56,7 +57,10 @@ export class SeSelect extends HTMLElement {
     if (oldValue === newValue) return;
     switch (name) {
     case 'label':
-      this.$label.textContent = newValue;
+      this.$label.textContent = t(newValue);
+      break;
+    case 'title':
+      this.$select.setAttribute("title", t(newValue));
       break;
     case 'height':
       this.$select.style.height = newValue;
@@ -68,7 +72,7 @@ export class SeSelect extends HTMLElement {
       options = newValue.split(',');
       options.forEach((option) => {
         const optionNode = document.createElement("OPTION");
-        const text = document.createTextNode(option);
+        const text = document.createTextNode(t(option));
         optionNode.appendChild(text);
         this.$select.appendChild(optionNode);
       });
diff --git a/src/editor/components/seText.js b/src/editor/components/seText.js
index 179a4763..a7067ef9 100644
--- a/src/editor/components/seText.js
+++ b/src/editor/components/seText.js
@@ -3,6 +3,11 @@ const template = document.createElement('template');
 // eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
   <style>
+  #layersLabel {
+    font-size: 13px;
+    line-height: normal;
+    font-weight: 700;
+  }
   </style>
   <div></div>
 `;
@@ -26,7 +31,7 @@ export class SeText extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'text', 'value', 'style' ];
+    return [ 'text', 'value', 'style', 'title', 'id' ];
   }
   /**
    * @function attributeChangedCallback
@@ -39,13 +44,20 @@ export class SeText extends HTMLElement {
     if (oldValue === newValue) return;
     switch (name) {
     case 'text':
-      this.$div.setAttribute('title', t(newValue));
+      this.$div.textContent = t(newValue);
+      break;
+    case 'title':
+      this.$div.setAttribute("title", t(newValue));
       break;
     case 'style':
       this.$div.style = newValue;
       break;
+    case 'id':
+      this.$div.id = newValue;
+      break;
     case 'value':
       this.$div.value = newValue;
+      //this.$div.setAttribute("value", newValue);
       break;
     default:
       // eslint-disable-next-line no-console
@@ -58,7 +70,7 @@ export class SeText extends HTMLElement {
    * @returns {any}
    */
   get text () {
-    return this.getAttribute('text');
+    return this.$div.textContent;
   }
 
   /**
@@ -66,7 +78,7 @@ export class SeText extends HTMLElement {
    * @returns {void}
    */
   set text (value) {
-    this.setAttribute('text', value);
+    this.$div.setAttribute("title", t(value));
   }
   /**
    * @function get
@@ -83,7 +95,21 @@ export class SeText extends HTMLElement {
   set value (value) {
     this.value = value;
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get title () {
+    return this.getAttribute('title');
+  }
 
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set title (value) {
+    this.setAttribute('title', value);
+  }
   /**
    * @function connectedCallback
    * @returns {void}
diff --git a/src/editor/locale.js b/src/editor/locale.js
index 0d372f9f..1593357e 100644
--- a/src/editor/locale.js
+++ b/src/editor/locale.js
@@ -83,7 +83,6 @@ export const putLocale = async function (givenParam, goodLangs) {
       }
     }
   });
-  console.info(`Lang: ${i18next.t('lang')}`);
   return { langParam, i18next };
 };
 
diff --git a/src/editor/locale/lang.af.js b/src/editor/locale/lang.af.js
index 5c3b7432..d1ab9360 100644
--- a/src/editor/locale/lang.af.js
+++ b/src/editor/locale/lang.af.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Verander teks inhoud',
+    font_family_label: 'Font:',
     font_family: 'Lettertipe verander Familie',
     font_size: 'Verandering Lettertipe Grootte',
     bold: 'Vetgedrukte teks',
diff --git a/src/editor/locale/lang.ar.js b/src/editor/locale/lang.ar.js
index ee393452..1724566a 100644
--- a/src/editor/locale/lang.ar.js
+++ b/src/editor/locale/lang.ar.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'تغيير محتويات النص',
+    font_family_label: 'Font:',
     font_family: 'تغيير الخط الأسرة',
     font_size: 'تغيير حجم الخط',
     bold: 'نص جريء',
diff --git a/src/editor/locale/lang.az.js b/src/editor/locale/lang.az.js
index 2d50b659..28ea29da 100644
--- a/src/editor/locale/lang.az.js
+++ b/src/editor/locale/lang.az.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Change text contents',
+    font_family_label: 'Font:',
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.be.js b/src/editor/locale/lang.be.js
index 64182cb7..95b83323 100644
--- a/src/editor/locale/lang.be.js
+++ b/src/editor/locale/lang.be.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Змяненне зместу тэксту',
+    font_family_label: 'Font:',
     font_family: 'Змены Сямейства шрыфтоў',
     font_size: 'Змяніць памер шрыфта',
     bold: 'Тоўсты тэкст',
diff --git a/src/editor/locale/lang.bg.js b/src/editor/locale/lang.bg.js
index cae8dd2e..67fbe243 100644
--- a/src/editor/locale/lang.bg.js
+++ b/src/editor/locale/lang.bg.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Промяна на текст съдържание',
+    font_family_label: 'Font:',
     font_family: 'Промяна на шрифта Семейство',
     font_size: 'Промени размера на буквите',
     bold: 'Получер текст',
diff --git a/src/editor/locale/lang.ca.js b/src/editor/locale/lang.ca.js
index 6f56c947..aeba9ad8 100644
--- a/src/editor/locale/lang.ca.js
+++ b/src/editor/locale/lang.ca.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Contingut del text',
+    font_family_label: 'Font:',
     font_family: 'Canviar la font Família',
     font_size: 'Change Font Size',
     bold: 'Text en negreta',
diff --git a/src/editor/locale/lang.cs.js b/src/editor/locale/lang.cs.js
index 6656a0fa..dfca60d7 100644
--- a/src/editor/locale/lang.cs.js
+++ b/src/editor/locale/lang.cs.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'úsečka',
     curve_segments: 'křivka',
     text_contents: 'Změnit text',
+    font_family_label: 'Font:',
     font_family: 'Změnit font',
     font_size: 'Změnit velikost písma',
     bold: 'Tučně',
diff --git a/src/editor/locale/lang.cy.js b/src/editor/locale/lang.cy.js
index 72c466e6..a6e1c451 100644
--- a/src/editor/locale/lang.cy.js
+++ b/src/editor/locale/lang.cy.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Cynnwys testun Newid',
+    font_family_label: 'Font:',
     font_family: 'Newid Font Teulu',
     font_size: 'Newid Maint Ffont',
     bold: 'Testun Bras',
diff --git a/src/editor/locale/lang.de.js b/src/editor/locale/lang.de.js
index 1e78ef56..1416e352 100644
--- a/src/editor/locale/lang.de.js
+++ b/src/editor/locale/lang.de.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Gerade',
     curve_segments: 'Kurve',
     text_contents: 'Textinhalt erstellen und bearbeiten',
+    font_family_label: 'Font:',
     font_family: 'Schriftart wählen',
     font_size: 'Schriftgröße einstellen',
     bold: 'Fetter Text',
diff --git a/src/editor/locale/lang.el.js b/src/editor/locale/lang.el.js
index fa64435c..088f7b0c 100644
--- a/src/editor/locale/lang.el.js
+++ b/src/editor/locale/lang.el.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Αλλαγή περιεχόμενο κειμένου',
+    font_family_label: 'Font:',
     font_family: 'Αλλαγή γραμματοσειράς Οικογένεια',
     font_size: 'Αλλαγή μεγέθους γραμματοσειράς',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.en.js b/src/editor/locale/lang.en.js
index c9d05b41..5751d9d0 100644
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@@ -70,7 +70,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Change text contents',
-    font_family_label: 'Font',
+    font_family_label: 'Font:',
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.es.js b/src/editor/locale/lang.es.js
index 7a65d9c5..8f3acc84 100644
--- a/src/editor/locale/lang.es.js
+++ b/src/editor/locale/lang.es.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Recta',
     curve_segments: 'Curva',
     text_contents: 'Modificar el texto',
+    font_family_label: 'Font:',
     font_family: 'Tipo de fuente',
     font_size: 'Tamaño de la fuente',
     bold: 'Texto en negrita',
diff --git a/src/editor/locale/lang.et.js b/src/editor/locale/lang.et.js
index e4620d74..8a08b26a 100644
--- a/src/editor/locale/lang.et.js
+++ b/src/editor/locale/lang.et.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Muuda teksti sisu',
+    font_family_label: 'Font:',
     font_family: 'Muutke Kirjasinperhe',
     font_size: 'Change font size',
     bold: 'Rasvane kiri',
diff --git a/src/editor/locale/lang.fa.js b/src/editor/locale/lang.fa.js
index ce340d49..2e0431a8 100644
--- a/src/editor/locale/lang.fa.js
+++ b/src/editor/locale/lang.fa.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: '‫مستقیم‬',
     curve_segments: '‫منحنی‬',
     text_contents: '‫تغییر محتویات متن‬',
+    font_family_label: 'Font:',
     font_family: '‫تغییر خانواده قلم‬',
     font_size: '‫تغییر اندازه قلم‬',
     bold: '‫متن توپر ‬',
diff --git a/src/editor/locale/lang.fi.js b/src/editor/locale/lang.fi.js
index b59302ce..c1558af2 100644
--- a/src/editor/locale/lang.fi.js
+++ b/src/editor/locale/lang.fi.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Muuta tekstin sisältö',
+    font_family_label: 'Font:',
     font_family: 'Muuta Font Family',
     font_size: 'Muuta fontin kokoa',
     bold: 'Lihavoitu teksti',
diff --git a/src/editor/locale/lang.fr.js b/src/editor/locale/lang.fr.js
index e29ca84f..e8f85fb5 100644
--- a/src/editor/locale/lang.fr.js
+++ b/src/editor/locale/lang.fr.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Droit',
     curve_segments: 'Courbe',
     text_contents: 'Changer le contenu du texte',
+    font_family_label: 'Font:',
     font_family: 'Changer la famille de police',
     font_size: 'Changer la taille de la police',
     bold: 'Texte en gras',
diff --git a/src/editor/locale/lang.fy.js b/src/editor/locale/lang.fy.js
index fe0a367b..14a86e70 100644
--- a/src/editor/locale/lang.fy.js
+++ b/src/editor/locale/lang.fy.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Rjocht',
     curve_segments: 'Bûcht',
     text_contents: 'Tekst oanpasse',
+    font_family_label: 'Font:',
     font_family: 'Lettertype oanpasse',
     font_size: 'Lettergrutte oanpasse',
     bold: 'Fet',
diff --git a/src/editor/locale/lang.ga.js b/src/editor/locale/lang.ga.js
index b0ca32b3..92bb6a76 100644
--- a/src/editor/locale/lang.ga.js
+++ b/src/editor/locale/lang.ga.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Inneachar Athraigh téacs',
+    font_family_label: 'Font:',
     font_family: 'Athraigh an Cló Teaghlaigh',
     font_size: 'Athraigh Clómhéid',
     bold: 'Trom Téacs',
diff --git a/src/editor/locale/lang.gl.js b/src/editor/locale/lang.gl.js
index aa7c2e7d..be13584a 100644
--- a/src/editor/locale/lang.gl.js
+++ b/src/editor/locale/lang.gl.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Cambiar o contido de texto',
+    font_family_label: 'Font:',
     font_family: 'Cambiar fonte Familia',
     font_size: 'Mudar tamaño de letra',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.he.js b/src/editor/locale/lang.he.js
index d50591bf..fe7868df 100755
--- a/src/editor/locale/lang.he.js
+++ b/src/editor/locale/lang.he.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'שינוי תוכן טקסט',
+    font_family_label: 'Font:',
     font_family: 'שינוי גופן משפחה',
     font_size: 'שנה גודל גופן',
     bold: 'טקסט מודגש',
diff --git a/src/editor/locale/lang.hi.js b/src/editor/locale/lang.hi.js
index 8446c0f7..74df0892 100644
--- a/src/editor/locale/lang.hi.js
+++ b/src/editor/locale/lang.hi.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'सीधे वर्ग',
     curve_segments: 'घुमाव',
     text_contents: 'बदलें पाठ सामग्री',
+    font_family_label: 'Font:',
     font_family: 'बदलें फ़ॉन्ट परिवार',
     font_size: 'फ़ॉन्ट का आकार बदलें',
     bold: 'मोटा पाठ',
diff --git a/src/editor/locale/lang.hu.js b/src/editor/locale/lang.hu.js
index 48aed81e..89bc9e69 100644
--- a/src/editor/locale/lang.hu.js
+++ b/src/editor/locale/lang.hu.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'A szöveg tartalma',
+    font_family_label: 'Font:',
     font_family: 'Change Betűcsalád',
     font_size: 'Change font size',
     bold: 'Félkövér szöveg',
diff --git a/src/editor/locale/lang.hy.js b/src/editor/locale/lang.hy.js
index 85e2e763..1e164027 100644
--- a/src/editor/locale/lang.hy.js
+++ b/src/editor/locale/lang.hy.js
@@ -70,6 +70,7 @@ export default {
     curve_segments: 'Curve',
     text_contents: 'Change text contents',
     font_family: 'Change Font Family',
+    font_family_label: 'Font:',
     font_size: 'Change Font Size',
     bold: 'Bold Text',
     italic: 'Italic Text',
diff --git a/src/editor/locale/lang.id.js b/src/editor/locale/lang.id.js
index 606e3c6d..3b8bf7b2 100644
--- a/src/editor/locale/lang.id.js
+++ b/src/editor/locale/lang.id.js
@@ -70,6 +70,7 @@ export default {
     curve_segments: 'Curve',
     text_contents: 'Ubah isi teks',
     font_family: 'Ubah Font Keluarga',
+    font_family_label: 'Font:',
     font_size: 'Ubah Ukuran Font',
     bold: 'Bold Teks',
     italic: 'Italic Teks',
diff --git a/src/editor/locale/lang.is.js b/src/editor/locale/lang.is.js
index 018a3200..b99e17a3 100644
--- a/src/editor/locale/lang.is.js
+++ b/src/editor/locale/lang.is.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Breyta texta innihald',
+    font_family_label: 'Font:',
     font_family: 'Change Leturfjölskylda',
     font_size: 'Breyta leturstærð',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.it.js b/src/editor/locale/lang.it.js
index b0c31bd9..0438fe4a 100644
--- a/src/editor/locale/lang.it.js
+++ b/src/editor/locale/lang.it.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Linea retta',
     curve_segments: 'Curva',
     text_contents: 'Cambia il contenuto del testo',
+    font_family_label: 'Font:',
     font_family: 'Cambia il tipo di Font',
     font_size: 'Modifica dimensione carattere',
     bold: 'Grassetto',
diff --git a/src/editor/locale/lang.ja.js b/src/editor/locale/lang.ja.js
index d381f025..b911c792 100644
--- a/src/editor/locale/lang.ja.js
+++ b/src/editor/locale/lang.ja.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: '直線',
     curve_segments: 'カーブ',
     text_contents: 'テキストの内容の変更',
+    font_family_label: 'Font:',
     font_family: 'フォントファミリーの変更',
     font_size: '文字サイズの変更',
     bold: '太字',
diff --git a/src/editor/locale/lang.ko.js b/src/editor/locale/lang.ko.js
index 27abf111..3e2db20d 100644
--- a/src/editor/locale/lang.ko.js
+++ b/src/editor/locale/lang.ko.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: '텍스트 변경 내용',
+    font_family_label: 'Font:',
     font_family: '글꼴 변경 패밀리',
     font_size: '글꼴 크기 변경',
     bold: '굵은 텍스트',
diff --git a/src/editor/locale/lang.lt.js b/src/editor/locale/lang.lt.js
index c0aa8b12..d8c75284 100644
--- a/src/editor/locale/lang.lt.js
+++ b/src/editor/locale/lang.lt.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Keisti teksto turinys',
+    font_family_label: 'Font:',
     font_family: 'Pakeistišriftą Šeima',
     font_size: 'Change font size',
     bold: 'Pusjuodis',
diff --git a/src/editor/locale/lang.lv.js b/src/editor/locale/lang.lv.js
index 671f2299..4277e085 100644
--- a/src/editor/locale/lang.lv.js
+++ b/src/editor/locale/lang.lv.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Mainītu teksta saturs',
+    font_family_label: 'Font:',
     font_family: 'Mainīt fonta Family',
     font_size: 'Mainīt fonta izmēru',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.mk.js b/src/editor/locale/lang.mk.js
index 4e28ade6..65295d8b 100644
--- a/src/editor/locale/lang.mk.js
+++ b/src/editor/locale/lang.mk.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Промена текст содржина',
+    font_family_label: 'Font:',
     font_family: 'Смени фонт Фамилија',
     font_size: 'Изменифонт Големина',
     bold: 'Задебелен текст',
diff --git a/src/editor/locale/lang.ms.js b/src/editor/locale/lang.ms.js
index 9fc3c53e..567ab3b5 100644
--- a/src/editor/locale/lang.ms.js
+++ b/src/editor/locale/lang.ms.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Tukar isi teks',
+    font_family_label: 'Font:',
     font_family: 'Tukar Font Keluarga',
     font_size: 'Ubah Saiz Font',
     bold: 'Bold Teks',
diff --git a/src/editor/locale/lang.mt.js b/src/editor/locale/lang.mt.js
index 7ef159af..62d43382 100644
--- a/src/editor/locale/lang.mt.js
+++ b/src/editor/locale/lang.mt.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Test kontenut Bidla',
+    font_family_label: 'Font:',
     font_family: 'Bidla Font Familja',
     font_size: 'Change font size',
     bold: 'Bold Test',
diff --git a/src/editor/locale/lang.nl.js b/src/editor/locale/lang.nl.js
index a489168e..9ed39cf2 100644
--- a/src/editor/locale/lang.nl.js
+++ b/src/editor/locale/lang.nl.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Recht',
     curve_segments: 'Gebogen',
     text_contents: 'Wijzig tekst',
+    font_family_label: 'Font:',
     font_family: 'Verander lettertype',
     font_size: 'Verander lettertype grootte',
     bold: 'Vet',
diff --git a/src/editor/locale/lang.no.js b/src/editor/locale/lang.no.js
index e6e3057f..1ea5b67c 100644
--- a/src/editor/locale/lang.no.js
+++ b/src/editor/locale/lang.no.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Endre tekst innholdet',
+    font_family_label: 'Font:',
     font_family: 'Change Font Family',
     font_size: 'Endre skriftstørrelse',
     bold: 'Fet tekst',
diff --git a/src/editor/locale/lang.pl.js b/src/editor/locale/lang.pl.js
index 98c3ffae..a22a66e3 100644
--- a/src/editor/locale/lang.pl.js
+++ b/src/editor/locale/lang.pl.js
@@ -70,6 +70,7 @@ export default {
     straight_segments: 'Prosty',
     curve_segments: 'Zaokrąglony',
     text_contents: 'Zmień text',
+    font_family_label: 'Font:',
     font_family: 'Zmień krój czcionki',
     font_size: 'Zmień rozmiar czcionki',
     bold: 'Pogrubienie textu',
diff --git a/src/editor/locale/lang.pt-BR.js b/src/editor/locale/lang.pt-BR.js
index a1ac8852..fee83565 100644
--- a/src/editor/locale/lang.pt-BR.js
+++ b/src/editor/locale/lang.pt-BR.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Reto',
     curve_segments: 'Curvo',
     text_contents: 'Mudar conteúdo do texto',
+    font_family_label: 'Font:',
     font_family: 'Mudar o estilo da fonte',
     font_size: 'Mudar o tamanho da fonte',
     bold: 'Negrito',
diff --git a/src/editor/locale/lang.pt-PT.js b/src/editor/locale/lang.pt-PT.js
index 049ed220..5478ec72 100644
--- a/src/editor/locale/lang.pt-PT.js
+++ b/src/editor/locale/lang.pt-PT.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Alterar o conteúdo de texto',
+    font_family_label: 'Font:',
     font_family: 'Alterar fonte Família',
     font_size: 'Alterar tamanho de letra',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.ro.js b/src/editor/locale/lang.ro.js
index 91d8236c..a363ade6 100644
--- a/src/editor/locale/lang.ro.js
+++ b/src/editor/locale/lang.ro.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Drept',
     curve_segments: 'Curb',
     text_contents: 'Schimbarea conţinutului textului',
+    font_family_label: 'Font:',
     font_family: 'Modificare familie de fonturi',
     font_size: 'Schimbă dimensiunea fontului',
     bold: 'Text Îngroşat',
diff --git a/src/editor/locale/lang.ru.js b/src/editor/locale/lang.ru.js
index c0c1eb2a..ec2cc426 100644
--- a/src/editor/locale/lang.ru.js
+++ b/src/editor/locale/lang.ru.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Отрезок',
     curve_segments: 'Сплайн',
     text_contents: 'Изменить содержание текста',
+    font_family_label: 'Font:',
     font_family: 'Изменить семейство шрифтов',
     font_size: 'Изменить размер шрифта',
     bold: 'Жирный',
diff --git a/src/editor/locale/lang.sk.js b/src/editor/locale/lang.sk.js
index c9ba63d5..14cc9518 100644
--- a/src/editor/locale/lang.sk.js
+++ b/src/editor/locale/lang.sk.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Rovný',
     curve_segments: 'Krivka',
     text_contents: 'Zmeniť text',
+    font_family_label: 'Font:',
     font_family: 'Zmeniť font',
     font_size: 'Zmeniť veľkosť písma',
     bold: 'Tučné',
diff --git a/src/editor/locale/lang.sl.js b/src/editor/locale/lang.sl.js
index 72171ae0..d25601b9 100644
--- a/src/editor/locale/lang.sl.js
+++ b/src/editor/locale/lang.sl.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Raven odsek',
     curve_segments: 'Ukrivljen odsek',
     text_contents: 'Spremeni besedilo',
+    font_family_label: 'Font:',
     font_family: 'Spremeni tip pisave',
     font_size: 'Spremeni velikost pisave',
     bold: 'Krepko',
diff --git a/src/editor/locale/lang.sq.js b/src/editor/locale/lang.sq.js
index f559de7a..3d49c291 100644
--- a/src/editor/locale/lang.sq.js
+++ b/src/editor/locale/lang.sq.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Text contents Ndryshimi',
+    font_family_label: 'Font:',
     font_family: 'Ndryshimi Font Family',
     font_size: 'Ndryshimi Font Size',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.sr.js b/src/editor/locale/lang.sr.js
index 63b9fe7e..2ee33d3f 100644
--- a/src/editor/locale/lang.sr.js
+++ b/src/editor/locale/lang.sr.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Промена садржаја текстуалне',
+    font_family_label: 'Font:',
     font_family: 'Цханге фонт породицу',
     font_size: 'Цханге фонт сизе',
     bold: 'Подебљан текст',
diff --git a/src/editor/locale/lang.sv.js b/src/editor/locale/lang.sv.js
index 4c8ab860..aa6b6b05 100644
--- a/src/editor/locale/lang.sv.js
+++ b/src/editor/locale/lang.sv.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Ändra textinnehållet',
+    font_family_label: 'Font:',
     font_family: 'Ändra Typsnitt',
     font_size: 'Ändra textstorlek',
     bold: 'Fet text',
diff --git a/src/editor/locale/lang.sw.js b/src/editor/locale/lang.sw.js
index 8987ea86..2656d056 100644
--- a/src/editor/locale/lang.sw.js
+++ b/src/editor/locale/lang.sw.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Change Nakala contents',
+    font_family_label: 'Font:',
     font_family: 'Change font Family',
     font_size: 'Change font Size',
     bold: 'Bold Nakala',
diff --git a/src/editor/locale/lang.test.js b/src/editor/locale/lang.test.js
index 45447307..a241175f 100644
--- a/src/editor/locale/lang.test.js
+++ b/src/editor/locale/lang.test.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Change text contents',
+    font_family_label: 'Font:',
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.th.js b/src/editor/locale/lang.th.js
index c127a5f9..0fc85a43 100644
--- a/src/editor/locale/lang.th.js
+++ b/src/editor/locale/lang.th.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'เปลี่ยนเนื้อหาข้อความ',
+    font_family_label: 'Font:',
     font_family: 'ครอบครัว Change Font',
     font_size: 'เปลี่ยนขนาดตัวอักษร',
     bold: 'ข้อความตัวหนา',
diff --git a/src/editor/locale/lang.tl.js b/src/editor/locale/lang.tl.js
index 6140c032..93f14f30 100644
--- a/src/editor/locale/lang.tl.js
+++ b/src/editor/locale/lang.tl.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Baguhin ang mga nilalaman ng teksto',
+    font_family_label: 'Font:',
     font_family: 'Baguhin ang Pamilya ng Font',
     font_size: 'Baguhin ang Laki ng Font',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.tr.js b/src/editor/locale/lang.tr.js
index ac1a4105..a86e519e 100644
--- a/src/editor/locale/lang.tr.js
+++ b/src/editor/locale/lang.tr.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Değiştirmek metin içeriği',
+    font_family_label: 'Font:',
     font_family: 'Font değiştir Aile',
     font_size: 'Change font size',
     bold: 'Kalın Yazı',
diff --git a/src/editor/locale/lang.uk.js b/src/editor/locale/lang.uk.js
index de83ddb8..ba9eca29 100644
--- a/src/editor/locale/lang.uk.js
+++ b/src/editor/locale/lang.uk.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Зміна змісту тексту',
+    font_family_label: 'Font:',
     font_family: 'Зміни Сімейство шрифтів',
     font_size: 'Змінити розмір шрифту',
     bold: 'Товстий текст',
diff --git a/src/editor/locale/lang.vi.js b/src/editor/locale/lang.vi.js
index cc23fa2a..0c373791 100644
--- a/src/editor/locale/lang.vi.js
+++ b/src/editor/locale/lang.vi.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Thay đổi nội dung văn bản',
+    font_family_label: 'Font:',
     font_family: 'Thay đổi Font Gia đình',
     font_size: 'Thay đổi cỡ chữ',
     bold: 'Bold Text',
diff --git a/src/editor/locale/lang.yi.js b/src/editor/locale/lang.yi.js
index 1ae027b4..cf719938 100644
--- a/src/editor/locale/lang.yi.js
+++ b/src/editor/locale/lang.yi.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'ענדערן טעקסט אינהאַלט',
+    font_family_label: 'Font:',
     font_family: 'ענדערן פאָנט פאַמילי',
     font_size: 'בייטן פאָנט גרייס',
     bold: 'דרייסט טעקסט',
diff --git a/src/editor/locale/lang.zh-CN.js b/src/editor/locale/lang.zh-CN.js
index ce0c0077..033a71e7 100644
--- a/src/editor/locale/lang.zh-CN.js
+++ b/src/editor/locale/lang.zh-CN.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: '直线',
     curve_segments: '曲线',
     text_contents: '更改文本内容',
+    font_family_label: 'Font:',
     font_family: '更改字体样式',
     font_size: '更改字体大小',
     bold: '粗体',
diff --git a/src/editor/locale/lang.zh-HK.js b/src/editor/locale/lang.zh-HK.js
index 5d235d52..c9de1bcb 100644
--- a/src/editor/locale/lang.zh-HK.js
+++ b/src/editor/locale/lang.zh-HK.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: '更改文字内容',
+    font_family_label: 'Font:',
     font_family: '更改字体家族',
     font_size: '更改字体大小',
     bold: '粗体',
diff --git a/src/editor/locale/lang.zh-TW.js b/src/editor/locale/lang.zh-TW.js
index 7b3311f3..6fc66f84 100644
--- a/src/editor/locale/lang.zh-TW.js
+++ b/src/editor/locale/lang.zh-TW.js
@@ -69,6 +69,7 @@ export default {
     straight_segments: '直線',
     curve_segments: '曲線',
     text_contents: '更改文字內容',
+    font_family_label: 'Font:',
     font_family: '更改字體',
     font_size: '更改字體大小',
     bold: '粗體',
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 07790e55..5bd27ae1 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -184,7 +184,7 @@ class BottomPanel {
         <se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
         <se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke"></se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
-        <se-select id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px"
+        <se-select id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px"
           options="&#8212;,...,- -,- .,- .."
           values="none 2,2 5,5 5,2,2,2 5,2,2,2,2,2">     
         </se-select>
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index c12a2edf..141a89f9 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -48,10 +48,10 @@ class LayersPanel {
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = `
     <div id="sidepanels">
-      <div id="sidepanel_handle" title="${i18next.t('ui.panel_action')}">${i18next.t('ui.panel')}</div>
+      <se-text id="sidepanel_handle" title="ui.panel_action" text="ui.panel"></se-text>
       <div id="sidepanel_content">
         <div id="layerpanel">
-          <h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
+          <se-text id="layersLabel" text="layers.layers"></se-text>
           <fieldset id="layerbuttons">
             <se-button id="layer_new" title="layers.new" size="small" src="new.svg"></se-button>
             <se-button id="layer_delete" title="layers.del" size="small" src="delete.svg"></se-button>
@@ -67,8 +67,8 @@ class LayersPanel {
               <td class="layername">Layer 1</td>
             </tr>
           </table>
-          <span id="selLayerLabel">${i18next.t('layers.move_elems_to')}</span>
-          <select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
+          <se-text id="selLayerLabel" text="layers.move_elems_to"></se-text>
+          <select id="selLayerNames" disabled="disabled">
             <option selected="selected" value="layer1">Layer 1</option>
           </select>
         </div>
@@ -89,6 +89,7 @@ class LayersPanel {
     menuLayerBox.setAttribute("leftclick", false);
     this.editor.$container.append(menuLayerBox);
     menuLayerBox.init(i18next);
+    $id("selLayerNames").setAttribute("title", i18next.t('layers.move_selected'));
     $id("layer_new").addEventListener("click", this.newLayer.bind(this));
     $id("layer_delete").addEventListener("click", this.deleteLayer.bind(this));
     $id("layer_up").addEventListener("click", () => this.moveLayer.bind(this)(-1));
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index 788b88c3..f5a75fd0 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /* globals seAlert */
 
 import SvgCanvas from "../../svgcanvas/svgcanvas.js";
@@ -894,11 +895,8 @@ class TopPanel {
           <se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
           <se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
           <se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
-          <se-select id="tool_align_relative" label="relative to:" 
-            options="${i18next.t('tools.selected_objects')},
-                ${i18next.t('tools.largest_object')},
-                ${i18next.t('tools.smallest_object')},
-                ${i18next.t('tools.page')}"
+          <se-select id="tool_align_relative" label="tools.relativeTo" 
+            options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
             values="selected largest smallest page"></se-list-item>
           </se-select>
         </div> <!-- multiselected_panel -->
@@ -938,18 +936,7 @@ class TopPanel {
         <div class="text_panel">
           <se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
           <se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
-          <se-select id="tool_font_family" label="Font:"
-            options="${i18next.t('properties.serif')},
-                     ${i18next.t('properties.sans_serif')},
-                     ${i18next.t('properties.cursive')},
-                     ${i18next.t('properties.fantasy')},
-                     ${i18next.t('properties.monospace')},
-                     ${i18next.t('properties.courier')},
-                     ${i18next.t('properties.helvetica')},
-                     ${i18next.t('properties.times')}"
-            values="Serif Sans-serif Cursive Fantasy Monospace Courier Helvetica Times"
-          >
-          </select>
+          <se-select id="tool_font_family" label="properties.font_family_label" options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times" values="Serif Sans-serif Cursive Fantasy Monospace Courier Helvetica Times"></select>
           <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size" src="fontsize.svg"></se-spin-input>
         </div>
         <div class="text_panel">
@@ -971,7 +958,7 @@ class TopPanel {
         </div> <!-- g_panel -->
         <!-- For anchor elements -->
         <div class="a_panel">
-          <label id="tool_link_url" title="${i18next.t('tools.set_link_url')}">
+          <label id="tool_link_url">
             <span id="linkLabel" class="icon_label"></span>
             <input id="link_url" type="text" size="35" />
           </label>
@@ -982,7 +969,7 @@ class TopPanel {
           <div class="tool_sep"></div>
           <se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="properties.x_label"></se-spin-input>
           <se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label"></se-spin-input>
-          <se-select id="seg_type" title="${i18next.t('tools.seg_type')}" label="" options="${i18next.t('properties.straight_segments')}, ${i18next.t('properties.curve_segments')}" values="4 6"></se-select>
+          <se-select id="seg_type" title="properties.seg_type" label="" options="properties.straight_segments,properties.curve_segments" values="4 6"></se-select>
           <se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
           <se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
           <se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>
@@ -999,6 +986,7 @@ class TopPanel {
     newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog");
     this.editor.$container.append(newSeEditorDialog);
     newSeEditorDialog.init(i18next);
+    $id("tool_link_url").setAttribute("title", i18next.t('tools.set_link_url'));
     // register action to top panel buttons
     $id("tool_source").addEventListener("click", this.showSourceEditor.bind(this));
     $id("tool_wireframe").addEventListener("click", this.clickWireframe.bind(this));