diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index ffc05ef0a..88b826d9b 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -1,151 +1,157 @@
 <script>
-	import { getContext } from 'svelte'
-	import StreamsPopup from './StreamsPopup.svelte'
-	import GuidesPopup from './GuidesPopup.svelte'
-	import ChannelPopup from './ChannelPopup.svelte'
-	import { search, query, hasQuery, setSearchParam } from '../store.js'
+  import { getContext } from 'svelte'
+  import StreamsPopup from './StreamsPopup.svelte'
+  import GuidesPopup from './GuidesPopup.svelte'
+  import ChannelPopup from './ChannelPopup.svelte'
+  import { search, query, hasQuery, setSearchParam } from '../store.js'
 
-	export let channel
+  export let channel
 
-	const guides = channel._guides
-	const streams = channel._streams
+  const guides = channel._guides
+  const streams = channel._streams
 
-	const { open } = getContext('simple-modal')
-	const showGuides = () =>
-		open(
-			GuidesPopup,
-			{ guides, title: channel.name },
-			{ transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } }
-		)
-	const showStreams = () =>
-		open(
-			StreamsPopup,
-			{ streams, title: channel.name },
-			{ transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } }
-		)
-	const showChannelData = () => {
-		open(
-			ChannelPopup,
-			{ channel },
-			{ transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } }
-		)
-	}
+  const currLocation = window.location.href
+  const { open } = getContext('simple-modal')
+  const onOpened = () => {
+    window.history.pushState({}, `${channel.name} • iptv-org`, `/channel?id=${channel.id}`)
+  }
+  const onClosed = () => {
+    window.history.pushState({}, `iptv-org`, currLocation)
+  }
+  const showGuides = () =>
+    open(
+      GuidesPopup,
+      { guides, title: channel.name },
+      { transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } }
+    )
+  const showStreams = () =>
+    open(
+      StreamsPopup,
+      { streams, title: channel.name },
+      { transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } }
+    )
+  const showChannelData = () => {
+    open(
+      ChannelPopup,
+      { channel },
+      { transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } },
+      { onOpened, onClosed }
+    )
+  }
 
-	function pluralize(number, word) {
-		return number > 1 ? word + 's' : word
-	}
+  function pluralize(number, word) {
+    return number > 1 ? word + 's' : word
+  }
 
-	function searchBy(q) {
-		if ($query !== q) {
-			query.set(q)
-			hasQuery.set(true)
-			search(q)
-			setSearchParam('q', q)
-		}
-		close()
-	}
+  function searchBy(q) {
+    if ($query !== q) {
+      query.set(q)
+      hasQuery.set(true)
+      search(q)
+      setSearchParam('q', q)
+    }
+    close()
+  }
 </script>
 
 <tr
-	class="border-b last:border-b-0 border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-700 h-16"
+  class="border-b last:border-b-0 border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-700 h-16"
 >
-	<td class="pl-2 pr-4 md:pr-7 py-2">
-		<div class="inline-flex w-full align-middle justify-center whitespace-nowrap overflow-hidden">
-			{#if channel.logo}
-			<img
-				class="block align-middle mx-auto max-w-[6rem] max-h-[3rem] text-sm text-gray-400 dark:text-gray-600 cursor-default"
-				loading="lazy"
-				referrerpolicy="no-referrer"
-				src="{channel.logo}"
-				alt="{channel.name}"
-			/>
-			{/if}
-		</div>
-	</td>
-	<td class="pl-3 pr-2 py-2">
-		<div>
-			<div class="text-left">
-				<a
-					on:click|preventDefault="{showChannelData}"
-					href="/"
-					rel="nofollow"
-					role="button"
-					tabindex="0"
-					class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500"
-				>
-					{channel.name}
-				</a>
-				{#if channel._searchable.is === 'closed'}
-				<div
-					class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full"
-					title="closed: {channel.closed}"
-				>
-					Closed
-				</div>
-				{/if} {#if channel.alt_names.length}
-				<div class="text-sm text-gray-400 dark:text-gray-400">{channel.alt_names.join(', ')}</div>
-				{/if}
-			</div>
-		</div>
-	</td>
-	<td class="px-2 py-2">
-		<div>
-			<code
-				class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono"
-				>{channel.id}</code
-			>
-		</div>
-	</td>
-	<td class="pl-2 pr-5 py-2">
-		<div class="text-right flex justify-end space-x-3 items-center">
-			{#if guides.length}
-			<button
-				on:click="{showGuides}"
-				class="text-sm text-gray-500 dark:text-gray-100 inline-flex space-x-1 flex items-center hover:text-blue-500 dark:hover:text-blue-400"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-					class="w-5 h-5"
-				>
-					<path
-						d="M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z"
-					/>
-					<path
-						fill-rule="evenodd"
-						d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
-						clip-rule="evenodd"
-					/>
-				</svg>
+  <td class="pl-2 pr-4 md:pr-7 py-2">
+    <div class="inline-flex w-full align-middle justify-center whitespace-nowrap overflow-hidden">
+      {#if channel.logo}
+      <img
+        class="block align-middle mx-auto max-w-[6rem] max-h-[3rem] text-sm text-gray-400 dark:text-gray-600 cursor-default"
+        loading="lazy"
+        referrerpolicy="no-referrer"
+        src="{channel.logo}"
+        alt="{channel.name}"
+      />
+      {/if}
+    </div>
+  </td>
+  <td class="pl-3 pr-2 py-2">
+    <div>
+      <div class="text-left">
+        <a
+          on:click|preventDefault="{showChannelData}"
+          href="/channel?id={channel.id}"
+          tabindex="0"
+          class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500"
+        >
+          {channel.name}
+        </a>
+        {#if channel._searchable.is === 'closed'}
+        <div
+          class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full"
+          title="closed: {channel.closed}"
+        >
+          Closed
+        </div>
+        {/if} {#if channel.alt_names.length}
+        <div class="text-sm text-gray-400 dark:text-gray-400">{channel.alt_names.join(', ')}</div>
+        {/if}
+      </div>
+    </div>
+  </td>
+  <td class="px-2 py-2">
+    <div>
+      <code
+        class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono"
+        >{channel.id}</code
+      >
+    </div>
+  </td>
+  <td class="pl-2 pr-5 py-2">
+    <div class="text-right flex justify-end space-x-3 items-center">
+      {#if guides.length}
+      <button
+        on:click="{showGuides}"
+        class="text-sm text-gray-500 dark:text-gray-100 inline-flex space-x-1 flex items-center hover:text-blue-500 dark:hover:text-blue-400"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="w-5 h-5"
+        >
+          <path
+            d="M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z"
+          />
+          <path
+            fill-rule="evenodd"
+            d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
+            clip-rule="evenodd"
+          />
+        </svg>
 
-				<div>{guides.length}</div>
-				<div>{pluralize(guides.length, 'guide')}</div>
-			</button>
-			{/if}{#if streams.length}
-			<button
-				on:click="{showStreams}"
-				class="text-sm text-gray-500 dark:text-gray-100 inline-flex space-x-1 flex items-center hover:text-blue-500 dark:hover:text-blue-400"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-5 w-5"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-					stroke-width="2"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"
-					/>
-				</svg>
+        <div>{guides.length}</div>
+        <div>{pluralize(guides.length, 'guide')}</div>
+      </button>
+      {/if}{#if streams.length}
+      <button
+        on:click="{showStreams}"
+        class="text-sm text-gray-500 dark:text-gray-100 inline-flex space-x-1 flex items-center hover:text-blue-500 dark:hover:text-blue-400"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"
+          />
+        </svg>
 
-				<div>{streams.length}</div>
-				<div>{pluralize(streams.length, 'stream')}</div>
-			</button>
-			{/if}
-		</div>
-	</td>
+        <div>{streams.length}</div>
+        <div>{pluralize(streams.length, 'stream')}</div>
+      </button>
+      {/if}
+    </div>
+  </td>
 </tr>
diff --git a/src/components/HTMLPreview.svelte b/src/components/HTMLPreview.svelte
index 62b695232..06cfd804f 100644
--- a/src/components/HTMLPreview.svelte
+++ b/src/components/HTMLPreview.svelte
@@ -1,168 +1,163 @@
 <script>
-	import dayjs from 'dayjs'
-	import { search, query, hasQuery, channels, setSearchParam } from '../store.js'
+  import dayjs from 'dayjs'
+  import { goto } from '$app/navigation'
+  import { search, query, hasQuery, channels, setSearchParam } from '~/store'
 
-	export let data
-	export let close
+  export let data
+  export let close
 
-	let replaced_by = null
-	if (data.replaced_by) {
-		const channel = $channels.find(c => c.id === data.replaced_by)
-		if (channel) replaced_by = channel.name
-	}
+  let replaced_by = null
+  if (data.replaced_by) {
+    const channel = $channels.find(c => c.id === data.replaced_by)
+    if (channel) replaced_by = channel.name
+  }
 
-	const fieldset = [
-		{ name: 'logo', type: 'image', value: data.logo },
-		{ name: 'id', type: 'string', value: data.id },
-		{ name: 'name', type: 'string', value: data.name },
-		{ name: 'alt_names', type: 'string', value: data.alt_names.join(', ') },
-		{
-			name: 'network',
-			type: 'link',
-			value: data.network ? { label: data.network, query: `network:${norm(data.network)}` } : null
-		},
-		{
-			name: 'owners',
-			type: 'link[]',
-			value: data.owners.map(value => ({ label: value, query: `owners:${norm(value)}` }))
-		},
-		{
-			name: 'country',
-			type: 'link',
-			value: { label: data._country.name, query: `country:${data._country.code}` }
-		},
-		{
-			name: 'subdivision',
-			type: 'link',
-			value: data._subdivision
-				? { label: data._subdivision.name, query: `subdivision:${data._subdivision.code}` }
-				: null
-		},
-		{
-			name: 'city',
-			type: 'link',
-			value: data.city ? { label: data.city, query: `city:${norm(data.city)}` } : null
-		},
-		{
-			name: 'broadcast_area',
-			type: 'link[]',
-			value: data._broadcast_area.map(v => ({
-				label: v.name,
-				query: `broadcast_area:${v.type}/${v.code}`
-			}))
-		},
-		{
-			name: 'languages',
-			type: 'link[]',
-			value: data._languages.map(v => ({ label: v.name, query: `languages:${v.code}` }))
-		},
-		{
-			name: 'categories',
-			type: 'link[]',
-			value: data._categories.map(v => ({ label: v.name, query: `categories:${v.id}` }))
-		},
-		{
-			name: 'is_nsfw',
-			type: 'link',
-			value: { label: data.is_nsfw.toString(), query: `is_nsfw:${data.is_nsfw.toString()}` }
-		},
-		{
-			name: 'launched',
-			type: 'date',
-			value: data.launched ? dayjs(data.launched).format('D MMMM YYYY') : null
-		},
-		{
-			name: 'closed',
-			type: 'date',
-			value: data.closed ? dayjs(data.closed).format('D MMMM YYYY') : null
-		},
-		{ name: 'replaced_by', type: 'channel', value: replaced_by },
-		{ name: 'website', type: 'external_link', value: data.website }
-	].filter(f => (Array.isArray(f.value) ? f.value.length : f.value))
+  const fieldset = [
+    { name: 'logo', type: 'image', value: data.logo },
+    { name: 'id', type: 'string', value: data.id },
+    { name: 'name', type: 'string', value: data.name },
+    { name: 'alt_names', type: 'string', value: data.alt_names.join(', ') },
+    {
+      name: 'network',
+      type: 'link',
+      value: data.network ? { label: data.network, query: `network:${norm(data.network)}` } : null
+    },
+    {
+      name: 'owners',
+      type: 'link[]',
+      value: data.owners.map(value => ({ label: value, query: `owners:${norm(value)}` }))
+    },
+    {
+      name: 'country',
+      type: 'link',
+      value: { label: data._country.name, query: `country:${data._country.code}` }
+    },
+    {
+      name: 'subdivision',
+      type: 'link',
+      value: data._subdivision
+        ? { label: data._subdivision.name, query: `subdivision:${data._subdivision.code}` }
+        : null
+    },
+    {
+      name: 'city',
+      type: 'link',
+      value: data.city ? { label: data.city, query: `city:${norm(data.city)}` } : null
+    },
+    {
+      name: 'broadcast_area',
+      type: 'link[]',
+      value: data._broadcast_area.map(v => ({
+        label: v.name,
+        query: `broadcast_area:${v.type}/${v.code}`
+      }))
+    },
+    {
+      name: 'languages',
+      type: 'link[]',
+      value: data._languages.map(v => ({ label: v.name, query: `languages:${v.code}` }))
+    },
+    {
+      name: 'categories',
+      type: 'link[]',
+      value: data._categories.map(v => ({ label: v.name, query: `categories:${v.id}` }))
+    },
+    {
+      name: 'is_nsfw',
+      type: 'link',
+      value: { label: data.is_nsfw.toString(), query: `is_nsfw:${data.is_nsfw.toString()}` }
+    },
+    {
+      name: 'launched',
+      type: 'date',
+      value: data.launched ? dayjs(data.launched).format('D MMMM YYYY') : null
+    },
+    {
+      name: 'closed',
+      type: 'date',
+      value: data.closed ? dayjs(data.closed).format('D MMMM YYYY') : null
+    },
+    { name: 'replaced_by', type: 'channel', value: replaced_by },
+    { name: 'website', type: 'external_link', value: data.website }
+  ].filter(f => (Array.isArray(f.value) ? f.value.length : f.value))
 
-	function norm(value) {
-		return value.includes(' ') ? `"${value}"` : value
-	}
+  function norm(value) {
+    return value.includes(' ') ? `"${value}"` : value
+  }
 
-	function searchBy(q) {
-		if ($query !== q) {
-			query.set(q)
-			hasQuery.set(true)
-			search(q)
-			setSearchParam('q', q)
-		}
-		close()
-	}
+  function searchBy(q) {
+    if ($query !== q) {
+      query.set(q)
+      hasQuery.set(true)
+      setTimeout(() => {
+        goto('/')
+      }, 0)
+    }
+    close()
+  }
 </script>
 
-<div class="pb-8 px-8 pt-6 dark:text-white">
-	<div class="flex p-4 w-full">
-		<table class="table-fixed w-full">
-			<tbody>
-				{#each fieldset as field}
-				<tr>
-					<td class="align-top w-[11rem]">
-						<div class="flex px-4 py-1 text-sm text-gray-400 whitespace-nowrap dark:text-gray-400">
-							{field.name}
-						</div>
-					</td>
-					<td class="align-top">
-						<div class="flex px-4 py-1 text-sm text-gray-700 dark:text-gray-100 flex-wrap">
-							{#if field.type === 'image'}
-							<img
-								src="{field.value}"
-								alt="{field.name}"
-								loading="lazy"
-								referrerpolicy="no-referrer"
-								class="border rounded-sm overflow-hidden border-gray-200 bg-[#e6e6e6]"
-							/>
-							{:else if field.type === 'link'}
-							<button
-								on:click="{() => searchBy(field.value.query)}"
-								class="underline hover:text-blue-500"
-							>
-								{field.value.label}
-							</button>
-							{:else if field.type === 'link[]'} {#each field.value as value, i} {#if i > 0}<span
-								>,&nbsp;
-							</span>
-							{/if}
-							<button
-								on:click="{() => searchBy(value.query)}"
-								class="underline hover:text-blue-500"
-							>
-								{value.label}
-							</button>
-							{/each} {:else if field.type === 'external_link'}
-							<a
-								href="{field.value}"
-								class="underline hover:text-blue-500 inline-flex align-middle"
-								target="_blank"
-								rel="noopener noreferrer"
-								>{field.value}<span
-									class="inline-flex items-center pl-1 text-sm font-semibold text-gray-400 rounded-full"
-								>
-									<svg
-										class="w-4 h-4"
-										fill="none"
-										stroke="currentColor"
-										viewBox="0 0 24 24"
-										xmlns="http://www.w3.org/2000/svg"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-										></path>
-									</svg> </span
-							></a>
-							{:else} {field.value} {/if}
-						</div>
-					</td>
-				</tr>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-</div>
+<table class="table-fixed w-full">
+  <tbody>
+    {#each fieldset as field}
+    <tr>
+      <td class="align-top w-[11rem]">
+        <div class="flex pr-4 py-1 text-sm text-gray-400 whitespace-nowrap dark:text-gray-400">
+          {field.name}
+        </div>
+      </td>
+      <td class="align-top">
+        <div class="flex py-1 text-sm text-gray-700 dark:text-gray-100 flex-wrap">
+          {#if field.type === 'image'}
+          <img
+            src="{field.value}"
+            alt="{field.name}"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            class="border rounded-sm overflow-hidden border-gray-200 bg-[#e6e6e6]"
+          />
+          {:else if field.type === 'link'}
+          <button
+            on:click="{() => searchBy(field.value.query)}"
+            class="underline hover:text-blue-500"
+          >
+            {field.value.label}
+          </button>
+          {:else if field.type === 'link[]'} {#each field.value as value, i} {#if i > 0}<span
+            >,&nbsp;
+          </span>
+          {/if}
+          <button on:click="{() => searchBy(value.query)}" class="underline hover:text-blue-500">
+            {value.label}
+          </button>
+          {/each} {:else if field.type === 'external_link'}
+          <a
+            href="{field.value}"
+            class="underline hover:text-blue-500 inline-flex align-middle"
+            target="_blank"
+            rel="noopener noreferrer"
+            >{field.value}<span
+              class="inline-flex items-center pl-1 text-sm font-semibold text-gray-400 rounded-full"
+            >
+              <svg
+                class="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                ></path>
+              </svg> </span
+          ></a>
+          {:else} {field.value} {/if}
+        </div>
+      </td>
+    </tr>
+    {/each}
+  </tbody>
+</table>
diff --git a/src/components/SearchFieldMini.svelte b/src/components/SearchFieldMini.svelte
index 7ade49365..6902cdad6 100644
--- a/src/components/SearchFieldMini.svelte
+++ b/src/components/SearchFieldMini.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { query, search, setSearchParam } from '../store.js'
+  import { query, search, setSearchParam } from '~/store'
+  import { goto } from '$app/navigation'
 
   function onSubmit() {
-    setSearchParam('q', $query)
-    search($query)
+    goto('/')
   }
 </script>
 
diff --git a/src/pages/+layout.svelte b/src/pages/+layout.svelte
index 3e917ceea..645cf33f1 100644
--- a/src/pages/+layout.svelte
+++ b/src/pages/+layout.svelte
@@ -1,12 +1,7 @@
 <script>
   import '~/app.css'
-  import NavBar from '~/components/NavBar.svelte'
-  import Modal from 'svelte-simple-modal'
-
-  let scrollTop = 0
 </script>
 
-<svelte:window bind:scrollY="{scrollTop}" />
 <svelte:head>
   <script>
     if (document) {
@@ -22,20 +17,4 @@
   </script>
 </svelte:head>
 
-<header
-  class:absolute="{scrollTop <= 150}"
-  class:fixed="{scrollTop > 150}"
-  class="z-40 w-full min-w-[360px]"
-  style="top: {scrollTop > 150 && scrollTop <= 210 ? scrollTop-210: 0}px"
->
-  <NavBar withSearch="{scrollTop > 150}" />
-</header>
-
-<main class="bg-slate-50 dark:bg-[#1d232e] min-h-screen pt-10 min-w-[360px]">
-  <Modal
-    unstyled="{true}"
-    classBg="fixed top-0 left-0 z-40 w-screen h-screen flex flex-col bg-black/[.7] overflow-y-scroll"
-    closeButton="{false}"
-    ><slot
-  /></Modal>
-</main>
+<slot />
diff --git a/src/pages/+page.svelte b/src/pages/+page.svelte
index 6ff60ae7e..18b2dea34 100644
--- a/src/pages/+page.svelte
+++ b/src/pages/+page.svelte
@@ -1,7 +1,11 @@
 <script>
+  import NavBar from '~/components/NavBar.svelte'
+  import Modal from 'svelte-simple-modal'
+  import { page } from '$app/stores'
   import InfiniteLoading from 'svelte-infinite-loading'
   import {
     fetchChannels,
+    channels,
     hasQuery,
     countries,
     filteredChannels,
@@ -14,6 +18,7 @@
   import CountryItem from '~/components/CountryItem.svelte'
   import SearchField from '~/components/SearchField.svelte'
   import _ from 'lodash'
+  import { afterNavigate } from '$app/navigation'
 
   let _countries = []
   const initLimit = 10
@@ -52,7 +57,9 @@
       hasQuery.set(true)
     }
 
-    await fetchChannels()
+    if (!$channels.length) {
+      await fetchChannels()
+    }
     _countries = Object.values($countries)
     isLoading = false
 
@@ -73,34 +80,62 @@
       }
     }
   })
+
+  afterNavigate(() => {
+    setSearchParam('q', $query)
+    search($query)
+  })
+
+  let scrollTop = 0
 </script>
 
+<svelte:window bind:scrollY="{scrollTop}" />
 <svelte:head>
   <title>iptv-org</title>
   <meta name="description" content="Collection of resources dedicated to IPTV" />
 </svelte:head>
 
-<section class="container max-w-5xl mx-auto px-2 py-20">
-  <SearchField bind:isLoading="{isLoading}" bind:found="{$filteredChannels.length}"></SearchField>
-  {#if isLoading}
-  <div
-    class="flex items-center justify-center w-full pt-1 pb-6 tracking-tight text-sm text-gray-500 dark:text-gray-400 font-mono"
+<header
+  class:absolute="{scrollTop <= 150}"
+  class:fixed="{scrollTop > 150}"
+  class="z-40 w-full min-w-[360px]"
+  style="top: {scrollTop > 150 && scrollTop <= 210 ? scrollTop-210: 0}px"
+>
+  <NavBar withSearch="{scrollTop > 150}" />
+</header>
+
+<main class="bg-slate-50 dark:bg-[#1d232e] min-h-screen pt-10 min-w-[360px]">
+  <Modal
+    unstyled="{true}"
+    classBg="fixed top-0 left-0 z-40 w-screen h-screen flex flex-col bg-black/[.7] overflow-y-scroll"
+    closeButton="{false}"
   >
-    loading...
-  </div>
-  {/if} {#each visible as country (country.code)} {#if grouped[country.code] &&
-  grouped[country.code].length > 0}
-  <CountryItem
-    bind:country="{country}"
-    bind:channels="{grouped[country.code]}"
-    bind:hasQuery="{$hasQuery}"
-  ></CountryItem>
-  {/if} {/each} {#if !isLoading}
-  <InfiniteLoading on:infinite="{loadMore}" identifier="{infiniteId}" distance="{500}">
-    <div slot="noResults"></div>
-    <div slot="noMore"></div>
-    <div slot="error"></div>
-    <div slot="spinner"></div>
-  </InfiniteLoading>
-  {/if}
-</section>
+    <section class="container max-w-5xl mx-auto px-2 py-20">
+      <SearchField
+        bind:isLoading="{isLoading}"
+        bind:found="{$filteredChannels.length}"
+      ></SearchField>
+      {#if isLoading}
+      <div
+        class="flex items-center justify-center w-full pt-1 pb-6 tracking-tight text-sm text-gray-500 dark:text-gray-400 font-mono"
+      >
+        loading...
+      </div>
+      {/if} {#each visible as country (country.code)} {#if grouped[country.code] &&
+      grouped[country.code].length > 0}
+      <CountryItem
+        bind:country="{country}"
+        bind:channels="{grouped[country.code]}"
+        bind:hasQuery="{$hasQuery}"
+      ></CountryItem>
+      {/if} {/each} {#if !isLoading}
+      <InfiniteLoading on:infinite="{loadMore}" identifier="{infiniteId}" distance="{500}">
+        <div slot="noResults"></div>
+        <div slot="noMore"></div>
+        <div slot="error"></div>
+        <div slot="spinner"></div>
+      </InfiniteLoading>
+      {/if}
+    </section>
+  </Modal>
+</main>
diff --git a/src/pages/channel/+page.svelte b/src/pages/channel/+page.svelte
new file mode 100644
index 000000000..6064440f8
--- /dev/null
+++ b/src/pages/channel/+page.svelte
@@ -0,0 +1,94 @@
+<script>
+  import GuideItem from '~/components/GuideItem.svelte'
+  import StreamItem from '~/components/StreamItem.svelte'
+  import HTMLPreview from '~/components/HTMLPreview.svelte'
+  import NavBar from '~/components/NavBar.svelte'
+  import { onMount } from 'svelte'
+  import { fetchChannels, channels } from '~/store'
+  import { page } from '$app/stores'
+
+  let channel
+  let isLoading = true
+  let streams = []
+  let guides = []
+
+  onMount(async () => {
+    const id = $page.url.searchParams.get('id')
+    if (id && !$channels.length) {
+      await fetchChannels()
+    }
+    channel = $channels.find(c => c.id === id)
+    if (channel) {
+      streams = channel._streams
+      guides = channel._guides
+    }
+    isLoading = false
+  })
+</script>
+
+<svelte:head>
+  <title>{channel && channel.name ? `${channel.name} • iptv-org` : 'iptv-org'}</title>
+</svelte:head>
+
+<header class="fixed z-40 w-full min-w-[360px] top-0">
+  <NavBar withSearch />
+</header>
+
+<main class="bg-slate-50 dark:bg-[#1d232e] min-h-screen min-w-[360px] pt-16">
+  <section class="container max-w-[820px] mx-auto px-2 pt-6 pb-20 flex-col space-y-4">
+    {#if isLoading}
+    <div
+      class="flex items-center justify-center w-full pt-1 pb-6 tracking-tight text-sm text-gray-500 dark:text-gray-400 font-mono"
+    >
+      loading...
+    </div>
+    {/if} {#if channel}
+    <div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
+      <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">
+          <h1 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h1>
+        </div>
+      </div>
+      <div class="overflow-y-scroll overflow-x-hidden w-full p-10">
+        <HTMLPreview data="{channel}" />
+      </div>
+    </div>
+    {/if} {#if streams.length}
+    <div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
+      <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">
+          <h3 class="text-l font-medium text-gray-900 dark:text-white">Streams</h3>
+        </div>
+      </div>
+      <div class="overflow-y-scroll overflow-x-hidden w-full p-6">
+        <div class="space-y-2">
+          {#each streams as stream}
+          <StreamItem stream="{stream}" />
+          {/each}
+        </div>
+      </div>
+    </div>
+    {/if} {#if guides.length}
+    <div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
+      <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">
+          <h3 class="text-l font-medium text-gray-900 dark:text-white">Guides</h3>
+        </div>
+      </div>
+      <div class="overflow-y-scroll overflow-x-hidden w-full p-6">
+        <div class="space-y-2">
+          {#each guides as guide}
+          <GuideItem guide="{guide}" />
+          {/each}
+        </div>
+      </div>
+    </div>
+    {/if}
+  </section>
+</main>