diff --git a/src/components/ChannelPopup.svelte b/src/components/ChannelPopup.svelte
index 7e8afe89a..5c490f886 100644
--- a/src/components/ChannelPopup.svelte
+++ b/src/components/ChannelPopup.svelte
@@ -1,58 +1,23 @@
 <script>
-  import JsonDataViewer from './JsonDataViewer.svelte'
-  import HTMLPreview from './HTMLPreview.svelte'
+  import HTMLPreview from '~/components/HTMLPreview.svelte'
   import { getContext } from 'svelte'
   const { close } = getContext('simple-modal')
 
   export let channel
 
-  let view = 'html'
-  function switchView(value) {
-    view = value
-  }
-
   const closePopup = () => {
     close()
   }
 </script>
 
-<style>
-  .active {
-    background-color: #f3f4f6;
-    color: #111828;
-  }
-</style>
-
-<div class="relative px-2 py-[4rem] flex justify-center" on:click|self="{closePopup}">
-  <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-4xl">
+<div class="relative px-2 py-[4rem] flex justify-center" on:keypress on:click|self="{closePopup}">
+  <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-[820px]">
     <div
       class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
     >
-      <div class="w-1/3 overflow-hidden">
+      <div class="w-2/3 overflow-hidden">
         <h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h3>
       </div>
-      <div class="inline-flex justify-center w-1/3">
-        <div class="inline-flex rounded-md" role="group">
-          <button
-            type="button"
-            area-selected="{view === 'html'}"
-            on:click="{() => switchView('html')}"
-            class:active="{view === 'html'}"
-            class="py-2 px-4 text-xs font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:bg-transparent dark:text-white dark:hover:text-white dark:hover:bg-gray-600"
-          >
-            HTML
-          </button>
-          <button
-            type="button"
-            area-selected="{view === 'html'}"
-            on:click="{() => switchView('json')}"
-            class:active="{view === 'json'}"
-            class="py-2 px-4 text-xs font-medium text-gray-900 bg-white border-t border-b border-r rounded-r-lg border-gray-200 hover:bg-gray-100 dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-600"
-          >
-            JSON
-          </button>
-        </div>
-      </div>
 
       <div class="inline-flex w-1/3 justify-end">
         <button
@@ -76,15 +41,9 @@
       </div>
     </div>
     <div class="overflow-y-scroll overflow-x-hidden w-full">
-      {#if view === 'json'}
-      <div class="pb-8 px-8 pt-6">
-        <div class="flex p-4 bg-gray-50 dark:bg-gray-700 rounded-md w-full">
-          <JsonDataViewer data="{channel._raw}" />
-        </div>
+      <div class="p-12 pt-10">
+        <HTMLPreview data="{channel}" close="{closePopup}" />
       </div>
-      {:else if view === 'html'}
-      <HTMLPreview data="{channel}" close="{closePopup}" />
-      {/if}
     </div>
   </div>
 </div>
diff --git a/src/components/JsonDataViewer.svelte b/src/components/JsonDataViewer.svelte
index f3dbffea1..b438ece78 100644
--- a/src/components/JsonDataViewer.svelte
+++ b/src/components/JsonDataViewer.svelte
@@ -1,80 +1,82 @@
 <script>
-	import { onMount } from 'svelte'
-	import { JsonView } from '@zerodevx/svelte-json-view'
+  import { onMount } from 'svelte'
+  import { JsonView } from '@zerodevx/svelte-json-view'
 
-	export let data
-	let dark = false
+  export let data
+  let dark = false
 
-	let fieldset = []
-	for (let key in data) {
-		if (key.startsWith('_')) continue
-		fieldset.push({
-			name: key,
-			value: data[key]
-		})
-	}
+  let fieldset = []
+  for (let key in data) {
+    if (key.startsWith('_')) continue
+    fieldset.push({
+      name: key,
+      value: data[key]
+    })
+  }
 
-	onMount(() => {
-		if (
-			localStorage.getItem('color-theme') === 'light' ||
-			(!('color-theme' in localStorage) &&
-				window.matchMedia('(prefers-color-scheme: dark)').matches)
-		) {
-			dark = false
-		} else {
-			dark = true
-		}
-	})
+  onMount(() => {
+    if (
+      localStorage.getItem('color-theme') === 'light' ||
+      (!('color-theme' in localStorage) &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      dark = false
+    } else {
+      dark = true
+    }
+  })
 </script>
 
 <style>
-	:global(.value .val),
-	:global(.value .key) {
-		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-			'Courier New', monospace;
-		font-size: 1em;
-	}
+  :global(.value .val),
+  :global(.value .key) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+    font-size: 1em;
+  }
 
-	:global(.dark .value) {
-		--leafDefaultColor: white;
-		--leafStringColor: white;
-		--leafNumberColor: white;
-		--leafBooleanColor: white;
-		--nodeColor: white;
-	}
+  :global(.dark .value) {
+    --leafDefaultColor: white;
+    --leafStringColor: white;
+    --leafNumberColor: white;
+    --leafBooleanColor: white;
+    --jsonValStringColor: white;
+    --nodeColor: white;
+  }
 
-	:global(.value) {
-		--nodeBorderLeft: 1px dotted #9ca3b0;
-		--leafDefaultColor: #525a69;
-		--leafStringColor: #525a69;
-		--leafNumberColor: #525a69;
-		--leafBooleanColor: #525a69;
-		--nodeColor: #525a69;
-	}
+  :global(.value) {
+    --nodeBorderLeft: 1px dotted #9ca3b0;
+    --leafDefaultColor: #525a69;
+    --leafStringColor: #525a69;
+    --leafNumberColor: #525a69;
+    --leafBooleanColor: #525a69;
+    --jsonValStringColor: #525a69;
+    --nodeColor: #525a69;
+  }
 
-	:global(.value .key),
-	:global(.value .comma) {
-		color: #9ca3b0;
-	}
+  :global(.value .key),
+  :global(.value .comma) {
+    color: #9ca3b0;
+  }
 </style>
 
 <table class="table-fixed w-full dark:text-white">
-	<tbody>
-		{#each fieldset as field}
-		<tr>
-			<td
-				class="w-[7rem] md:w-[11rem] px-4 py-1 text-sm text-gray-400 whitespace-nowrap dark:text-gray-400 align-top"
-			>
-				{field.name}
-			</td>
-			<td class="px-4 py-1 text-sm text-gray-600 dark:text-gray-100 align-top value break-words">
-				{#if Array.isArray(field.value) && field.value.length}
-				<JsonView json="{field.value}" />
-				{:else}
-				<code>{JSON.stringify(field.value)}</code>
-				{/if}
-			</td>
-		</tr>
-		{/each}
-	</tbody>
+  <tbody>
+    {#each fieldset as field}
+    <tr>
+      <td
+        class="w-[7rem] md:w-[11rem] px-4 py-1 text-sm text-gray-400 whitespace-nowrap dark:text-gray-400 align-top"
+      >
+        {field.name}
+      </td>
+      <td class="px-4 py-1 text-sm text-gray-600 dark:text-gray-100 align-top value break-words">
+        {#if Array.isArray(field.value) && field.value.length}
+        <JsonView json="{field.value}" />
+        {:else}
+        <code>{JSON.stringify(field.value)}</code>
+        {/if}
+      </td>
+    </tr>
+    {/each}
+  </tbody>
 </table>