diff --git a/index.html b/index.html
index dd28ed5..d34b287 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,9 @@
     <div id="ed3" class="online-editor" contenteditable="true"><div>Popravite kar želite.</div></div>
     <div id="ed4" class="online-editor" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
     <div id="ed5" class="online-editor" contenteditable="true">To je preiskus.</div>-->
-    <div id="ed6" class="online-editor" contenteditable="true"><div class="contextual"><p beschecked="true">Madžarski premier Orban je tako očitno vendarle <span class="typo-mistake">pristal na nadaljnjo makrofinančno pomoč Ukrajini</span> v okviru revizije dolgoročnega proračuna unije 2021-2027<span class="typo-mistake">.</span> Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div>
+    <!-- <div id="ed6" class="online-editor" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div> -->
+    <div id="correction-panel"></div>
+    <div id="ed7" class="online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
     <my-component></my-component>
   </body>
 </html>
diff --git a/online-editor.js b/online-editor.js
index 21d1fd1..d1ec829 100644
--- a/online-editor.js
+++ b/online-editor.js
@@ -114,16 +114,26 @@ async function besCheckText(el)
                     }
                   }
 
-                  const span = document.createElement('span')
-                  span.classList.add('typo-mistake')
-
-                  // Dirty hack, copied from: https://stackoverflow.com/questions/67634286/invalidstateerror-failed-to-execute-surroundcontents-on-range-the-range-ha
-                  span.appendChild(range.extractContents());
-                  range.insertNode(span);
-
-                  // This is a better way to apply span elements, 
-                  // but it doesnt work when the range has partially selected a non-Text node.
-                  // range.surroundContents(span)
+                  const clientRects = range.getClientRects()
+                  const correctionPanel = document.getElementById('correction-panel');
+                  const rect = clientRects[0];
+                  const highlight = document.createElement("div");
+                  highlight.classList.add("typo-mistake");
+                  highlight.dataset.info = match.message;
+                  highlight.style.left = `${rect.left}px`;
+                  highlight.style.top = `${rect.top}px`;
+                  highlight.style.width = `${rect.width}px`;
+                  highlight.style.height = `${rect.height}px`;
+                  correctionPanel.appendChild(highlight);
+                  
+                  // TODO: Find a solution to handle click events on the highlights
+                  // const editor = document.querySelector('.online-editor')
+                  // highlight.addEventListener("click", function(e) {
+                    // console.log(e);
+                    // editor.focus();
+                    // besHandleClick(e);
+                    // return true;
+                  // });
                 })
 
                 el.setAttribute('besChecked', 'true')
diff --git a/styles.css b/styles.css
index aa71a1f..05369b4 100644
--- a/styles.css
+++ b/styles.css
@@ -11,15 +11,19 @@
   white-space: pre-wrap;
   overflow-y: auto;
   font-family: Arial, Helvetica, sans-serif;
+  z-index: 2;
 }
 
 /* Mistake types styles */
 .typo-mistake {
-  text-decoration: underline;
+  border-bottom: 2px solid red;
+  position: absolute;
+  z-index: 2;
+  cursor: text;
+  /* pointer-events: none; */
+  /* text-decoration: underline;
   text-decoration-color: red;
-  cursor: pointer;
-  position: relative;
-  z-index: 3;
+  cursor: text; */
 }
 
 .other-mistake {