diff --git a/lxl-web/src/lib/components/Search.svelte b/lxl-web/src/lib/components/Search.svelte
index fdcd82546..376cbb595 100644
--- a/lxl-web/src/lib/components/Search.svelte
+++ b/lxl-web/src/lib/components/Search.svelte
@@ -7,10 +7,14 @@
 	import getSortedSearchParams from '$lib/utils/getSortedSearchParams';
 	import BiSearch from '~icons/bi/search';
 	import { lxlQueryLanguage } from 'codemirror-lang-lxlquery';
+	import { highlightExtension } from '$lib/utils/LxlQueryHighlight';
+	import '$lib/styles/lxlquery.css';
 
 	export let placeholder: string;
 	export let autofocus: boolean = false;
 
+	const supersearchExtensions = [highlightExtension];
+
 	$: showAdvanced = $page.url.searchParams.get('_x') === 'advanced';
 	let q = $page.params.fnurgel
 		? '' //don't reflect related search on resource pages
@@ -49,6 +53,7 @@
 			name="_q"
 			bind:value={q}
 			language={lxlQueryLanguage}
+			extensions={supersearchExtensions}
 			placeholder={$page.data.t('search.search')}
 		/>
 	{:else}
diff --git a/lxl-web/src/lib/styles/lxlquery.css b/lxl-web/src/lib/styles/lxlquery.css
new file mode 100644
index 000000000..18bc06a79
--- /dev/null
+++ b/lxl-web/src/lib/styles/lxlquery.css
@@ -0,0 +1,28 @@
+.lxlq.qualifier {
+  color:lightgreen;
+}
+
+.lxlq.qualifierkey {
+  color:green;
+}
+
+.lxlq.qualifiervalue {
+  color:green;
+}
+
+.lxlq.equaloperator, 
+.lxlq.compareoperator {
+  color:darkolivegreen;
+}
+
+.lxlq.booleanoperator {
+  color: #935493;
+}
+
+.lxlq.booleanquery {
+  color: purple;
+}
+
+.lxlq.wildcard {
+  color: orange;
+}
\ No newline at end of file
diff --git a/lxl-web/src/nprogress.css b/lxl-web/src/lib/styles/nprogress.css
similarity index 100%
rename from lxl-web/src/nprogress.css
rename to lxl-web/src/lib/styles/nprogress.css
diff --git a/lxl-web/src/lib/utils/LxlQueryHighlight.ts b/lxl-web/src/lib/utils/LxlQueryHighlight.ts
new file mode 100644
index 000000000..b9cd93156
--- /dev/null
+++ b/lxl-web/src/lib/utils/LxlQueryHighlight.ts
@@ -0,0 +1,18 @@
+import { syntaxHighlighting } from '@codemirror/language';
+import { customTags as t } from 'codemirror-lang-lxlquery';
+import { tagHighlighter } from '@lezer/highlight';
+
+const highlighter = tagHighlighter([
+  { tag: t.Qualifier, class: 'qualifier' },
+  { tag: t.QualifierKey, class: 'qualifierkey' },
+  { tag: t.QualifierValue, class: 'qualifiervalue' },
+  { tag: t.EqualOperator, class: 'equaloperator' },
+  { tag: t.CompareOperator, class: 'compareoperator' },
+  { tag: t.BooleanOperator, class: 'booleanoperator' },
+  { tag: t.BooleanQuery, class: 'booleanquery' },
+  { tag: t.Wildcard, class: 'wildcard' }
+], {
+  all: 'lxlq',
+})
+
+export const highlightExtension = syntaxHighlighting(highlighter);
\ No newline at end of file
diff --git a/lxl-web/src/routes/+layout.svelte b/lxl-web/src/routes/+layout.svelte
index 44bc43542..428145a69 100644
--- a/lxl-web/src/routes/+layout.svelte
+++ b/lxl-web/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import NProgress from 'nprogress';
-	import '../nprogress.css';
+	import '$lib/styles/nprogress.css';
 	import { navigating } from '$app/stores';
 	import Matomo from '$lib/components/Matomo.svelte';
 	import CookieConsent from '$lib/components/CookieConsent.svelte';
diff --git a/packages/codemirror-lang-lxlquery/src/index.ts b/packages/codemirror-lang-lxlquery/src/index.ts
index a95aad228..cad15d5c2 100644
--- a/packages/codemirror-lang-lxlquery/src/index.ts
+++ b/packages/codemirror-lang-lxlquery/src/index.ts
@@ -1,17 +1,24 @@
 import { parser } from './syntax.grammar';
 import { LRLanguage, LanguageSupport } from '@codemirror/language';
-import { styleTags, tags as t } from '@lezer/highlight';
+import { styleTags, Tag } from '@lezer/highlight';
+
+// Turn these grammar nodes into stylable tags
+export const customTags = {
+	Qualifier: Tag.define('Qualifier'),
+	QualifierKey: Tag.define('QualifierKey'),
+	QualifierValue: Tag.define('QualifierValue'),
+	EqualOperator: Tag.define('EqualOperator'),
+	CompareOperator: Tag.define('CompareOperator'),
+	BooleanQuery: Tag.define('BooleanQuery'),
+	BooleanOperator: Tag.define('BooleanOperator'),
+	Wildcard: Tag.define('Wildcard')
+}
 
 export const lxlQueryLanguage = LRLanguage.define({
 	name: 'Libris XL query',
 	parser: parser.configure({
 		props: [
-			styleTags({
-				Identifier: t.variableName,
-				String: t.string,
-				CompareOperator: t.compareOperator,
-				'( )': t.paren
-			})
+			styleTags(customTags)
 		]
 	}),
 	languageData: {}
diff --git a/packages/codemirror-lang-lxlquery/src/syntax.grammar b/packages/codemirror-lang-lxlquery/src/syntax.grammar
index 34448cae4..8e41988c4 100644
--- a/packages/codemirror-lang-lxlquery/src/syntax.grammar
+++ b/packages/codemirror-lang-lxlquery/src/syntax.grammar
@@ -3,7 +3,7 @@
 @skip { space }
 
 term {
-  Freetext |
+  freetext |
   Qualifier |
   Group |
   BooleanQuery
@@ -12,12 +12,12 @@ term {
 Group { "(" term* ")" } 
 
 BooleanQuery { 
-  (Freetext | Qualifier) BooleanOperator (Freetext | Qualifier) 
-  (BooleanOperator (Freetext | Qualifier))+?
+  (freetext | Qualifier) BooleanOperator (freetext | Qualifier) 
+  (BooleanOperator (freetext | Qualifier))+?
 }
 
 Qualifier {
-  (QualifierKey (EqualOperator | CompareOperator) QualifierValue) | Reserved
+  (QualifierKey (EqualOperator | CompareOperator) QualifierValue) | reserved
 }
 
 QualifierKey {
@@ -25,11 +25,11 @@ QualifierKey {
 }
 
 QualifierValue {
-  Freetext | Group
+  freetext | Group
 }
 
-Freetext {
-  (identifier | string | Number) Wildcard?
+freetext {
+  (identifier | string | number) Wildcard?
 }
 
 @tokens {
@@ -37,7 +37,7 @@ Freetext {
 
   string { '"' (!["\\] | "\\" _)* '"' }
 
-  Number { @digit+ }
+  number { @digit+ }
 
   EqualOperator { ":" | "=" }
 
@@ -47,11 +47,11 @@ Freetext {
 
   Wildcard { "*"+ }
 
-  Reserved { "includeEplikt" | "includePreliminary" }
+  reserved { "includeEplikt" | "includePreliminary" }
 
   space { @whitespace+ }
 
-  @precedence {BooleanOperator, Reserved, identifier}
+  @precedence {BooleanOperator, reserved, identifier}
 }
 
 @detectDelim
\ No newline at end of file
diff --git a/packages/codemirror-lang-lxlquery/test/cases.txt b/packages/codemirror-lang-lxlquery/test/cases.txt
index acadf97b8..a4b030d9e 100644
--- a/packages/codemirror-lang-lxlquery/test/cases.txt
+++ b/packages/codemirror-lang-lxlquery/test/cases.txt
@@ -4,7 +4,7 @@ Astrid lindgren
 
 ==>
 
-Query(Freetext, Freetext)
+Query()
 
 
 # Freetext string
@@ -13,7 +13,7 @@ Query(Freetext, Freetext)
 
 ==>
 
-Query(Freetext)
+Query()
 
 
 # Freetext with Wildcard
@@ -22,7 +22,7 @@ Astrid lind*
 
 ==>
 
-Query(Freetext,Freetext(Wildcard))
+Query(Wildcard)
 
 
 # Qualifier with EqualOperator
@@ -31,7 +31,9 @@ Query(Freetext,Freetext(Wildcard))
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # Qualifier with CompareOperator
@@ -42,8 +44,8 @@ Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
 ==>
 
 Query(
-  Qualifier(QualifierKey,CompareOperator,QualifierValue(...))
-  Qualifier(QualifierKey,CompareOperator,QualifierValue(...))
+  Qualifier(QualifierKey,CompareOperator,QualifierValue)
+  Qualifier(QualifierKey,CompareOperator,QualifierValue)
 )
 
 
@@ -53,7 +55,9 @@ Query(
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # Qualifier with string value
@@ -62,7 +66,9 @@ contributor:"Astrid Lindgren"
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # Qualifier linked
@@ -71,7 +77,9 @@ contributor:"libris:fcrtpljz1qp2bdv#it"
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)))
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # BooleanQuery
@@ -80,7 +88,9 @@ sommar OR vinter NOT vår
 
 ==>
 
-Query(BooleanQuery(...))
+Query(
+  BooleanQuery(BooleanOperator,BooleanOperator)
+)
 
 
 # BooleanQuery - erroneous
@@ -89,7 +99,9 @@ OR AND sommar
 
 ==>
 
-Query(⚠(BooleanOperator),⚠(BooleanOperator),Freetext)
+Query(
+  ⚠(BooleanOperator),⚠(BooleanOperator)
+)
 
 
 # Combined: Qualifier and Freetext
@@ -98,7 +110,9 @@ contributor:"Astrid Lindgren" Pippi Långstrump
 
 ==>
 
-Query(Qualifier(QualifierKey,EqualOperator,QualifierValue(...)),Freetext,Freetext)
+Query(
+  Qualifier(QualifierKey,EqualOperator,QualifierValue)
+)
 
 
 # Combined: Freetext BooleanQuery (Qualifier NOT Qualifier)
@@ -107,7 +121,9 @@ träd* bibliografi:"sigel:DST" NOT typ:Text
 
 ==>
 
-Query(Freetext(Wildcard),BooleanQuery(Qualifier(...),BooleanOperator,Qualifier(...)))
+Query(
+  Wildcard,BooleanQuery(Qualifier(...),BooleanOperator,Qualifier(...))
+)
 
 
 # Combined: Freetext Qualifier (Group with BooleanQuery) Qualifier
@@ -116,7 +132,16 @@ pippi långstrump språk:(engelska OR franska) ÅR>2002
 
 ==>
 
-Query(Freetext,Freetext,Qualifier(QualifierKey,EqualOperator,QualifierValue(Group(BooleanQuery(...)))),Qualifier(...))
+Query(
+  Qualifier(
+    QualifierKey,EqualOperator,QualifierValue(
+      Group(
+        BooleanQuery(BooleanOperator)
+      )
+    )
+  ),
+  Qualifier(...)
+)
 
 
 # Other filters: cover image
@@ -134,7 +159,7 @@ Pippi includeEplikt
 
 ==>
 
-Query(Freetext,Qualifier(Reserved))
+Query(Qualifier)
 
 
 # Other filters: include preliminary
@@ -143,4 +168,4 @@ includePreliminary Pippi
 
 ==>
 
-Query(Qualifier(Reserved),Freetext)
\ No newline at end of file
+Query(Qualifier)
\ No newline at end of file
diff --git a/packages/supersearch/src/lib/components/SuperSearch.svelte b/packages/supersearch/src/lib/components/SuperSearch.svelte
index 99e2c24cf..4032dfa1a 100644
--- a/packages/supersearch/src/lib/components/SuperSearch.svelte
+++ b/packages/supersearch/src/lib/components/SuperSearch.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import CodeMirror, { type ChangeCodeMirrorEvent } from '$lib/components/CodeMirror.svelte';
 	import { EditorView, placeholder as placeholderExtension } from '@codemirror/view';
-	import { Compartment } from '@codemirror/state';
+	import { Compartment, type Extension } from '@codemirror/state';
 	import { type LRLanguage } from '@codemirror/language';
 	import submitFormOnEnterKey from '$lib/extensions/submitFormOnEnterKey.js';
 
@@ -11,19 +11,29 @@
 		form?: string;
 		language?: LRLanguage;
 		placeholder?: string;
+		extensions?: Extension[];
 	}
 
-	let { name, value = $bindable(''), form, language, placeholder = '' }: Props = $props();
+	let {
+		name,
+		value = $bindable(''),
+		form,
+		language,
+		extensions,
+		placeholder = ''
+	}: Props = $props();
 
 	let editorView: EditorView | undefined = $state();
 
 	let placeholderCompartment = new Compartment();
 	let prevPlaceholder = placeholder;
 
-	const extensions = [
+	const useExtensions = [
 		submitFormOnEnterKey(form),
 		...(language ? [language] : []),
-		placeholderCompartment.of(placeholderExtension(placeholder))
+		placeholderCompartment.of(placeholderExtension(placeholder)),
+		// compartmentalize rest of extensions?
+		...(extensions ? extensions : [])
 	];
 
 	function handleChangeCodeMirror(event: ChangeCodeMirrorEvent) {
@@ -40,5 +50,5 @@
 	});
 </script>
 
-<CodeMirror {value} {extensions} onchange={handleChangeCodeMirror} bind:editorView />
+<CodeMirror {value} extensions={useExtensions} onchange={handleChangeCodeMirror} bind:editorView />
 <textarea {value} {name} {form} hidden readonly></textarea>