diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 6af31d615..67a6bd9d3 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -12,11 +12,13 @@
   const guides = channel._guides
   const streams = channel._streams
 
+  const [name, country] = channel.id.split('.')
+
   let currLocation
   const { open } = getContext('simple-modal')
   const onOpened = () => {
     currLocation = window.location.href
-    window.history.pushState({}, `${channel.name} • iptv-org`, `/channels/${channel.id}`)
+    window.history.pushState({}, `${channel.name} • iptv-org`, `/channels/${country}/${name}`)
   }
   const onClosed = () => {
     window.history.pushState({}, `iptv-org`, currLocation || '/')
@@ -91,7 +93,7 @@
         <div class="flex space-x-2 items-center">
           <a
             on:click|preventDefault={showChannelData}
-            href="/channels/{channel.id}"
+            href="/channels/{country}/{name}"
             tabindex="0"
             class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 line-clamp-1"
             title={channel.name}
diff --git a/src/pages/channels/[country]/[name]/+page.server.js b/src/pages/channels/[country]/[name]/+page.server.js
new file mode 100644
index 000000000..1d32ef034
--- /dev/null
+++ b/src/pages/channels/[country]/[name]/+page.server.js
@@ -0,0 +1,66 @@
+import { transformChannel } from '~/store'
+import _ from 'lodash'
+import channels from '~/data/channels.json'
+import countries from '~/data/countries.json'
+import regions from '~/data/regions.json'
+import subdivisions from '~/data/subdivisions.json'
+import categories from '~/data/categories.json'
+import blocklist from '~/data/blocklist.json'
+import languages from '~/data/languages.json'
+import streams from '~/data/streams.json'
+
+export async function entries() {
+  return channels.map(channel => {
+    const [name, country] = channel.id.split('.')
+
+    return {
+      country,
+      name
+    }
+  })
+}
+
+export async function load({ params }) {
+  const data = await loadData()
+
+  const country = params.country
+  const name = params.name
+  const id = `${name}.${country}`.toLowerCase()
+
+  const _channels = data.channels
+
+  let streams = []
+  let channel = _channels.find(channel => channel.id.toLowerCase() === id)
+  if (channel) {
+    channel = transformChannel(channel, data)
+    streams = channel._streams
+  }
+
+  return {
+    channel,
+    streams
+  }
+}
+
+async function loadData() {
+  const data = {}
+
+  data.countries = _.keyBy(
+    countries.map(country => {
+      country.expanded = false
+
+      return country
+    }),
+    'code'
+  )
+
+  data.regions = _.keyBy(regions, 'code')
+  data.subdivisions = _.keyBy(subdivisions, 'code')
+  data.languages = _.keyBy(languages, 'code')
+  data.categories = _.keyBy(categories, 'id')
+  data.streams = _.keyBy(streams, 'channel')
+  data.blocklist = _.keyBy(blocklist, 'channel')
+  data.channels = channels
+
+  return data
+}
diff --git a/src/pages/channels/[id]/+page.svelte b/src/pages/channels/[country]/[name]/+page.svelte
similarity index 100%
rename from src/pages/channels/[id]/+page.svelte
rename to src/pages/channels/[country]/[name]/+page.svelte
diff --git a/src/pages/channels/[id]/+page.server.js b/src/pages/channels/[id]/+page.server.js
deleted file mode 100644
index a871086aa..000000000
--- a/src/pages/channels/[id]/+page.server.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { get } from 'svelte/store'
-import { fetchChannels, channels } from '~/store'
-import apiChannels from '~/data/channels.json'
-
-export async function entries() {
-  return apiChannels
-}
-
-export async function load({ params }) {
-  const id = params.id
-
-  await fetchChannels()
-
-  const channel = get(channels).find(c => c.id === id)
-  let streams = []
-  if (channel) {
-    streams = channel._streams
-  }
-
-  return {
-    channel,
-    streams
-  }
-}
diff --git a/src/store.js b/src/store.js
index 06969f260..5e305129e 100644
--- a/src/store.js
+++ b/src/store.js
@@ -32,31 +32,7 @@ export async function fetchChannels() {
 
   countries.set(api.countries)
 
-  let _channels = api.channels.map(c => {
-    c._streams = api.streams[c.id] || []
-    c._guides = api.guides[c.id] || []
-    c._country = api.countries[c.country]
-    c._subdivision = api.subdivisions[c.subdivision]
-    c._languages = c.languages.map(code => api.languages[code]).filter(i => i)
-    c._categories = c.categories.map(id => api.categories[id]).filter(i => i)
-    c._broadcast_area = c.broadcast_area.map(value => {
-      const [type, code] = value.split('/')
-      switch (type) {
-        case 'c':
-          return { type, ...api.countries[code] }
-        case 'r':
-          return { type, ...api.regions[code] }
-        case 's':
-          return { type, ...api.subdivisions[code] }
-      }
-    })
-    c.is_closed = !!c.closed || !!c.replaced_by
-    c.is_blocked = !!api.blocklist[c.id]
-    c.streams = c._streams.length
-    c.guides = c._guides.length
-
-    return c
-  })
+  let _channels = api.channels.map(c => transformChannel(c, api))
 
   channels.set(_channels)
   filteredChannels.set(_channels)
@@ -104,8 +80,9 @@ export function setPageTitle(value) {
 async function loadAPI() {
   const api = {}
 
-  api.countries = await import('~/data/countries.json')
-    .then(m => m.default)
+  api.countries = await fetch('https://iptv-org.github.io/api/countries.json')
+    .then(r => r.json())
+    .then(data => (data.length ? data : []))
     .then(data =>
       data.map(i => {
         i.expanded = false
@@ -115,40 +92,46 @@ async function loadAPI() {
     .then(data => _.keyBy(data, 'code'))
     .catch(console.error)
 
-  api.regions = await import('~/data/regions.json')
-    .then(m => m.default)
+  api.regions = await fetch('https://iptv-org.github.io/api/regions.json')
+    .then(r => r.json())
+    .then(data => (data.length ? data : []))
     .then(data => _.keyBy(data, 'code'))
     .catch(console.error)
 
-  api.subdivisions = await import('~/data/subdivisions.json')
-    .then(m => m.default)
+  api.subdivisions = await fetch('https://iptv-org.github.io/api/subdivisions.json')
+    .then(r => r.json())
+    .then(data => (data.length ? data : []))
     .then(data => _.keyBy(data, 'code'))
     .catch(console.error)
 
-  api.languages = await import('~/data/languages.json')
-    .then(m => m.default)
+  api.languages = await fetch('https://iptv-org.github.io/api/languages.json')
+    .then(r => r.json())
+    .then(data => (data.length ? data : []))
     .then(data => _.keyBy(data, 'code'))
     .catch(console.error)
 
-  api.categories = await import('~/data/categories.json')
-    .then(m => m.default)
+  api.categories = await fetch('https://iptv-org.github.io/api/categories.json')
+    .then(r => r.json())
+    .then(data => (data.length ? data : []))
     .then(data => _.keyBy(data, 'id'))
     .catch(console.error)
 
-  api.streams = await import('~/data/streams.json')
-    .then(m => m.default)
+  api.streams = await fetch('https://iptv-org.github.io/api/streams.json')
+    .then(r => r.json())
+    .then(data => (data.length ? data : []))
     .then(data => _.groupBy(data, 'channel'))
     .catch(console.error)
 
-  api.blocklist = await import('~/data/blocklist.json')
-    .then(m => m.default)
+  api.blocklist = await fetch('https://iptv-org.github.io/api/blocklist.json')
+    .then(r => r.json())
+    .then(data => (data.length ? data : []))
     .then(data => _.groupBy(data, 'channel'))
     .catch(console.error)
 
   api.guides = {}
 
-  api.channels = await import('~/data/channels.json')
-    .then(m => m.default)
+  api.channels = await fetch('https://iptv-org.github.io/api/channels.json')
+    .then(r => r.json())
     .catch(err => {
       console.error(err)
       return []
@@ -157,6 +140,30 @@ async function loadAPI() {
   return api
 }
 
+export function transformChannel(channel, data) {
+  channel._streams = data.streams[channel.id] || []
+  channel._country = data.countries[channel.country]
+  channel._subdivision = data.subdivisions[channel.subdivision]
+  channel._languages = channel.languages.map(code => data.languages[code]).filter(i => i)
+  channel._categories = channel.categories.map(id => data.categories[id]).filter(i => i)
+  channel._broadcast_area = channel.broadcast_area.map(value => {
+    const [type, code] = value.split('/')
+    switch (type) {
+      case 'c':
+        return { type, ...data.countries[code] }
+      case 'r':
+        return { type, ...data.regions[code] }
+      case 's':
+        return { type, ...data.subdivisions[code] }
+    }
+  })
+  channel.is_closed = !!channel.closed || !!channel.replaced_by
+  channel.is_blocked = !!data.blocklist[channel.id]
+  channel.streams = channel._streams.length
+
+  return channel
+}
+
 function getStreams() {
   let streams = []
   get(selected).forEach(channel => {
@@ -196,7 +203,7 @@ export function createPlaylist() {
       'tvg-id': stream.channel.id,
       'tvg-logo': stream.channel.logo,
       'group-title': stream.channel._categories
-        .map(c => c.name)
+        .map(c => channel.name)
         .sort()
         .join(';')
     }