diff --git a/images/turn-off-svgrepo-com.svg b/images/turn-off-svgrepo-com.svg
new file mode 100644
index 0000000..6c31e9c
--- /dev/null
+++ b/images/turn-off-svgrepo-com.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-turn-off" fill="#000000">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <title>1105</title> <defs> </defs> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(1.000000, 0.000000)" fill="#fe0606"> <path d="M10.124,1.613 L10.124,3.962 C11.73,4.849 12.756,6.586 12.756,8.54 C12.756,11.394 10.406,13.709 7.508,13.709 C4.612,13.709 2.262,11.395 2.262,8.54 C2.262,6.523 3.274,4.791 4.958,3.939 L4.958,1.611 C2.021,2.586 0.063,5.304 0.063,8.54 C0.063,12.592 3.397,15.875 7.507,15.875 C11.618,15.875 14.953,12.592 14.953,8.54 C14.954,5.363 12.98,2.638 10.124,1.613 L10.124,1.613 Z" class="si-glyph-fill"> </path> <path d="M7.46,7.873 C8.238,7.873 8.872,7.393 8.872,6.798 L8.872,1.115 C8.872,0.521 8.238,0.04 7.46,0.04 C6.681,0.04 6.048,0.521 6.048,1.115 L6.048,6.798 C6.048,7.393 6.681,7.873 7.46,7.873 L7.46,7.873 Z" class="si-glyph-fill"> </path> </g> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/service.js b/service.js
index dded9ca..cad462a 100644
--- a/service.js
+++ b/service.js
@@ -60,11 +60,13 @@ class BesService {
       false
     )
     if (this.timer) clearTimeout(this.timer)
-    service.abortController.abort()
+    this.abortController.abort()
     besServices = besServices.filter(item => item !== this)
     this.hostElement.spellcheck = this.originalSpellcheck
     this.correctionPanel.remove()
     this.scrollPanel.remove()
+    this.statusDiv.remove()
+    this.statusIcon.remove()
   }
 
   /**
@@ -223,6 +225,11 @@ class BesService {
     statusDiv.appendChild(statusIcon)
     this.setStatusDivPosition(hostElement, statusDiv)
     hostElement.parentNode.insertBefore(statusDiv, hostElement.nextSibling)
+    const statusPopup = document.createElement('bes-popup-status-el')
+    document.body.appendChild(statusPopup)
+    statusDiv.addEventListener('click', e => {
+      this.handleStatusClick(e, statusPopup)
+    })
 
     return { correctionPanel, scrollPanel, statusDiv, statusIcon }
   }
@@ -377,6 +384,10 @@ class BesService {
     this.statusIcon.classList.add(status)
   }
 
+  handleStatusClick(e, popup) {
+    popup.show(e.clientX, e.clientY, this)
+  }
+
   /**
    * Tests if given element is block element.
    *
@@ -1016,6 +1027,134 @@ class BesPopupEl extends HTMLElement {
   }
 }
 
+class BesStatusPopup extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: none;
+        }
+        :host(.show){
+          z-index: 10;
+        }
+        .popup-text {
+          max-width: 160px;
+          color: black;
+          text-align: center;
+          padding: 8px 0;
+          z-index: 1;
+        }
+        .bes-popup-container {
+          visibility: hidden;
+          max-width: 300px;
+          background-color: rgb(241, 243, 249);
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+          border-radius: 5px;
+          padding: 8px;
+          z-index: 1;
+        }
+        .bes-toolbar {
+          display: flex;
+          justify-content: end;
+          padding: 5px 2px;
+        }
+        .bes-toolbar button {
+          margin-right: 2px;
+        }
+        .bes-popup-title {
+          flex-grow: 1;
+        }
+        .bes-text-div{
+          background-color: white;
+          padding: 10px;
+          border-radius: 5px;
+        }
+        .bes-service-btn{
+          background-color: none;
+          width: 30px;
+          height: 30px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .bes-turn-off{
+          width: 20px;
+          height: 20px;
+        }
+        :host(.show) .bes-popup-container {
+          visibility: visible;
+          animation: fadeIn 1s;
+        }
+        @keyframes fadeIn {
+          from {opacity: 0;}
+          to {opacity:1 ;}
+        }
+      </style>
+      <div class="bes-popup-container">
+        <div class="bes-toolbar">
+          <div class="bes-popup-title">Besana</div>
+          <button class="bes-close-btn" onclick="BesStatusPopup.hide()">X</button>
+        </div>
+        <div class="bes-text-div">
+          <span class="popup-text">
+            Če želite izključiti preverjanje pravopisa, kliknite na gumb.
+          </span>
+          <button class="bes-service-btn">
+            <img class="bes-turn-off" src="/images/turn-off-svgrepo-com.svg" alt="Izključi preverjanje pravopisa">
+          </button>
+        </div>
+      </div>
+    `
+  }
+
+  show(x, y, service) {
+    y = y + 20
+    this.style.position = 'fixed'
+    this.style.left = `${x}px`
+    this.style.top = `${y}px`
+    this.style.display = 'block'
+
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+    const popupWidth = this.offsetWidth
+    const popupHeight = this.offsetHeight
+    const maxPositionX = viewportWidth - popupWidth
+    const maxPositionY = viewportHeight - popupHeight
+    const positionX = this.offsetLeft
+    const positionY = this.offsetTop
+    if (positionX > maxPositionX) {
+      this.style.left = maxPositionX + 'px'
+    }
+    if (positionY > maxPositionY) {
+      this.style.top = maxPositionY + 'px'
+    }
+    this.disableButton = this.shadowRoot.querySelector('.bes-service-btn')
+    if (service) {
+      this.disableButton.addEventListener('click', () => this.disable(service))
+    }
+    this.classList.add('show')
+  }
+
+  connectedCallback() {
+    this.render()
+  }
+
+  disable(service) {
+    service.unregister()
+    BesStatusPopup.hide()
+  }
+
+  static hide() {
+    const popup = document.querySelector('bes-popup-status-el.show')
+    popup?.classList?.remove('show')
+  }
+}
+
 window.onload = () => {
   document.querySelectorAll('.bes-service').forEach(hostElement => {
     if (hostElement.tagName === 'TEXTAREA') BesTAService.register(hostElement)
@@ -1055,3 +1194,4 @@ window.onscroll = () => {
 }
 
 customElements.define('bes-popup-el', BesPopupEl)
+customElements.define('bes-popup-status-el', BesStatusPopup)