diff --git a/src/ui/MiningRules/minedRulePad.js b/src/ui/MiningRules/minedRulePad.js
index 0487684..d4520ea 100644
--- a/src/ui/MiningRules/minedRulePad.js
+++ b/src/ui/MiningRules/minedRulePad.js
@@ -37,7 +37,7 @@ class MinedRulePad extends Component {
                 {/* {this.renderExplore()}*/}
                 <div
                     className={"mainDiv-overlay elementDiv" + (this.state.thisElement.activeElement ? " activeElement" : "") +
-                    (this.state.thisElement.selectedElement ? " selectedElement" : "")
+                        (this.state.thisElement.selectedElement ? " selectedElement" : "")
                     }>
                     <div className={"rowGroup"}>
                         {this.renderGroup("top")}
@@ -209,7 +209,7 @@ class MinedRulePad extends Component {
                     <div className={"inputTextDiv rowItem " + (childCondition.type === "wideText" ? "wideText" : "")}>
                         <span
                             className={"minedRuleEditor inputText" +
-                            (childElement.activeElement ? " activeElement " + colorCoding : "")}>
+                                (childElement.activeElement ? " activeElement " + colorCoding : "")}>
                             {childElement.text ? childElement.text : childCondition.placeholder}</span>
                     </div>
                 </div>
@@ -278,6 +278,8 @@ class MinedRulePad extends Component {
             if (identifier_element_ids.includes(childId)) {
                 return "frequency-color frequency-identifier";
             }
+            if (!this.props.isColorCodingEnabled) return ""; // Check if color coding is disabled
+
             let frequency = 0;
             if (childElement.activeElement) {
                 const elementIndex = childElement._data_._data_.elements
@@ -288,10 +290,10 @@ class MinedRulePad extends Component {
             return "frequency-color frequency-" +
                 Math.floor(frequency * 10);
         } catch (e) {
+            if (!this.props.isColorCodingEnabled) return ""; // Check if color coding is disabled
             return "frequency-color frequency-unknown";
         }
     }
 }
 
 export default MinedRulePad;
-
diff --git a/src/ui/MiningRules/minedRulesComponent.js b/src/ui/MiningRules/minedRulesComponent.js
index 2d8684b..da00e5b 100644
--- a/src/ui/MiningRules/minedRulesComponent.js
+++ b/src/ui/MiningRules/minedRulesComponent.js
@@ -63,6 +63,7 @@ class MinedRulesComponent extends Component {
 
             isExpanded: false,
             expandedIdentifierGroupIndex: 0,
+            isColorCodingEnabled: true,
         };
         this.messagesToBeSent = []; // the messages that are going to the server to be written on files
         this.clusterLimit = 10; // number of clusters in each category of mined rules.
@@ -263,24 +264,40 @@ class MinedRulesComponent extends Component {
     renderDescription() {
         const countRules = this.state.minedRules.reduce((sum, group) => sum + group.rulePadStates.length, 0);
         if (countRules === 0) return null;
-        return (<div className={"descriptionContainer"}>
-            <span className={"descriptionTitle"}>Tutorial</span>
-            <div style={{marginBottom: "20px"}}>
-                <h5>The following code snippets illustrates potential design rules.</h5>
-                <h5>The top snippet denotes <strong>when</strong> a design rules applies (IF part),
-                    and bottom components denote <strong>how</strong> the rule is applied (THEN part).</h5>
-            </div>
-            <div>
-                <h5>The purple background in the code shows how likely each element is in a design rule.</h5>
-                <h5><span className={"frequency-color frequency-10"}>Darker purple</span> means it's more likely to be
-                    part of a rule,
-                    and <span className={"frequency-color frequency-1"}>lighter purple</span> means it is less likely to
-                    be part of a rule.
-                </h5>
-                <h5><span className={"frequency-color frequency-identifier"}>Orange</span> background highlights the
-                    identifiers.</h5>
-            </div>
-        </div>);
+        return (
+            <div className="descriptionWrapper">
+                <div className="color-coding-toggle" style={{marginBottom: "15px"}}>
+                    <input
+                        type="checkbox"
+                        checked={this.state.isColorCodingEnabled}
+                        onChange={this.handleColorCodingToggle}
+                        style={{marginRight: "10px"}}
+                    />
+                    Highlight Code Elements Based On Their Likelihood Of Being Part Of A Rule
+                </div>
+                <div className={"descriptionContainer"}>
+                    <span className={"descriptionTitle"}>Tutorial</span>
+                    <div style={{marginBottom: "20px"}}>
+                        <h5>The following code snippets illustrates potential design rules.</h5>
+                        <h5>The top snippet denotes <strong>when</strong> a design rules applies (IF part),
+                            and bottom components denote <strong>how</strong> the rule is applied (THEN part).</h5>
+                    </div>
+                    {this.state.isColorCodingEnabled && (
+                        <div>
+                            <h5>The purple background in the code shows how likely each element is in a design
+                                rule.</h5>
+                            <h5><span className={"frequency-color frequency-10"}>Darker purple</span> means it's more
+                                likely to be part of a rule,
+                                and <span className={"frequency-color frequency-1"}>lighter purple</span> means it is
+                                less likely to be part of a rule.
+                            </h5>
+                        </div>
+                    )}
+                    <h5><span className={"frequency-color frequency-identifier"}>Orange</span> background
+                        highlights the identifiers.</h5>
+
+                </div>
+            </div>);
     }
 
     renderClusters() {
@@ -346,7 +363,8 @@ class MinedRulesComponent extends Component {
                                 isCluster={true}
                                 featureMetaData={this.props.featureMetaData}
                                 fileGroup={identifierGroup.value.children[childrenKeys[0]].fileGroup}
-                                elementId={parentElementId}/>
+                                elementId={parentElementId}
+                                isColorCodingEnabled={this.state.isColorCodingEnabled}/>
                         </div>
                         <div className={"thenKeyword"}><strong>{`THEN the ${identifierType} may have:`}</strong></div>
                         <div className={"thenParts"}>
@@ -366,7 +384,8 @@ class MinedRulesComponent extends Component {
                         isCluster={true}
                         featureMetaData={this.props.featureMetaData}
                         fileGroup={identifierGroup.value.children[key].fileGroup}
-                        elementId={featureGroupInformation[identifierGroup.value.children[key].fileGroup].rootId[1]}/>
+                        elementId={featureGroupInformation[identifierGroup.value.children[key].fileGroup].rootId[1]}
+                        isColorCodingEnabled={this.state.isColorCodingEnabled}/>
                     {identifierGroup.value.constraintsSnippets &&
                     identifierGroup.value.constraintsSnippets[key] &&
                     identifierGroup.value.constraintsSnippets[key][i] ?
@@ -697,6 +716,11 @@ class MinedRulesComponent extends Component {
             }
         });
     }
+    handleColorCodingToggle = () => {
+        this.setState((prevState) => ({
+            isColorCodingEnabled: !prevState.isColorCodingEnabled,
+        }));
+    };
 }
 
 function mapStateToProps(state) {
@@ -845,3 +869,4 @@ class CodeSnippets extends Component {
         });
     }
 }
+