diff --git a/src/components/ChannelGrid.svelte b/src/components/ChannelGrid.svelte
index 88e3b72a4..2fbe238c9 100644
--- a/src/components/ChannelGrid.svelte
+++ b/src/components/ChannelGrid.svelte
@@ -2,11 +2,19 @@
   import ChannelItem from './ChannelItem.svelte'
 
   export let channels = []
+
+  let limit = 100
+
+  $: channelsDisplay = channels.slice(0, limit)
+
+  function showMore() {
+    limit += 100
+  }
 </script>
 
 <div class="flex flex-col">
   <div class="overflow-y-auto scrollbar-hide">
-    <div class="inline-block min-w-full align-middle overflow-hidden">
+    <div class="inline-block min-w-full align-middle">
       <div class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <div class="bg-gray-50 dark:bg-gray-700">
           <div class="flex">
@@ -27,9 +35,15 @@
           </div>
         </div>
         <div class="bg-white dark:bg-gray-800">
-          {#each channels as channel (channel.id)}
+          {#each channelsDisplay as channel (channel.id)}
             <ChannelItem bind:channel />
           {/each}
+          {#if channelsDisplay.length < channels.length}
+            <button
+              class="flex items-center justify-center h-12 w-full text-blue-500 dark:text-blue-400 hover:bg-gray-50 hover:dark:bg-gray-700 focus-visible:outline-0"
+              on:click={showMore}>Show More</button
+            >
+          {/if}
         </div>
       </div>
     </div>