diff --git a/kolibri_explore_plugin/assets/src/components/EkIguanaList.vue b/kolibri_explore_plugin/assets/src/components/EkIguanaList.vue
index a7abe2cb0..a4da6ee46 100644
--- a/kolibri_explore_plugin/assets/src/components/EkIguanaList.vue
+++ b/kolibri_explore_plugin/assets/src/components/EkIguanaList.vue
@@ -11,15 +11,18 @@
           {{ name }}
         </h5>
       </b-container>
-      <b-container class="no-container-padding">
-        <EkSlidableGrid
+      <b-container fluid class="no-container-padding">
+        <EkSlidableGridNew
           v-slot="slotProps"
           :nodes="getSlidableGridNodes(channels, contentPicks)"
           :hasWhiteBackground="true"
           :itemsPerSlide="{ lg: 3, md: 2, sm: 1 }"
         >
-          <template
-            v-for="node in slotProps.slideNodes"
+          <div
+            v-for="(node, index) in slotProps.nodes"
+            :key="node.id"
+            class="slide"
+            :index="index"
           >
             <EkChannelCard
               v-if="node !== undefined && node.kind === 'channel'"
@@ -32,8 +35,8 @@
               :key="node.id"
               :node="node"
             />
-          </template>
-        </EkSlidableGrid>
+          </div>
+        </EkSlidableGridNew>
       </b-container>
     </div>
   </div>
diff --git a/kolibri_explore_plugin/assets/src/views/DiscoveryPageContenPacks.vue b/kolibri_explore_plugin/assets/src/views/DiscoveryPageContenPacks.vue
index 5a3d9f5b8..645e0ba12 100644
--- a/kolibri_explore_plugin/assets/src/views/DiscoveryPageContenPacks.vue
+++ b/kolibri_explore_plugin/assets/src/views/DiscoveryPageContenPacks.vue
@@ -7,7 +7,7 @@
       <EkCardGridPlaceholder />
     </template>
     <template v-else>
-      <b-container class="mb-2 mt-4 no-container-padding">
+      <b-container fluid class="mb-2 mt-4 no-container-padding">
         <template v-if="hasNodesForSection('featured-channel')">
           <b-container>
             <h5 class="mt-2 text-muted">
@@ -15,18 +15,23 @@
             </h5>
           </b-container>
           <!-- These classes must match EkCardGrid -->
-          <b-container class="mb-5 mt-3 no-container-padding section-container">
-            <EkSlidableGrid
+          <b-container fluid class="mb-5 mt-3 no-container-padding section-container">
+            <EkSlidableGridNew
               v-slot="slotProps"
               :nodes="sectionNodes['featured-channel']"
             >
-              <EkChannelCard
-                v-for="node in slotProps.slideNodes"
+              <div
+                v-for="(node, index) in slotProps.nodes"
                 :key="node.id"
-                :channel="node"
-                @click.native="goToChannel(node.id)"
-              />
-            </EkSlidableGrid>
+                class="slide"
+                :index="index"
+              >
+                <EkChannelCard
+                  :channel="node"
+                  @click.native="goToChannel(node.id)"
+                />
+              </div>
+            </EkSlidableGridNew>
           </b-container>
         </template>
         <template v-if="hasNodesForSection('highlight')">
@@ -37,6 +42,7 @@
           </b-container>
           <EkCardGrid
             :nodes="sectionNodes['highlight']"
+            variant="slidable-new"
           />
         </template>
         <template v-if="hasNodesForSection('skill')">
@@ -47,6 +53,7 @@
           </b-container>
           <EkCardGrid
             :nodes="sectionNodes['skill']"
+            variant="slidable-new"
           />
         </template>
         <template v-if="hasNodesForSection('career')">
@@ -57,6 +64,7 @@
           </b-container>
           <EkCardGrid
             :nodes="sectionNodes['career']"
+            variant="slidable-new"
           />
         </template>
         <template v-if="hasNodesForSection('curious')">
@@ -67,6 +75,7 @@
           </b-container>
           <EkCardGrid
             :nodes="sectionNodes['curious']"
+            variant="slidable-new"
           />
         </template>
 
diff --git a/packages/ek-components/package.json b/packages/ek-components/package.json
index 37a3c7a72..7c78781fd 100644
--- a/packages/ek-components/package.json
+++ b/packages/ek-components/package.json
@@ -16,7 +16,8 @@
     "core-js": "^3.6.5",
     "lodash": "^4.17.21",
     "vue": "^2.6.11",
-    "vue-material-design-icons": "^4.12.1"
+    "vue-material-design-icons": "^4.12.1",
+    "vue-ssr-carousel": "^2.3.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.11",
diff --git a/packages/ek-components/src/components/EkCardGrid.vue b/packages/ek-components/src/components/EkCardGrid.vue
index e5b430667..708aa8210 100644
--- a/packages/ek-components/src/components/EkCardGrid.vue
+++ b/packages/ek-components/src/components/EkCardGrid.vue
@@ -1,7 +1,11 @@
 <template>
   <b-container
     class="mb-5 mt-3 section-container"
-    :class="{ 'no-container-padding': variant === 'slidable' }"
+    :fluid="displayVariant === 'EkSlidableCardGridNew'"
+    :class="{ 'no-container-padding': (
+      displayVariant === 'EkSlidableCardGrid' ||
+      displayVariant === 'EkSlidableCardGridNew'
+    ) }"
   >
     <slot></slot>
 
@@ -41,7 +45,7 @@ export default {
     cardColumns: {
       type: Object,
       default() {
-        return { cols: 6, md: 4, lg: 3 };
+        return { cols: 6, sm: 12, md: 6, lg: 3 };
       },
     },
     variant: {
@@ -49,7 +53,7 @@ export default {
       default: 'slidable',
       validator(value) {
         // The value must match one of these strings
-        return ['collapsible', 'slidable'].includes(value);
+        return ['collapsible', 'slidable', 'slidable-new'].includes(value);
       },
     },
     itemsPerPage: {
@@ -64,9 +68,15 @@ export default {
   },
   computed: {
     displayVariant() {
+      if (this.variant === 'slidable-new' && this.itemsPerSlide.lg >= this.nodes.length) {
+        // There is no need to display a more complex component if there is no pagination:
+        return 'EkGridPage';
+      }
       switch (this.variant) {
         case 'collapsible':
           return 'EkCollapsibleCardGrid';
+        case 'slidable-new':
+          return 'EkSlidableCardGridNew';
         case 'slidable':
         default:
           return 'EkSlidableCardGrid';
diff --git a/packages/ek-components/src/components/EkSlidableCardGridNew.vue b/packages/ek-components/src/components/EkSlidableCardGridNew.vue
new file mode 100644
index 000000000..dff77742d
--- /dev/null
+++ b/packages/ek-components/src/components/EkSlidableCardGridNew.vue
@@ -0,0 +1,56 @@
+<template>
+  <EkSlidableGridNew
+    v-slot="slotProps"
+    class="pb-4"
+    :nodes="nodes"
+    :hasMoreNodes="hasMoreNodes"
+    :itemsPerSlide="itemsPerSlide"
+    @loadMoreNodes="$emit('loadMoreNodes')"
+  >
+    <div
+      v-for="(node, index) in slotProps.nodes"
+      :key="node.id"
+      class="slide"
+      :index="index"
+    >
+      <EkCard
+        :node="node"
+        :mediaQuality="mediaQuality"
+        @nodeUpdated="onNodeUpdated"
+      />
+    </div>
+  </EkSlidableGridNew>
+</template>
+
+<script>
+import { ItemsPerSlide, MediaQuality } from '../constants';
+import { validateItemsPerSlide } from '../utils';
+
+export default {
+  name: 'EkSlidableCardGridNew',
+  props: {
+    nodes: {
+      type: Array,
+      required: true,
+    },
+    hasMoreNodes: {
+      type: Boolean,
+      default: false,
+    },
+    mediaQuality: {
+      type: String,
+      default: MediaQuality.REGULAR,
+    },
+    itemsPerSlide: {
+      type: Object,
+      default: () => ItemsPerSlide,
+      validator: validateItemsPerSlide,
+    },
+  },
+  methods: {
+    onNodeUpdated(nodeId) {
+      this.$emit('nodeUpdated', nodeId);
+    },
+  },
+};
+</script>
diff --git a/packages/ek-components/src/components/EkSlidableGridNew.vue b/packages/ek-components/src/components/EkSlidableGridNew.vue
new file mode 100644
index 000000000..e95279fc6
--- /dev/null
+++ b/packages/ek-components/src/components/EkSlidableGridNew.vue
@@ -0,0 +1,74 @@
+<template>
+  <b-container fluid class="no-container-padding" style="overflow: hidden">
+    <b-container>
+      <SsrCarousel
+        :key="nodes.length"
+        v-model="slide"
+        :gutter="gridGutterWidth"
+        :slidesPerPage="itemsPerSlideComputed"
+        overflowVisible
+        paginateBySlide
+        @change="onChange"
+      >
+        <slot :nodes="nodes"></slot>
+      </SsrCarousel>
+    </b-container>
+  </b-container>
+</template>
+
+<script>
+import SsrCarousel from 'vue-ssr-carousel';
+import { ItemsPerSlide } from '../constants';
+import { validateItemsPerSlide } from '../utils';
+import { gridGutterWidth } from '../styles.scss';
+import responsiveMixin from './mixins/responsiveMixin';
+
+export default {
+  name: 'EkSlidableGridNew',
+  components: { SsrCarousel },
+  mixins: [responsiveMixin],
+  props: {
+    nodes: {
+      type: Array,
+      required: true,
+    },
+    hasMoreNodes: {
+      type: Boolean,
+      default: false,
+    },
+    itemsPerSlide: {
+      type: Object,
+      default: () => ItemsPerSlide,
+      validator: validateItemsPerSlide,
+    },
+  },
+  data() {
+    return {
+      slide: 0,
+      gridGutterWidth,
+    };
+  },
+  computed: {
+    itemsPerSlideComputed() {
+      if (this.xs) {
+        return this.itemsPerSlide.sm;
+      }
+      if (this.sm || this.md) {
+        return this.itemsPerSlide.md;
+      }
+      return this.itemsPerSlide.lg;
+    },
+  },
+  methods: {
+    onChange({ index }) {
+      const isLastSlide = index >= this.nodes.length - this.itemsPerSlideComputed;
+      if (this.hasMoreNodes && isLastSlide) {
+        this.$emit('loadMoreNodes');
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/ek-components/src/index.scss b/packages/ek-components/src/index.scss
index 42ef757ee..df735c7e8 100644
--- a/packages/ek-components/src/index.scss
+++ b/packages/ek-components/src/index.scss
@@ -5,6 +5,7 @@
 
 @import "~@fontsource/lato/index.css";
 @import "~@fontsource/poppins/index.css";
+@import "~vue-ssr-carousel/index.css";
 
 // Override containers mixin:
 @mixin make-container($gutter: $grid-gutter-width) {
diff --git a/packages/ek-components/src/main.js b/packages/ek-components/src/main.js
index cd6858eb7..272ccd5cc 100644
--- a/packages/ek-components/src/main.js
+++ b/packages/ek-components/src/main.js
@@ -23,6 +23,8 @@ import EkPrivacyPolicyText from './components/EkPrivacyPolicyText.vue';
 import EkSearchBar from './components/EkSearchBar.vue';
 import EkSlidableCardGrid from './components/EkSlidableCardGrid.vue';
 import EkSlidableGrid from './components/EkSlidableGrid.vue';
+import EkSlidableGridNew from './components/EkSlidableGridNew.vue';
+import EkSlidableCardGridNew from './components/EkSlidableCardGridNew.vue';
 import EkTopicCard from './components/EkTopicCard.vue';
 import EkPackCard from './components/EkPackCard.vue';
 import EkClamp from './components/EkClamp.vue';
@@ -62,6 +64,8 @@ const components = {
   EkSearchBar,
   EkSlidableCardGrid,
   EkSlidableGrid,
+  EkSlidableGridNew,
+  EkSlidableCardGridNew,
   EkTopicCard,
   EkClamp,
 };
diff --git a/packages/ek-components/src/styles.scss b/packages/ek-components/src/styles.scss
index fa80370a0..2a5184990 100644
--- a/packages/ek-components/src/styles.scss
+++ b/packages/ek-components/src/styles.scss
@@ -108,6 +108,7 @@ $background-alpha: -8%;
 $card-image-ar: calc(9 / 16);
 
 :export {
+  gridGutterWidth: $grid-gutter-width;
   headerLogoWidth: $header-logo-width;
   cardImageAspectRatio: $card-image-ar;
   xs: map-get($grid-breakpoints, "xs");
diff --git a/packages/template-ui/src/components/EmptyResultsMessage.vue b/packages/template-ui/src/components/EmptyResultsMessage.vue
index 9d1d1605c..51a738c79 100644
--- a/packages/template-ui/src/components/EmptyResultsMessage.vue
+++ b/packages/template-ui/src/components/EmptyResultsMessage.vue
@@ -18,6 +18,7 @@
     <EkCardGrid
       v-if="showTopics"
       :nodes="mainSections"
+      variant="slidable-new"
       :mediaQuality="mediaQuality"
       :cardColumns="cardColumns"
     >
diff --git a/packages/template-ui/src/views/Content.vue b/packages/template-ui/src/views/Content.vue
index ab8009175..3205e40d8 100644
--- a/packages/template-ui/src/views/Content.vue
+++ b/packages/template-ui/src/views/Content.vue
@@ -34,6 +34,7 @@
       <EkCardGrid
         v-if="nextNodesInTopic.length && showNextContent"
         :nodes="nextNodesInTopic"
+        variant="slidable-new"
         :cardColumns="cardColumns"
         class="next-grid"
         @nodeUpdated="onNextNodesUpdated"
diff --git a/packages/template-ui/src/views/Home.vue b/packages/template-ui/src/views/Home.vue
index 1d995b253..3bd02017a 100644
--- a/packages/template-ui/src/views/Home.vue
+++ b/packages/template-ui/src/views/Home.vue
@@ -26,7 +26,7 @@
         <template v-if="contentNodes.nodes.length">
           <EkCardGrid
             :nodes="contentNodes.nodes"
-            :variant="hasFlatGrid ? 'collapsible' : 'slidable'"
+            :variant="hasFlatGrid ? 'collapsible' : 'slidable-new'"
             :mediaQuality="mediaQuality"
             :cardColumns="cardColumns"
             :hasMoreNodes="contentNodes.hasMoreNodes"
@@ -41,6 +41,7 @@
           <EkCardGrid
             :id="section.id"
             :nodes="sectionNodes[section.id].nodes"
+            variant="slidable-new"
             :hasMoreNodes="sectionNodes[section.id].hasMoreNodes"
             :mediaQuality="mediaQuality"
             @loadMoreNodes="onLoadMoreSectionNodes(section.id)"
diff --git a/packages/template-ui/src/views/ListSection.vue b/packages/template-ui/src/views/ListSection.vue
index b37f8c7ad..05c8dd45d 100644
--- a/packages/template-ui/src/views/ListSection.vue
+++ b/packages/template-ui/src/views/ListSection.vue
@@ -19,6 +19,7 @@
           v-for="subsection in sectionNodes.nodes"
           :id="subsection.id"
           :key="subsection.id"
+          variant="slidable-new"
           :nodes="getSubsectionNodes(subsection.id).nodes"
           :mediaQuality="mediaQuality"
           :cardColumns="cardColumns"
diff --git a/packages/template-ui/src/views/Search.vue b/packages/template-ui/src/views/Search.vue
index 8a6ce7ad9..6a4799ca7 100644
--- a/packages/template-ui/src/views/Search.vue
+++ b/packages/template-ui/src/views/Search.vue
@@ -32,6 +32,7 @@
     <EkCardGrid
       v-if="!resultNodes.length"
       :nodes="mainSections"
+      variant="slidable-new"
       :mediaQuality="mediaQuality"
       :cardColumns="cardColumns"
     >
diff --git a/packages/template-ui/src/views/Test.vue b/packages/template-ui/src/views/Test.vue
index f936b0d5f..6da06d395 100644
--- a/packages/template-ui/src/views/Test.vue
+++ b/packages/template-ui/src/views/Test.vue
@@ -179,25 +179,29 @@
       <hr>
 
     </b-container>
-    <b-container class="no-container-padding">
-      <b-container>
-        <h3>Slidable cards loading:</h3>
-      </b-container>
-      <EkCardGridPlaceholder />
+    <b-container class="mt-4">
+      <h3>Slidable cards (new!):</h3>
+    </b-container>
+    <EkCardGrid variant="slidable-new" :nodes="contentNodes" />
+    <b-container class="mt-4 no-container-padding">
       <b-container>
         <h3>Slidable cards:</h3>
       </b-container>
       <EkCardGrid :nodes="contentNodes" />
       <b-container>
-        <hr>
-        <h3>Carousel cards loading:</h3>
+        <h3>Slidable cards loading:</h3>
       </b-container>
-      <EkCarouselPlaceholder />
+      <EkCardGridPlaceholder />
       <b-container>
         <hr>
         <h3>Carousel cards:</h3>
       </b-container>
       <EkCarousel :nodes="contentNodes" />
+      <b-container>
+        <hr>
+        <h3>Carousel cards loading:</h3>
+      </b-container>
+      <EkCarouselPlaceholder />
     </b-container>
   </div>
 </template>
diff --git a/yarn.lock b/yarn.lock
index 49dc4bfba..2fcdbb747 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5363,6 +5363,14 @@ builtins@^1.0.3:
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
   integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
 
+bukwild-stylus-library@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/bukwild-stylus-library/-/bukwild-stylus-library-3.2.1.tgz#abea66a731d3339938daeb2dfc33bfa473bac1d4"
+  integrity sha512-MgaFjTgd0oJO2dwOTzKMig0bSMjzqndhNOCkV05rsPoNlmY/8weCdWFVWUwujGWMTdgRqYsa+oVjGy76KGBwLA==
+  dependencies:
+    stylus-easing "^1"
+    stylus-type-utils "^0"
+
 byline@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
@@ -15870,6 +15878,16 @@ stylelint@14.10.0:
     v8-compile-cache "^2.3.0"
     write-file-atomic "^4.0.1"
 
+stylus-easing@^1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stylus-easing/-/stylus-easing-1.0.0.tgz#1ba3177903a3d3c9605c83ebf71f1895b9b9e5a1"
+  integrity sha512-M2/GG/RXnrVZpXlrWC1gs8JXCXXrLENF33W1KQMhcmxKwTbGup4a1cJh+uZalQL8mLtfegocM+6+u0YHqvcgyg==
+
+stylus-type-utils@^0:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/stylus-type-utils/-/stylus-type-utils-0.0.3.tgz#f048334728bb5144ecd599c627553db64ea0a6bb"
+  integrity sha512-E1yoznMW1fFSm2OUF+oEp41KWSXoTYPEBgpRVAASVPG45mrnCZzs7qmA+0bjegJ9vLRPoYeX38mU3RJFk6BphQ==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -16883,6 +16901,13 @@ vue-router@^3.2.0:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
   integrity sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg==
 
+vue-ssr-carousel@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/vue-ssr-carousel/-/vue-ssr-carousel-2.3.2.tgz#1dbcb6f524e72f57442b897969e5bec00897db40"
+  integrity sha512-srB/eciIynvc7SwBBSLq0VWEwwQEj2Ilmp0iYD6T6m2FS5FxTnuZbE9rWWygyBG/3Bc0wMvxYcRDjLrwdtrygA==
+  dependencies:
+    bukwild-stylus-library "^3.1.0"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2, vue-style-loader@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"