diff --git a/index.html b/index.html
index 742110d..4cd2bcc 100644
--- a/index.html
+++ b/index.html
@@ -8,9 +8,8 @@
     <script src="online-editor.js"></script>
   </head>
   <body>
-    <textarea id="besana-editor">
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo eaque magnam, alias sed consequatur officia ullam aspernatur laborum nostrum autem rerum? Eveniet quam placeat, minus magni nihil temporibus asperiores ipsa!
-Nov odstavek lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam harum quis suscipit, culpa eius voluptatibus eaque, perferendis pariatur illo, est quos sit incidunt quia possimus delectus ea aperiam eum sint?</textarea
-    >
+    <div id="besana-editor" class="online-editor" contenteditable="true">Lorem ipsum dolor sit amet consectetur adipisicing elit.
+Tole je nov paragraf</div>
+    <button id="btn-check">Preveri txt</button>
   </body>
 </html>
diff --git a/online-editor.js b/online-editor.js
index 235acba..1d41035 100644
--- a/online-editor.js
+++ b/online-editor.js
@@ -1,5 +1,33 @@
 window.onload = () => {
-  const textArea = document.getElementById('besana-editor')
-  const textAreaValue = textArea.value
-  console.log(textAreaValue)
+  const btnCheck = document.getElementById('btn-check')
+  btnCheck.addEventListener('click', checkText)
+}
+
+function checkText() {
+  const textArea = document.getElementById('besana-editor')
+  const textAreaValue = textArea?.textContent
+  console.log(textAreaValue)
+  const paragraphs = separateParagraphs(textAreaValue)
+  console.log(paragraphs)
+  const modifiedParagraphs = paragraphs.map(paragraph =>
+    mockSpellChecker(paragraph)
+  )
+  console.log(modifiedParagraphs)
+  textArea.innerHTML = modifiedParagraphs.join('\n')
+}
+
+function separateParagraphs(text) {
+  return text.split('\n')
+}
+
+function mockSpellChecker(text) {
+  const words = text.split(' ')
+  const specificWords = ['Tole', 'nov', 'dolor']
+  const modifiedWords = words.map(word => {
+    if (specificWords.includes(word)) {
+      return `<span class="typo-mistake">${word}</span>`
+    }
+    return word
+  })
+  return modifiedWords.join(' ')
 }
diff --git a/styles.css b/styles.css
index 9074cca..26d2b0f 100644
--- a/styles.css
+++ b/styles.css
@@ -1,12 +1,25 @@
-#besana-editor {
-  width: 100%;
-  height: 100%;
+/* Besana online editor */
+.online-editor {
+  width: 80%;
+  height: 300px;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 10px;
+  background-color: #f5f5f5;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  font-family: 'Courier New', Courier, monospace;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-y: auto;
 }
 
 /* Mistake types styles */
 .typo-mistake {
   text-decoration: underline;
   text-decoration-color: red;
+  cursor: pointer;
+  position: relative;
+  z-index: 3;
 }
 
 .other-mistake {
