diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx
index 6b4506b01..098c03281 100644
--- a/client/components/codeEditor/codeEditor.jsx
+++ b/client/components/codeEditor/codeEditor.jsx
@@ -39,7 +39,7 @@ const createHighlightPlugin = (renderer, tab)=>{
 		}
 		toDOM() {
 			const span = document.createElement('span');
-			span.className = 'cm-page-count';
+			span.className = 'cm-count';
 			span.textContent = this.count;
 			span.style.color = '#989898';
 			return span;
@@ -62,6 +62,7 @@ const createHighlightPlugin = (renderer, tab)=>{
 				const tokens = tokenize(view.state.doc.toString());
 
 				let pageCount = 1;
+				let snippetCount = 0;
 				tokens.forEach((tok)=>{
 					const line = view.state.doc.line(tok.line + 1);
 
@@ -74,11 +75,15 @@ const createHighlightPlugin = (renderer, tab)=>{
 
 					} else {
 						decos.push(Decoration.line({ class: `cm-${tok.type}` }).range(line.from));
-						if(tok.type === 'pageLine') {
+						if(tok.type === 'pageLine'  && tab === "brewText") {
 							pageCount++;
 							line.from === 0 && pageCount--;
 							decos.push(Decoration.widget({ widget: new countWidget(pageCount), side: 2 }).range(line.to));
 						}
+						if(tok.type === 'snippetLine' && tab === "brewSnippets") {
+							snippetCount++;
+							decos.push(Decoration.widget({ widget: new countWidget(snippetCount), side: 2 }).range(line.to));
+						}
 					}
 				});
 
@@ -121,7 +126,7 @@ const CodeEditor = forwardRef(
   			? syntaxHighlighting(customHighlightStyle)
   			: syntaxHighlighting(legacyCustomHighlightStyle);
 
-			const customHighlightPlugin = createHighlightPlugin(renderer);
+			const customHighlightPlugin = createHighlightPlugin(renderer, tab);
 
 			const combinedHighlight = [
 				customHighlightPlugin,
@@ -231,7 +236,7 @@ const CodeEditor = forwardRef(
     		? syntaxHighlighting(customHighlightStyle)
     		: syntaxHighlighting(legacyCustomHighlightStyle);
 
-			const customHighlightPlugin = createHighlightPlugin(renderer);
+			const customHighlightPlugin = createHighlightPlugin(renderer, tab);
 
 			view.dispatch({
 				effects : highlightCompartment.reconfigure([customHighlightPlugin, highlightExtension]),
diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less
index 7caa47561..4b2bd6017 100644
--- a/client/homebrew/editor/editor.less
+++ b/client/homebrew/editor/editor.less
@@ -10,95 +10,100 @@
 	.codeEditor {
 		height            : calc(100% - 25px);
 		.cm-editor { height : 100%; }
-		.cm-pageLine, &.brewSnippets .cm-snippetLine {
+		&.brewSnippets .cm-snippetLine {
 			background : #33333328;
 			border-top : #333399 solid 1px;
 		}
 
-		.cm-tooltip-autocomplete {
+		&.brewText,  &.brewSnippets {
 
-			li {
-				display         : flex;
-				gap             : 10px;
-				align-items     : center;
-				justify-content : flex-start;
-
-				.cm-completionIcon { display : none; }
-				.cm-tooltip-autocomplete .cm-completionLabel { translate : 0 -2px; }
+			.cm-pageLine {
+				background : #33333328;
+				border-top : #333399 solid 1px;
 			}
 
-		}
+			.cm-tooltip-autocomplete {
+
+				li {
+					display         : flex;
+					gap             : 10px;
+					align-items     : center;
+					justify-content : flex-start;
+
+					.cm-completionIcon { display : none; }
+					.cm-tooltip-autocomplete .cm-completionLabel { translate : 0 -2px; }
+				}
+			}
 		
-		.cm-page-count {
-			float : right;
-			color : grey;
-		}
-		.cm-snippet-count {
-			float : right;
-			color : grey;
-		}
-		.cm-columnSplit {
-			font-style        : italic;
-			color             : grey;
-			background-color  : fade(#229999, 15%);
-			border-bottom     : #229999 solid 1px;
-		}
-		.cm-define {
-			&:not(.term):not(.definition) {
-				font-weight   : bold;
-				color         : #949494;
-				background    : #E5E5E5;
-				border-radius : 3px;
+			.cm-count {
+				float : right;
+				color : grey;
 			}
-			&.term { color : rgb(96, 117, 143); }
-			&.definition { color : rgb(97, 57, 178); }
-		}
-		.cm-block:not(.cm-comment) {
-			font-weight : bold;
-			color       : purple;
-			//font-style: italic;
-		}
-		.cm-inline-block:not(.cm-comment) {
-			font-weight : bold;
-			color       : red;
-			//font-style: italic;
-		}
-		.cm-injection:not(.cm-comment) {
-			font-weight : bold;
-			color       : green;
-		}
-		.cm-emoji:not(.cm-comment) {
-			padding-bottom : 1px;
-			margin-left    : 2px;
-			font-weight    : bold;
-			color          : #360034;
-			outline        : solid 2px #FF96FC;
-			outline-offset : -2px;
-			background     : #FFC8FF;
-			border-radius  : 6px;
-		}
-		.cm-superscript:not(.cm-comment) {
-			font-size      : 0.9em;
-			font-weight    : bold;
-			vertical-align : super;
-			color          : goldenrod;
-		}
-		.cm-subscript:not(.cm-comment) {
-			font-size      : 0.9em;
-			font-weight    : bold;
-			vertical-align : sub;
-			color          : rgb(123, 123, 15);
-		}
-		.cm-definitionList {
-			.cm-definitionTerm { color : rgb(96, 117, 143); }
-			.cm-definitionColon {
-				font-weight   : bold;
-				color         : #949494;
-				background    : #E5E5E5;
-				border-radius : 3px;
+			.cm-columnSplit {
+				font-style        : italic;
+				color             : grey;
+				background-color  : fade(#229999, 15%);
+				border-bottom     : #229999 solid 1px;
 			}
-			.cm-definitionDesc { color : rgb(97, 57, 178); }
-		}		
+			.cm-define {
+				&:not(.term):not(.definition) {
+					font-weight   : bold;
+					color         : #949494;
+					background    : #E5E5E5;
+					border-radius : 3px;
+				}
+				&.term { color : rgb(96, 117, 143); }
+				&.definition { color : rgb(97, 57, 178); }
+			}
+			.cm-block:not(.cm-comment) {
+				font-weight : bold;
+				color       : purple;
+				//font-style: italic;
+			}
+			.cm-inline-block:not(.cm-comment) {
+				font-weight : bold;
+				color       : red;
+				//font-style: italic;
+			}
+			.cm-injection:not(.cm-comment) {
+				font-weight : bold;
+				color       : green;
+			}
+			.cm-emoji:not(.cm-comment) {
+				padding-bottom : 1px;
+				margin-left    : 2px;
+				font-weight    : bold;
+				color          : #360034;
+				outline        : solid 2px #FF96FC;
+				outline-offset : -2px;
+				background     : #FFC8FF;
+				border-radius  : 6px;
+			}
+			.cm-superscript:not(.cm-comment) {
+				font-size      : 0.9em;
+				font-weight    : bold;
+				vertical-align : super;
+				color          : goldenrod;
+			}
+			.cm-subscript:not(.cm-comment) {
+				font-size      : 0.9em;
+				font-weight    : bold;
+				vertical-align : sub;
+				color          : rgb(123, 123, 15);
+			}
+			.cm-definitionList {
+				.cm-definitionTerm { color : rgb(96, 117, 143); }
+				.cm-definitionColon {
+					font-weight   : bold;
+					color         : #949494;
+					background    : #E5E5E5;
+					border-radius : 3px;
+				}
+				.cm-definitionDesc { color : rgb(97, 57, 178); }
+			}		
+
+		}
+
 	}
 
 	.brewJump {