diff --git a/src/main.ts b/src/main.ts
index f9a70d4..f6e7a04 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -111,7 +111,10 @@ export default class OrthographyPlugin extends Plugin {
     this.hints = await this.fetchData(text);
     if (this.hints instanceof TypeError) {
       this.popup.removeLoader();
-      new Notice('Server not responding');
+      this.toggler.removeLoading();
+      new Notice(
+        'The server is not responding. Please check your Internet connection.'
+      );
       return;
     }
     if (this.hints && this.hints.alerts && this.hints.alerts.length) {
@@ -146,7 +149,7 @@ export default class OrthographyPlugin extends Plugin {
   private onReplaceWord(event: any) {
     const origWordLen = event.currentTarget.dataset.text.length;
     const newWord = event.currentTarget.dataset.toreplace;
-    const begin = event.currentTarget.dataset.position;
+    const begin = event.currentTarget.dataset.begin;
     const end = begin + origWordLen;
     self.editor.replaceWord(
       self.activeEditor,
diff --git a/src/orthography/UIElements/UIHints.ts b/src/orthography/UIElements/UIHints.ts
index 553c579..59a512f 100644
--- a/src/orthography/UIElements/UIHints.ts
+++ b/src/orthography/UIElements/UIHints.ts
@@ -9,7 +9,7 @@ const renderHints = (card: IData, index: number): string => {
           <span
             data-toreplace="${item}"
             data-index="${index}"
-            data-position="${begin}"
+            data-begin="${begin}"
             data-text="${text}"
             class="obsidian-orthography-word-to-replace obsidian-orthography-popup-replacement"
             title="Click to correct your spelling">
@@ -25,7 +25,7 @@ const renderHints = (card: IData, index: number): string => {
   ) {
     return `
       <span
-        data-position="${begin}"
+        data-begin="${begin}"
         data-text="${text}"
         data-toreplace="${replacements[0]}"
         class="obsidian-orthography-word-to-replace obsidian-orthography-popup-hightligh--red">${
@@ -41,7 +41,7 @@ const renderHints = (card: IData, index: number): string => {
         <span
           data-toreplace="${item}"
           data-index="${index}"
-          data-position="${begin}"
+          data-begin="${begin}"
           data-text="${highlightText}"
           class="obsidian-orthography-word-to-replace obsidian-orthography-popup-replacement"
           title="Click to correct your spelling"
@@ -58,7 +58,7 @@ const renderHints = (card: IData, index: number): string => {
         <span
           data-toreplace="${item}"
           data-index="${index}"
-          data-position="${begin}"
+          data-begin="${begin}"
           data-text="${text}"
           class="obsidian-orthography-word-to-replace obsidian-orthography-popup-replacement"
           title="Click to correct your spelling"
@@ -82,7 +82,7 @@ const UIHints = (alerts: IData[]): string => {
         begin
       } = card;
       return `
-          <div data-position="${begin}" id="obsidian-orthography-popup-item-${index}" class="obsidian-orthography-popup-item ${impact}">
+          <div data-begin="${begin}" id="obsidian-orthography-popup-item-${index}" class="obsidian-orthography-popup-item ${impact}">
             <div class="obsidian-orthography-popup-minicard">
               <div>${highlightText || ''}</div>
               ${
diff --git a/src/orthography/orthographyEditor.ts b/src/orthography/orthographyEditor.ts
index 9c23cbe..26ecf38 100644
--- a/src/orthography/orthographyEditor.ts
+++ b/src/orthography/orthographyEditor.ts
@@ -55,7 +55,9 @@ export class OrthographyEditor implements IOrthographyEditor {
       {
         className: O_HIGHLIGHT,
         attributes: {
-          position: originalWord.begin
+          begin: originalWord.begin,
+          end: originalWord.end,
+          len: originalWord.len
         }
       }
     );
diff --git a/src/orthography/orthographyPopup.ts b/src/orthography/orthographyPopup.ts
index e508793..d181d93 100644
--- a/src/orthography/orthographyPopup.ts
+++ b/src/orthography/orthographyPopup.ts
@@ -144,9 +144,9 @@ export class OrthographyPopup {
       e.currentTarget.classList.add(O_POPUP_ITEM_OPENED);
     }
 
-    const position = e.currentTarget.dataset.position;
-    if (position) {
-      self.scrollToWord(position);
+    const begin = e.currentTarget.dataset.begin;
+    if (begin) {
+      self.scrollToWord(begin);
     }
   }
 
@@ -187,8 +187,8 @@ export class OrthographyPopup {
   }
 
   private onFocusWord(e: any) {
-    const p = e.currentTarget.dataset.position;
-    const word = document.querySelector(`[position="${p}"]`);
+    const begin = e.currentTarget.dataset.begin;
+    const word = document.querySelector(`[begin="${begin}"]`);
     if (word) {
       word.classList.add(O_HIGHLIGHT_FOCUSED);
     }
@@ -214,21 +214,19 @@ export class OrthographyPopup {
   }
 
   private onOpenCard(event: any) {
-    const { value: position } = event.currentTarget.attributes.position;
+    const { value: begin } = event.currentTarget.attributes.begin;
     const popup: any = document.querySelector(`.${O_POPUP}`);
     const opened = document.querySelectorAll(`.${O_POPUP_ITEM_OPENED}`);
     opened.forEach((o) => o.classList.remove(O_POPUP_ITEM_OPENED));
-    const selected: any = document.querySelector(
-      `[data-position="${position}"]`
-    );
+    const selected: any = document.querySelector(`[data-begin="${begin}"]`);
     selected.classList.add(O_POPUP_ITEM_OPENED);
     popup.scrollTop = selected.offsetTop;
   }
 
-  private scrollToWord(position: number) {
+  private scrollToWord(begin: number) {
     const activeEditor = self.getEditor();
     const scroller = activeEditor.getScrollerElement();
-    scroller.scrollTop = +position - 300;
+    scroller.scrollTop = +begin - 300;
   }
 
   private getEditor() {