diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue
index 10a5c510193..9324965e7bb 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue
@@ -21,7 +21,7 @@
             <KIconButton
               ref="pinIcon"
               :icon="pinIcon"
-              :disabled="disablePinDevice"
+              :disabled="isStudio"
               appearance="flat-button"
               @click="$emit('togglePin', deviceId)"
             />
@@ -33,7 +33,7 @@
             </KTooltip>
           </h2>
           <p
-            v-if="showDescription"
+            v-if="isStudio"
             class="device-description"
           >
             {{ $tr('channels', { channels: totalChannels }) }}
@@ -48,25 +48,16 @@
         <KRouterLink
           appearance="raised-button"
           :text="coreString('explore')"
-          :to="genLibraryPageBackLink(deviceId, false)"
-        />
-      </KGridItem>
-    </div>
-    <div class="library-channels">
-      <KGridItem
-        v-for="channel in channels.slice(0, cardsPerRow)"
-        :key="channel.id"
-        :layout="{ span: layoutSpan }"
-      >
-        <ChannelCard
-          :title="channel.name"
-          :tagline="channel.tagline || channel.description"
-          :thumbnail="channel.thumbnail"
-          :link="genContentLinkBackLinkCurrentPage(channel.root, false, deviceId)"
-          :version="channel.version"
+          :to="genLibraryPageBackLink(deviceId)"
         />
       </KGridItem>
     </div>
+    <ChannelCardGroupGrid
+      data-test="channel-cards"
+      :deviceId="device.id"
+      :contents="channels"
+      :isRemote="true"
+    />
   </KGrid>
 
 </template>
@@ -77,12 +68,13 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import useContentLink from '../../composables/useContentLink';
-  import ChannelCard from '../ChannelCard';
+  import { KolibriStudioId } from '../../constants';
+  import ChannelCardGroupGrid from '../ChannelCardGroupGrid';
 
   export default {
     name: 'LibraryItem',
     components: {
-      ChannelCard,
+      ChannelCardGroupGrid,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -97,19 +89,10 @@
       };
     },
     props: {
-      deviceId: {
-        type: String,
-        default: null,
-      },
-      deviceName: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      deviceIcon: {
-        type: String,
-        required: false,
-        default: null,
+      device: {
+        type: Object,
+        required: true,
+        default: () => ({}),
       },
       channels: {
         type: Array,
@@ -118,61 +101,36 @@
           return [];
         },
       },
-      pinIcon: {
-        type: String,
-        required: true,
-        default: null,
-      },
-      showDescription: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      disablePinDevice: {
+      pinned: {
         type: Boolean,
-        required: false,
+        required: true,
         default: false,
       },
     },
     computed: {
-      cardsPerRow() {
-        if (this.windowIsSmall) {
-          return 1;
-        }
-        if (this.windowBreakpoint < 4) {
-          return 2;
-        }
-        if (this.windowBreakpoint < 6) {
-          return 3;
-        }
-        return 4;
+      totalChannels() {
+        return this.channels.length;
       },
-      layoutSpan() {
-        /**
-         * The breakpoints below represent the window widths
-         * 0: < 480px  | Small screen  | 4 columns
-         * 1: < 600px  | Small screen  | 4 columns
-         * 2: < 840px  | Medium screen | 8 columns
-         * 3: < 960px  | Large screen  | 12 columns
-         * 4: < 1280px | Large screen  | 12 columns
-         * 5: < 1440px | Large screen  | 12 columns
-         * 6: < 1600px | Large screen  | 12 columns
-         *
-         * On resize, display X cards per row where:
-         * X = total columns in grid / column span for each card.
-         * For example, if the total number of columns is 12, and
-         * column span for each cards is 4, then X is 3.
-         */
-        if (this.windowBreakpoint < 2) {
-          return 4 / this.cardsPerRow;
-        }
-        if (this.windowBreakpoint === 2) {
-          return 8 / this.cardsPerRow;
+      isStudio() {
+        return this.deviceId === KolibriStudioId;
+      },
+      deviceIcon() {
+        if (this.device['operating_system'] === 'Android') {
+          return 'device';
+        } else if (!this.device['subset_of_users_device']) {
+          return 'cloud';
+        } else {
+          return 'laptop';
         }
-        return 12 / this.cardsPerRow;
       },
-      totalChannels() {
-        return this.channels.length;
+      deviceName() {
+        return this.device ? this.device.device_name : '';
+      },
+      deviceId() {
+        return this.device ? this.device.instance_id : '';
+      },
+      pinIcon() {
+        return this.pinned ? 'pinned' : 'notPinned';
       },
     },
     $trs: {
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
index 3f64ea6776a..f4d5174556c 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
@@ -25,13 +25,9 @@
       <LibraryItem
         v-for="device in pinnedDevices"
         :key="device['instance_id']"
-        :deviceId="device['instance_id']"
-        :deviceName="device['device_name']"
-        :deviceIcon="getDeviceIcon(device)"
-        :channels="deviceChannelsMap[device['instance_id']]"
-        :pinIcon="getPinIcon(true)"
-        :showDescription="device['instance_id'] === studioId"
-        :disablePinDevice="device['instance_id'] === studioId"
+        :device="device"
+        :channels="deviceChannelsMap[device['instance_id']].slice(0, cardsToDisplay)"
+        :pinned="true"
         @togglePin="handlePinToggle"
       />
       <div v-if="areMoreDevicesAvailable" key="moreDevices">
@@ -52,11 +48,9 @@
           <LibraryItem
             v-for="device in unpinnedDevices.slice(0, moreDevices)"
             :key="device['instance_id']"
-            :deviceId="device['instance_id']"
-            :deviceName="device['device_name']"
-            :deviceIcon="getDeviceIcon(device)"
-            :channels="deviceChannelsMap[device['instance_id']]"
-            :pinIcon="getPinIcon(false)"
+            :device="device"
+            :channels="deviceChannelsMap[device['instance_id']].slice(0, cardsToDisplay)"
+            :pinned="false"
             @togglePin="handlePinToggle"
           />
         </FadeInTransitionGroup>
@@ -82,6 +76,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonLearnStrings from '../commonLearnStrings';
   import FadeInTransitionGroup from '../FadeInTransitionGroup';
+  import useCardLayoutSpan from '../../composables/useCardLayoutSpan';
   import useContentLink from '../../composables/useContentLink';
   import useDevices from '../../composables/useDevices';
   import usePinnedDevices from '../../composables/usePinnedDevices';
@@ -113,6 +108,7 @@
         pinnedDevicesExist,
       } = usePinnedDevices(networkDevicesWithChannels);
       const { back } = useContentLink();
+      const { makeComputedCardCount } = useCardLayoutSpan();
       const moreDevices = ref(0);
 
       keepDeviceChannelsUpdated();
@@ -123,12 +119,15 @@
 
       watch(pinnedDevicesExist, (newVal, oldVal) => {
         if (!oldVal && newVal) {
-          set(moreDevices, 0);
+          // Always show at least 4 devices
+          set(moreDevices, Math.max(moreDevicesIncrement - get(pinnedDevices).length, 0));
         } else if (oldVal && !newVal && !get(moreDevices)) {
           set(moreDevices, moreDevicesIncrement);
         }
       });
 
+      const cardsToDisplay = makeComputedCardCount(1, 3);
+
       return {
         handlePinToggle,
         pinnedDevices,
@@ -140,6 +139,7 @@
         back,
         loading: isLoadingChannels,
         moreDevices,
+        cardsToDisplay,
       };
     },
     computed: {
@@ -160,18 +160,6 @@
       },
     },
     methods: {
-      getDeviceIcon(device) {
-        if (device['operating_system'] === 'Android') {
-          return 'device';
-        } else if (!device['subset_of_users_device']) {
-          return 'cloud';
-        } else {
-          return 'laptop';
-        }
-      },
-      getPinIcon(pinned) {
-        return pinned ? 'pinned' : 'notPinned';
-      },
       loadMoreDevices() {
         this.moreDevices += moreDevicesIncrement;
       },