diff --git a/service2.js b/service2.js
index 9e9fd27..21d34c1 100644
--- a/service2.js
+++ b/service2.js
@@ -48,6 +48,16 @@ class BesService {
     this.resizeObserver = new ResizeObserver(this.onResize.bind(this))
     this.resizeObserver.observe(this.hostElement)
 
+    // TODO: Include missing rules
+    // Initial user feedback indicated a requirement for clear differentiation between spelling and grammar errors.
+    this.ruleTypes = {
+      BESANA_1: 'bes-spelling-mistake',
+      BESANA_2: 'bes-spelling-mistake',
+      BESANA_3: 'bes-spelling-mistake',
+      BESANA_4: 'bes-grammar-mistake',
+      BESANA_5: 'bes-spelling-mistake'
+    }
+
     besServices.push(this)
   }
 
@@ -176,12 +186,12 @@ class BesService {
    * @param {Range} range Grammar mistake range
    * @returns {Array} Grammar mistake highlight elements
    */
-  addMistakeMarkup(range) {
+  addMistakeMarkup(range, ruleType) {
     const scrollPanelRect = this.scrollPanel.getBoundingClientRect()
     let highlights = []
     for (let rect of range.getClientRects()) {
       const highlight = document.createElement('div')
-      highlight.classList.add('bes-typo-mistake')
+      highlight.classList.add(ruleType)
       highlight.style.left = `${rect.left - scrollPanelRect.left}px`
       highlight.style.top = `${rect.top - scrollPanelRect.top}px`
       highlight.style.width = `${rect.width}px`
@@ -472,10 +482,13 @@ class BesTreeService extends BesService {
                     }
                   }
 
+                  const ruleType =
+                    this.ruleTypes[match.rule.id] || 'bes-spelling-mistake'
                   matches.push({
-                    highlights: this.addMistakeMarkup(range),
+                    highlights: this.addMistakeMarkup(range, ruleType),
                     range: range,
-                    match: match
+                    match: match,
+                    ruleType: ruleType
                   })
                 })
                 this.markProofed(node, matches)
@@ -541,7 +554,7 @@ class BesTreeService extends BesService {
     this.results.forEach(result => {
       result.matches.forEach(match => {
         if (match.highlights) match.highlights.forEach(h => h.remove())
-        match.highlights = this.addMistakeMarkup(match.range)
+        match.highlights = this.addMistakeMarkup(match.range, match.ruleType)
       })
     })
   }
@@ -1177,10 +1190,13 @@ class BesPlainTextService extends BesService {
                 nodes[nodeIdx].node,
                 matchEnd - nodes[nodeIdx].start
               )
+              const ruleType =
+                this.ruleTypes[match.rule.id] || 'bes-spelling-mistake'
               matches.push({
-                highlights: this.addMistakeMarkup(matchRange),
+                highlights: this.addMistakeMarkup(matchRange, ruleType),
                 range: matchRange,
-                match: match
+                match: match,
+                ruleType: ruleType
               })
             })
             this.markProofed(paragraphRange, matches)
@@ -1260,7 +1276,7 @@ class BesPlainTextService extends BesService {
     this.results.forEach(result => {
       result.matches.forEach(match => {
         if (match.highlights) match.highlights.forEach(h => h.remove())
-        match.highlights = this.addMistakeMarkup(match.range)
+        match.highlights = this.addMistakeMarkup(match.range, match.ruleType)
       })
     })
   }
diff --git a/styles.css b/styles.css
index 247268a..b9f02c5 100644
--- a/styles.css
+++ b/styles.css
@@ -1,14 +1,21 @@
 /* TODO: Dark mode theme */
 
 /* Mistake types styles */
-.bes-typo-mistake {
-  border-bottom: 2px solid red;
+.bes-spelling-mistake {
+  border-bottom: 2px solid #ff7300;
   position: absolute;
   z-index: 3;
   cursor: text;
-  /* pointer-events: none; */
 }
 
+.bes-grammar-mistake {
+  border-bottom: 2px solid #007bff;
+  position: absolute;
+  z-index: 3;
+  cursor: text;
+}
+
+/* Styles required to ensure full functionality and optimal user experience. */
 .bes-correction-panel-parent {
   position: relative;
   overflow: visible;