diff --git a/src/syncfusion/index.ts b/src/syncfusion/index.ts
index 548e004..9255eae 100644
--- a/src/syncfusion/index.ts
+++ b/src/syncfusion/index.ts
@@ -92,7 +92,8 @@ export class IaraSyncfusionAdapter
     this._navigationFieldManager = new IaraSyncfusionNavigationFieldManager(
       this._documentEditor,
       this._config,
-      _recognition
+      _recognition,
+      this._languageManager
     );
 
     this._bookmarkManager = new IaraSyncfusionBookmarkManager(
diff --git a/src/syncfusion/navigationFields/additiveFieldModal.ts b/src/syncfusion/navigationFields/additiveFieldModal.ts
new file mode 100644
index 0000000..06e2366
--- /dev/null
+++ b/src/syncfusion/navigationFields/additiveFieldModal.ts
@@ -0,0 +1,152 @@
+import { ListView } from "@syncfusion/ej2-lists";
+import { DialogUtility } from "@syncfusion/ej2-popups";
+import { TextBox } from "@syncfusion/ej2-inputs";
+import { IaraSyncfusionLanguageManager } from "../language";
+
+export class IaraSyncfusionAdditiveFieldModal {
+  constructor(private _languageManager: IaraSyncfusionLanguageManager) {
+    const okClick = () => {
+      //funcao para gravar todos os dados
+      console.log("Additive OK");
+    };
+
+    const cancelClick = () => {
+      dialogUtility.hide();
+      console.log("Additive Cancel");
+    };
+
+    const dataSource: {
+      Count: number;
+      Identification: string;
+      Phrase: string;
+    }[] = [
+      {
+        Count: 1,
+        Identification: "",
+        Phrase: "",
+      },
+    ];
+
+    const content = `
+        <form id="formId" class="form-horizontal">
+
+          <div class="tab" style="border-bottom: 1px solid #e0e0e0;">
+            <div class="form-group">
+
+              <div style="display: flex; align-items: center;">
+                <div style="display: flex;">
+                  <h5>${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.titleField}:</h5>
+                </div>
+                <div style="display: flex; flex-grow: 10; padding-left: 1rem;">
+                    <input id="outlined" style="width: 100%;"/>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+
+          <div class="tab" style="border-bottom: 1px solid #e0e0e0;">
+              <h3 style="margin: 1rem 0 .5rem 0;">${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.configTitle}</h3>
+              <div style="display: flex; align-items: center;">
+
+                <div style="display: flex;">
+                  <h5 style="margin-right: 1rem;">${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterStartField}:</h5>
+                </div>
+
+                <div style="display: flex;">
+                  <input style="width: stretch;"
+                    type="text" id="delimiter-start" name="delimiter-start"
+                    data-required-message="*${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterStartRequired}" required=""
+                    data-msg-containerid="delimiterError" placeholder="," value=",">
+                  <div id="delimiterError"></div>
+                </div>
+
+                <div style="display: flex;">
+                  <h5 style="white-space: nowrap; margin: 0 1rem;">${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalField}:</h5>
+                </div>
+
+                <div style="display: flex;">
+                  <input style="width: stretch;"
+                    type="text" id="delimiter-end" name="delimiter-end"
+                    data-required-message="*${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalRequired}" required=""
+                    data-msg-containerid="finalDelimiterError"
+                    placeholder="${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalPlaceholder}"
+                    value="${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalPlaceholder}">
+                  <div id="finalDelimiterError"></div>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+           <div class="tab">
+            <h3 style="margin: 1rem 0 .5rem 0;">${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsTitle}</h3>
+            <div style="display: flex;">
+                  <h5 style="white-space: nowrap; margin: 0 1rem;">${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderIdentifier}:</h5>
+            </div>
+            <div style="display: flex;">
+              <input style="width: stretch;"
+                type="text" id="additve-text" name="additve-text"
+                data-required-message="*${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderIdentifier}" required=""
+                data-msg-containerid="indentifierError">
+              <div id="indentifierError"></div>
+            </div>
+            <div id='listview' style="overflow: auto; max-height: 300px;"></div>
+          </div>
+        </form>`;
+
+    const dialogUtility = DialogUtility.confirm({
+      title: `<div class='dlg-template'>${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.modalTitle}</div>`,
+      content: content,
+      width: "450px",
+      showCloseIcon: true,
+      closeOnEscape: true,
+      okButton: {
+        text: this._languageManager.languages.language.iaraTranslate
+          .additiveFieldModal.modalBtnOk,
+        click: okClick,
+      },
+      cancelButton: {
+        text: this._languageManager.languages.language.iaraTranslate
+          .additiveFieldModal.modalBtnCancel,
+        click: cancelClick,
+      },
+    });
+
+    const listviewInstance = new ListView({
+      dataSource,
+      sortOrder: "None",
+      fields: { text: "name" },
+      template: "",
+    });
+    listviewInstance.appendTo("#listview");
+
+    const outlineTextBox: TextBox = new TextBox({
+      placeholder:
+        this._languageManager.languages.language.iaraTranslate
+          .additiveFieldModal.titlePlaceholder,
+      cssClass: "e-outline",
+    });
+    outlineTextBox.appendTo("#outlined");
+
+    const delimeterStart: TextBox = new TextBox({
+      placeholder: ",",
+      cssClass: "e-outline",
+    });
+    delimeterStart.appendTo("#delimiter-start");
+
+    const delimeterEnd: TextBox = new TextBox({
+      placeholder:
+        this._languageManager.languages.language.iaraTranslate
+          .additiveFieldModal.delimiterFinalPlaceholder,
+      cssClass: "e-outline",
+    });
+    delimeterEnd.appendTo("#delimiter-end");
+
+    const additveText: TextBox = new TextBox({
+      cssClass: "e-outline",
+    });
+    additveText.appendTo("#additve-text");
+  }
+}
diff --git a/src/syncfusion/navigationFields/index.ts b/src/syncfusion/navigationFields/index.ts
index 7919520..da34245 100644
--- a/src/syncfusion/navigationFields/index.ts
+++ b/src/syncfusion/navigationFields/index.ts
@@ -9,12 +9,8 @@ import { IaraEditorNavigationFieldManager } from "../../editor/navigationFields"
 import { IaraSpeechRecognition } from "../../speech";
 import { v4 as uuidv4 } from "uuid";
 import { IaraBookmark } from "./bookmark";
-import { DialogUtility } from "@syncfusion/ej2-popups";
-import { Edit, Grid, RowDD } from "@syncfusion/ej2-grids";
-import { TextBox } from '@syncfusion/ej2-inputs';
-// import { InputObject, LabelPosition } from '@syncfusion/ej2-inputs';
-// import { Button } from '@syncfusion/ej2-buttons';
 import { IaraSyncfusionLanguageManager } from "../language";
+import { IaraSyncfusionAdditiveFieldModal } from "./additiveFieldModal";
 
 export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFieldManager {
   previousBookmark: IaraBookmark = {
@@ -56,16 +52,13 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi
   private _bookmarks: IaraBookmark[] = [];
 
   private _previousBookmarksTitles: string[] = [];
-
-  private _languageManager: IaraSyncfusionLanguageManager;
   constructor(
     private _documentEditor: DocumentEditor,
     private _config: IaraSyncfusionConfig,
-    _recognition: IaraSpeechRecognition
+    _recognition: IaraSpeechRecognition,
+    private _languageManager: IaraSyncfusionLanguageManager
   ) {
     super(_recognition);
-
-    this._languageManager = new IaraSyncfusionLanguageManager(this._config);
   }
 
   insertField(
@@ -588,142 +581,6 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi
   }
 
   addAdditiveField() {
-    const okClick = () => {
-      //funcao para gravar todos os dados
-      console.log("Additive OK");
-    };
-
-    const cancelClick = () => {
-      dialogUtility.hide();
-      console.log("Additive Cancel");
-    };
-
-    const dataSource: {
-      Count: number;
-      Identification: string;
-      Phrase: string;
-      editType: "stringedit";
-    }[] = [
-      {
-        Count: 1,
-        Identification: "",
-        Phrase: "",
-        editType: "stringedit",
-      },
-    ];
-
-    Grid.Inject(RowDD);
-    Grid.Inject(Edit);
-
-    const grid: Grid = new Grid({
-      dataSource: dataSource,
-      editSettings: {
-        allowEditing: true,
-        allowAdding: true,
-        allowDeleting: true,
-      },
-      allowRowDragAndDrop: true,
-      columns: [
-        { field: "Count", headerText: "", width: 30 },
-        {
-          field: "Identification",
-          headerText: this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderIdentifier
-        },
-        { field: "arrow", headerText: "", width: 30 },
-        {
-          field: "Phrase",
-          headerText: this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderPhrase
-        },
-      ],
-    });
-
-    const content = `
-        <form id="formId" class="form-horizontal">
-
-          <div class="tab" style="border-bottom: 1px solid #e0e0e0;">
-            <div class="form-group">
-
-              <div style="display: flex; align-items: center;">
-                <div style="display: flex;">
-                  <h5>${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.titleField}:</h5>
-                </div>
-                <div style="display: flex; flex-grow: 10; padding-left: 1rem;">
-                    <input id="outlined" style="width: 100%;"/>
-                </div>
-              </div>
-
-            </div>
-          </div>
-
-
-          <div class="tab" style="border-bottom: 1px solid #e0e0e0;">
-              <h3 style="margin: 1rem 0 .5rem 0;">${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.configTitle}</h3>
-              <div style="display: flex; align-items: center;">
-
-                <div style="display: flex;">
-                  <h5 style="margin-right: 1rem;">${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterStartField}:</h5>
-                </div>
-
-                <div style="display: flex;">
-                  <input style="width: stretch;"
-                    type="text" id="delimiter-start" name="delimiter-start"
-                    data-required-message="*${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterStartRequired}" required=""
-                    data-msg-containerid="delimiterError" placeholder="," value=",">
-                  <div id="delimiterError"></div>
-                </div>
-
-                <div style="display: flex;">
-                  <h5 style="white-space: nowrap; margin: 0 1rem;">${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalField}:</h5>
-                </div>
-
-                <div style="display: flex;">
-                  <input style="width: stretch;"
-                    type="text" id="delimiter-end" name="delimiter-end"
-                    data-required-message="*${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalRequired}" required=""
-                    data-msg-containerid="finalDelimiterError"
-                    placeholder="${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalPlaceholder}"
-                    value="${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalPlaceholder}">
-                  <div id="finalDelimiterError"></div>
-                </div>
-
-              </div>
-
-            </div>
-          </div>
-           <div class="tab">
-            <h3 style="margin: 1rem 0 .5rem 0;">${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsTitle}</h3>
-             <div class="form-group" id="grid"></div>
-          </div>
-        </form>`;
-
-    const dialogUtility = DialogUtility.confirm({
-      title: `<div class='dlg-template'>${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.modalTitle}</div>`,
-      content: content,
-      width: "450px",
-      showCloseIcon: true,
-      closeOnEscape: true,
-      okButton: { text: this._languageManager.languages.language.iaraTranslate.additiveFieldModal.modalBtnOk, click: okClick },
-      cancelButton: { text: this._languageManager.languages.language.iaraTranslate.additiveFieldModal.modalBtnCancel, click: cancelClick },
-    });
-
-    grid.appendTo("#grid");
-
-    const outlineTextBox: TextBox = new TextBox({
-      placeholder: this._languageManager.languages.language.iaraTranslate.additiveFieldModal.titlePlaceholder,
-      cssClass: 'e-outline',
-    });
-    outlineTextBox.appendTo('#outlined');
-
-    const delimeterStart: TextBox = new TextBox({
-      placeholder: ',',
-      cssClass: 'e-outline',
-    });
-    delimeterStart.appendTo('#delimiter-start');
-
-    const delimeterEnd: TextBox = new TextBox({
-      placeholder: this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalPlaceholder,
-      cssClass: 'e-outline',
-    });
-    delimeterEnd.appendTo('#delimiter-end');
+    new IaraSyncfusionAdditiveFieldModal(this._languageManager);
   }
 }