diff --git a/package-lock.json b/package-lock.json
index b1f0126..0ae1254 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
 				"postcss": "^8.4.12",
 				"prettier": "^2.8.8",
 				"prettier-plugin-svelte": "^2.10.1",
+				"shiki": "^1.12.1",
 				"svelte": "^3.44.0",
 				"tailwindcss": "^3.0.23",
 				"vite": "^2.9.0"
@@ -267,6 +268,15 @@
 				"node": ">= 8.0.0"
 			}
 		},
+		"node_modules/@shikijs/core": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.12.1.tgz",
+			"integrity": "sha512-biCz/mnkMktImI6hMfMX3H9kOeqsInxWEyCHbSlL8C/2TR1FqfmGxTLRNwYCKsyCyxWLbB8rEqXRVZuyxuLFmA==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.4"
+			}
+		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
 			"version": "1.0.0-next.41",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.41.tgz",
@@ -305,6 +315,15 @@
 				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
 			}
 		},
+		"node_modules/@types/hast": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+			"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/json5": {
 			"version": "0.0.29",
 			"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -317,6 +336,12 @@
 			"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
 			"dev": true
 		},
+		"node_modules/@types/unist": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+			"integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==",
+			"dev": true
+		},
 		"node_modules/@ungap/structured-clone": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -3456,6 +3481,16 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/shiki": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.12.1.tgz",
+			"integrity": "sha512-nwmjbHKnOYYAe1aaQyEBHvQymJgfm86ZSS7fT8OaPRr4sbAcBNz7PbfAikMEFSDQ6se2j2zobkXvVKcBOm0ysg==",
+			"dev": true,
+			"dependencies": {
+				"@shikijs/core": "1.12.1",
+				"@types/hast": "^3.0.4"
+			}
+		},
 		"node_modules/side-channel": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
@@ -4116,6 +4151,15 @@
 				"picomatch": "^2.2.2"
 			}
 		},
+		"@shikijs/core": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.12.1.tgz",
+			"integrity": "sha512-biCz/mnkMktImI6hMfMX3H9kOeqsInxWEyCHbSlL8C/2TR1FqfmGxTLRNwYCKsyCyxWLbB8rEqXRVZuyxuLFmA==",
+			"dev": true,
+			"requires": {
+				"@types/hast": "^3.0.4"
+			}
+		},
 		"@sveltejs/vite-plugin-svelte": {
 			"version": "1.0.0-next.41",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.41.tgz",
@@ -4138,6 +4182,15 @@
 				"mini-svg-data-uri": "^1.2.3"
 			}
 		},
+		"@types/hast": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+			"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+			"dev": true,
+			"requires": {
+				"@types/unist": "*"
+			}
+		},
 		"@types/json5": {
 			"version": "0.0.29",
 			"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -4150,6 +4203,12 @@
 			"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
 			"dev": true
 		},
+		"@types/unist": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+			"integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==",
+			"dev": true
+		},
 		"@ungap/structured-clone": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -6262,6 +6321,16 @@
 			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
 			"dev": true
 		},
+		"shiki": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.12.1.tgz",
+			"integrity": "sha512-nwmjbHKnOYYAe1aaQyEBHvQymJgfm86ZSS7fT8OaPRr4sbAcBNz7PbfAikMEFSDQ6se2j2zobkXvVKcBOm0ysg==",
+			"dev": true,
+			"requires": {
+				"@shikijs/core": "1.12.1",
+				"@types/hast": "^3.0.4"
+			}
+		},
 		"side-channel": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
diff --git a/package.json b/package.json
index 238d08f..0593f65 100644
--- a/package.json
+++ b/package.json
@@ -23,18 +23,16 @@
 		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
 		"@tailwindcss/forms": "^0.5.0",
 		"autoprefixer": "^10.4.4",
-		"postcss": "^8.4.12",
-		"svelte": "^3.44.0",
-		"tailwindcss": "^3.0.23",
-		"vite": "^2.9.0",
 		"eslint": "^8.41.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-import": "^2.27.5",
 		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.12",
 		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.1"
-	},
-	"dependencies": {
-		"svelte-prism": "^1.1.4"
+		"prettier-plugin-svelte": "^2.10.1",
+		"shiki": "^1.12.1",
+		"svelte": "^3.44.0",
+		"tailwindcss": "^3.0.23",
+		"vite": "^2.9.0"
 	}
 }
diff --git a/src/App.svelte b/src/App.svelte
index 648c706..5e21e67 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,11 +1,13 @@
 <script>
 	import { onMount, tick } from 'svelte';
 	import { slide } from 'svelte/transition';
-	import Prism from 'svelte-prism';
 	import makePKCE from './utils/pkce.js';
+	import { createHighlighterCore } from 'shiki';
+	import getWasm from 'shiki/wasm'; //TBD: does not work without importin this
 
 	let readFromLocalStorage = false;
 	let darkMode = false;
+	let highlighter;
 
 	const scopes = {
 		standard: [
@@ -58,7 +60,7 @@
 		'phone',
 		'ethereum',
 		'qrcode',
-		'passkey',
+		'passkey'
 		// 'managed'
 	];
 
@@ -84,7 +86,13 @@
 		}
 	}
 
-	onMount(() => {
+	onMount(async () => {
+		highlighter = await createHighlighterCore({
+			themes: [import('shiki/themes/github-dark.mjs'), import('shiki/themes/github-light.mjs')],
+			langs: [import('shiki/langs/json.mjs'), import('shiki/langs/http.mjs')],
+			loadWasm: getWasm //TBD: does not work without importin this
+		});
+
 		if (!getStatesFromLocalStorage()) {
 			//states not found in local storage, save default states to local storage
 			const _states = JSON.stringify(states);
@@ -716,6 +724,15 @@
 		states.invite_playground_query_param_values.inviter &&
 		result.introspect?.name &&
 		result.introspect?.email;
+
+	const highlight = (lang, content) => {
+		if (!highlighter) return '...';
+		const html = highlighter.codeToHtml(content, {
+			lang,
+			themes: { light: 'github-light', dark: 'github-dark' }
+		});
+		return html;
+	};
 </script>
 
 <svelte:window
@@ -889,26 +906,27 @@
 					class:pointer-events-none={states.protocol_params.includes('scope')}
 				>
 					<div class="space-x-6 inline-flex justify-between items-center">
-						<div class="space-x-2 inline-flex items-center">
+						<button
+							class="inline-flex items-center space-x-2"
+							on:click={() => (states.dropdowns.scopeParam = !states.dropdowns.scopeParam)}
+						>
 							<h1 class="font-semibold text-lg inline-block">Scope Param</h1>
-							<button on:click={() => (states.dropdowns.scopeParam = !states.dropdowns.scopeParam)}>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="3"
-									stroke="currentColor"
-									class="w-4 h-4"
-									class:rotate-180={states.dropdowns.scopeParam}
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="m19.5 8.25-7.5 7.5-7.5-7.5"
-									/>
-								</svg>
-							</button>
-						</div>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="3"
+								stroke="currentColor"
+								class="w-4 h-4"
+								class:rotate-180={states.dropdowns.scopeParam}
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="m19.5 8.25-7.5 7.5-7.5-7.5"
+								/>
+							</svg>
+						</button>
 
 						{#if states.dropdowns.scopeParam}
 							<div class="px-1">
@@ -1006,26 +1024,23 @@
 
 				<!-- Query Params -->
 				<div class="break-inside-avoid-column">
-					<div class="inline-flex items-center space-x-2">
+					<button
+						class="inline-flex items-center space-x-2"
+						on:click={() => (states.dropdowns.queryParams = !states.dropdowns.queryParams)}
+					>
 						<h1 class="font-semibold text-lg inline-block">Query Params</h1>
-						<button on:click={() => (states.dropdowns.queryParams = !states.dropdowns.queryParams)}>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="3"
-								stroke="currentColor"
-								class="w-4 h-4"
-								class:rotate-180={states.dropdowns.queryParams}
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="m19.5 8.25-7.5 7.5-7.5-7.5"
-								/>
-							</svg>
-						</button>
-					</div>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="3"
+							stroke="currentColor"
+							class="w-4 h-4"
+							class:rotate-180={states.dropdowns.queryParams}
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+						</svg>
+					</button>
 					{#if states.dropdowns.queryParams}
 						<ul class="space-y-2 mt-2" transition:slide|local>
 							{#each Object.entries(queryParams.params) as [param, value]}
@@ -1121,28 +1136,23 @@
 
 				<!-- Protocol Params -->
 				<div class="break-inside-avoid-column">
-					<div class="inline-flex items-center space-x-2">
+					<button
+						class="inline-flex items-center space-x-2"
+						on:click={() => (states.dropdowns.protocolParams = !states.dropdowns.protocolParams)}
+					>
 						<h1 class="font-semibold text-lg inline-block">Protocol Params</h1>
-						<button
-							on:click={() => (states.dropdowns.protocolParams = !states.dropdowns.protocolParams)}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="3"
+							stroke="currentColor"
+							class="w-4 h-4"
+							class:rotate-180={states.dropdowns.protocolParams}
 						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="3"
-								stroke="currentColor"
-								class="w-4 h-4"
-								class:rotate-180={states.dropdowns.protocolParams}
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="m19.5 8.25-7.5 7.5-7.5-7.5"
-								/>
-							</svg>
-						</button>
-					</div>
+							<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+						</svg>
+					</button>
 					{#if states.dropdowns.protocolParams}
 						<ul class="space-y-2 mt-2" transition:slide|local>
 							{#each Object.entries(protocolParams.params) as [param, value]}
@@ -1274,26 +1284,23 @@
 
 				<!-- Authorization Server -->
 				<div class="break-inside-avoid-column">
-					<div class="inline-flex items-center space-x-2">
+					<button
+						class="inline-flex items-center space-x-2"
+						on:click={() => (states.dropdowns.authzServer = !states.dropdowns.authzServer)}
+					>
 						<h1 class="font-semibold text-lg">Authorization Server</h1>
-						<button on:click={() => (states.dropdowns.authzServer = !states.dropdowns.authzServer)}>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="3"
-								stroke="currentColor"
-								class="w-4 h-4"
-								class:rotate-180={states.dropdowns.authzServer}
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="m19.5 8.25-7.5 7.5-7.5-7.5"
-								/>
-							</svg>
-						</button>
-					</div>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="3"
+							stroke="currentColor"
+							class="w-4 h-4"
+							class:rotate-180={states.dropdowns.authzServer}
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+						</svg>
+					</button>
 
 					{#if states.dropdowns.authzServer}
 						<ul class="space-y-2 mt-2" transition:slide|local>
@@ -1348,26 +1355,27 @@
 				<!-- Request URL -->
 				<div class="break-inside-avoid-column">
 					<div class="flex items-center">
-						<div class="inline-flex items-center space-x-2">
+						<button
+							class="inline-flex items-center space-x-2"
+							on:click={() => (states.dropdowns.requestURL = !states.dropdowns.requestURL)}
+						>
 							<h1 class="font-semibold text-lg">Request URL</h1>
-							<button on:click={() => (states.dropdowns.requestURL = !states.dropdowns.requestURL)}>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="3"
-									stroke="currentColor"
-									class="w-4 h-4"
-									class:rotate-180={states.dropdowns.requestURL}
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="m19.5 8.25-7.5 7.5-7.5-7.5"
-									/>
-								</svg>
-							</button>
-						</div>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="3"
+								stroke="currentColor"
+								class="w-4 h-4"
+								class:rotate-180={states.dropdowns.requestURL}
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="m19.5 8.25-7.5 7.5-7.5-7.5"
+								/>
+							</svg>
+						</button>
 					</div>
 					{#if states.dropdowns.requestURL}
 						<div
@@ -1392,19 +1400,23 @@
 									/>
 								</svg>
 							</button>
-							<span class="block text-sm whitespace-pre-line" class:flash={copyTooltip.requestURL}>
-								{requestURL}
+							<span
+								id="request-url-container"
+								class="block text-sm whitespace-pre-line"
+								class:flash={copyTooltip.requestURL}
+							>
+								{@html highlight('http', requestURL)}
 							</span>
 						</div>
-
-						<button
-							on:click={continueWithHello}
-							class="hello-btn-black-and-static w-full flex mt-4"
-							class:hello-btn-loader={continueWithHelloAjax}
-							disabled={continueWithHelloAjax}
-							class:hello-btn-hover-flare={darkMode}>ō&nbsp;&nbsp;&nbsp;Continue with Hellō</button
-						>
 					{/if}
+
+					<button
+						on:click={continueWithHello}
+						class="hello-btn-black-and-static w-full flex mt-4"
+						class:hello-btn-loader={continueWithHelloAjax}
+						disabled={continueWithHelloAjax}
+						class:hello-btn-hover-flare={darkMode}>ō&nbsp;&nbsp;&nbsp;Continue with Hellō</button
+					>
 				</div>
 			</div>
 		</section>
@@ -1469,7 +1481,7 @@
 
 						{#if dropdown.authorize}
 							<p class="p-4 break-words">
-								<span class:flash={copyTooltip.authorize}>{result.authorize}</span>
+								<span class:flash={copyTooltip.authorize} class="text-sm">{result.authorize}</span>
 							</p>
 						{/if}
 					</section>
@@ -1521,10 +1533,8 @@
 								</svg>
 							</button>
 							{#if dropdown.token}
-								<span class:flash={copyTooltip.token}>
-									<Prism language="javascript">
-										{JSON.stringify(result.token, null, 2)}
-									</Prism>
+								<span class:flash={copyTooltip.token} class="text-sm json-container">
+									{@html highlight('json', JSON.stringify(result.token, null, 2))}
 								</span>
 							{/if}
 						</section>
@@ -1577,10 +1587,8 @@
 								</svg>
 							</button>
 							{#if dropdown.userinfo}
-								<span class:flash={copyTooltip.userinfo}>
-									<Prism language="javascript">
-										{JSON.stringify(result.userinfo, null, 2)}
-									</Prism>
+								<span class:flash={copyTooltip.userinfo} class="text-sm json-container">
+									{@html highlight('json', JSON.stringify(result.userinfo, null, 2))}
 								</span>
 							{/if}
 						</section>
@@ -1633,10 +1641,8 @@
 								</svg>
 							</button>
 							{#if dropdown.introspect}
-								<span class:flash={copyTooltip.introspect}>
-									<Prism language="javascript">
-										{JSON.stringify(result.introspect, null, 2)}
-									</Prism>
+								<span class:flash={copyTooltip.introspect} class="text-sm json-container">
+									{@html highlight('json', JSON.stringify(result.introspect, null, 2))}
 								</span>
 							{/if}
 						</section>
@@ -1898,6 +1904,23 @@
 </main>
 
 <style>
+	@media (prefers-color-scheme: dark) {
+		:global(.shiki),
+		:global(.shiki span) {
+			color: var(--shiki-dark) !important;
+			background-color: var(--shiki-dark-bg) !important;
+		}
+	}
+
+	:global(.json-container pre) {
+		padding: 14px;
+		overflow-x: auto;
+	}
+
+	:global(#request-url-container pre) {
+		background-color: transparent !important;
+	}
+
 	.nav-link:hover::after {
 		width: 100%;
 		content: ' ';