diff --git a/static/koboldai.css b/static/koboldai.css
index 166eb3a9..688e185e 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -1867,16 +1867,21 @@ body {
 	font-family: monospace;
 }
 
-.context-block:hover {
+.context-token {
+	/* Tooltip tries to make this inline-block. No!!!! */
+	display: inline !important;
+}
+
+.context-token:hover {
 	outline: 1px solid gray;
 }
 
-.context-sp {background-color: var(--context_colors_soft_prompt);}
-.context-prompt {background-color: var(--context_colors_prompt);}
-.context-wi {background-color: var(--context_colors_world_info);}
-.context-memory {background-color: var(--context_colors_memory);}
-.context-an {background-color: var(--context_colors_authors_notes);}
-.context-action {background-color: var(--context_colors_game_text);}
+.context-sp > .context-token {background-color: var(--context_colors_soft_prompt);}
+.context-prompt > .context-token {background-color: var(--context_colors_prompt);}
+.context-wi > .context-token {background-color: var(--context_colors_world_info);}
+.context-memory > .context-token {background-color: var(--context_colors_memory);}
+.context-an > .context-token {background-color: var(--context_colors_authors_notes);}
+.context-action > .context-token {background-color: var(--context_colors_game_text);}
 
 /* File Drag Indicator */
 #file-upload-notice {
@@ -2544,30 +2549,33 @@ input[type='range'] {
 
 /*Tooltip based on attribute*/
 [tooltip] {
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-  position: relative;
+	cursor: pointer;
+	display: inline-block;
+	line-height: 1;
+	position: relative;
 }
+
 [tooltip]::after {
-  background-color: rgba(51, 51, 51, 0.9);
-  border-radius: 0.3rem;
-  color: #fff;
-  content: attr(tooltip);
-  font-size: 1rem;
-  font-size: 85%;
-  font-weight: normal;
-  line-height: 1.15rem;
-  opacity: 0;
-  padding: 0.25rem 0.5rem;
-  position: absolute;
-  text-align: center;
-  text-transform: none;
-  transition: opacity 0.2s;
-  visibility: hidden;
-  white-space: nowrap;
-  z-index: 1;
+	background-color: rgba(51, 51, 51, 0.9);
+	border-radius: 0.3rem;
+	color: #fff;
+	content: attr(tooltip);
+	font-size: 1rem;
+	font-size: 85%;
+	font-weight: normal;
+	line-height: 1.15rem;
+	opacity: 0;
+	padding: 0.25rem 0.5rem;
+	position: absolute;
+	text-align: center;
+	text-transform: none;
+	transition: opacity 0.2s;
+	visibility: hidden;
+	white-space: nowrap;
+	z-index: 9999;
+	pointer-events: none;
 }
+
 @media (max-width: 767px) {
   [tooltip].tooltip::before {
     display: none;
diff --git a/static/koboldai.js b/static/koboldai.js
index 70059876..3ab0ce6b 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -2883,13 +2883,31 @@ function update_context(data) {
 			action: "action"
 		}[entry.type]);
 
-		let el = document.createElement("span");
-		el.classList.add("context-block");
-		el.classList.add(contextClass);
-		el.innerText = entry.text;
+		let el = $e(
+			"span",
+			$el("#context-container"),
+			{classes: ["context-block", contextClass]}
+		);
+		//el.innerText = entry.text;
 
-		el.innerHTML = el.innerHTML.replaceAll("<br>", '<span class="material-icons-outlined context-symbol">keyboard_return</span>');
+		let encodedChunk = encode(entry.text);
 
+		for (const token of encodedChunk) {
+			// let bright = 1 - ((token / vocab_size) * 0.4);
+			//let hue = ((token / vocab_size) - 0.5) * 20
+			let bright = 0.8 + (Math.random() * 0.2);
+			let hue = Math.random() * 20;
+
+			let tokenEl = $e("span", el, {
+				classes: ["context-token"],
+				"token-id": token,
+				"tooltip": token,
+				innerText: decode([token]),
+				"style.filter": `brightness(${bright}) hue-rotate(${hue}deg)`
+			});
+
+			tokenEl.innerHTML = tokenEl.innerHTML.replaceAll("<br>", '<span class="material-icons-outlined context-symbol">keyboard_return</span>');
+		}
 		document.getElementById("context-container").appendChild(el);
 	}
 
diff --git a/static/tokenizer.js b/static/tokenizer.js
index 622f5ab6..f7feeaa7 100644
--- a/static/tokenizer.js
+++ b/static/tokenizer.js
@@ -1,6 +1,9 @@
 import encoder from "./encoder.js";
 import bpe_file from "./vocab.bpe.js"; 
 
+// Assumes tokens are in order!!!
+export const vocab_size = Math.max(...Object.values(encoder));
+
 const range = (x, y) => {
   const res = Array.from(Array(y).keys()).slice(x)
   return res
diff --git a/templates/index_new.html b/templates/index_new.html
index bbfd1b87..09e23aef 100644
--- a/templates/index_new.html
+++ b/templates/index_new.html
@@ -9,7 +9,7 @@
 		//	debug_info.push({msg: message, url: url, line: line});
 		});
 	</script>
-	<script type="module">import {encode, decode} from "./static/tokenizer.js";window.encode = encode;window.decode = decode;</script>
+	<script type="module">import {vocab_size, encode, decode} from "./static/tokenizer.js";window.encode = encode;window.decode = decode;window.vocab_size = vocab_size;</script>
 	<link href="static/open-iconic/css/open-iconic.css" rel="stylesheet">
 	<link rel="stylesheet" href="static/bootstrap-toggle.min.css">
 	<link rel="stylesheet" href="static/bootstrap.min.css">