diff --git a/kolibri_explore_plugin/assets/src/kolibriApi.js b/kolibri_explore_plugin/assets/src/kolibriApi.js
index 784bd1fdf..99b5005f4 100644
--- a/kolibri_explore_plugin/assets/src/kolibriApi.js
+++ b/kolibri_explore_plugin/assets/src/kolibriApi.js
@@ -65,6 +65,9 @@ class KolibriApi {
     }
     const kind = onlyContent ? 'content' : onlyTopics ? ContentNodeKinds.TOPIC : undefined;
 
+    const includeUnavailable =
+      'includeUnavailable' in options ? options.includeUnavailable : !DEFAULT_HIDE_UNAVAILABLE;
+
     return ContentNodeResource.fetchCollection({
       getParams: {
         ids: options.ids,
@@ -76,7 +79,7 @@ class KolibriApi {
         kind: kind,
         kind_in: kinds,
         descendant_of: options.descendantOf,
-        no_available_filtering: true,
+        ...(includeUnavailable && { no_available_filtering: true }),
       },
     }).then(contentNodes => {
       const { more, results } = contentNodes;
diff --git a/packages/template-ui/src/views/Home.vue b/packages/template-ui/src/views/Home.vue
index 5851e6667..f6ee0934e 100644
--- a/packages/template-ui/src/views/Home.vue
+++ b/packages/template-ui/src/views/Home.vue
@@ -20,7 +20,20 @@
       <EkCardGridPlaceholder />
     </template>
     <template v-else>
-      <FilterContent v-if="hasFilters" />
+
+      <b-container>
+        <b-row alignH="between">
+          <b-col>
+            <b-form-checkbox v-model="hideUnavailableItems" name="check-only-downloaded" switch>
+              Only downloaded items
+            </b-form-checkbox>
+          </b-col>
+
+          <b-col v-if="hasFilters">
+            <FilterContent />
+          </b-col>
+        </b-row>
+      </b-container>
 
       <template v-if="isFilterEmpty">
         <template v-if="contentNodes.nodes.length">
@@ -38,6 +51,7 @@
           :key="section.id"
         >
           <EkCardGrid
+            v-if="sectionNodes[section.id].nodes.length"
             :id="section.id"
             :nodes="sectionNodes[section.id].nodes"
             :hasMoreNodes="sectionNodes[section.id].hasMoreNodes"
@@ -73,6 +87,7 @@ export default {
       loadingCarouselNodes: true,
       loadingContentNodes: true,
       loadingSectionNodes: true,
+      hideUnavailableItems: window.kolibri.defaultHideUnavailable,
     };
   },
   computed: {
@@ -100,6 +115,13 @@ export default {
     mainSections() {
       return this.fetchSectionNodes();
     },
+    hideUnavailableItems() {
+      return Promise.all([
+        this.fetchCarouselNodes(),
+        this.fetchContentNodes(),
+        this.fetchSectionNodes(),
+      ]);
+    },
   },
   mounted() {
     return Promise.all([
@@ -115,8 +137,10 @@ export default {
       }
       this.loadingCarouselNodes = true;
       if (this.carouselNodeIds.length) {
-        return window.kolibri.getContentByFilter({ ids: this.carouselNodeIds })
-          .then((page) => {
+        return window.kolibri.getContentByFilter({
+          ids: this.carouselNodeIds,
+          includeUnavailable: !this.hideUnavailableItems,
+        }).then((page) => {
             this.carouselNodes = page.results;
             this.loadingCarouselNodes = false;
           });
@@ -138,6 +162,7 @@ export default {
       return window.kolibri.getContentByFilter({
         ...options,
           maxResults: constants.ItemsPerPage,
+          includeUnavailable: !this.hideUnavailableItems,
       })
         .then((pageResult) => {
           this.contentNodes = {
@@ -160,6 +185,7 @@ export default {
         return window.kolibri.getContentByFilter({
             parent: section.id,
             maxResults: sectionPageSize,
+            includeUnavailable: !this.hideUnavailableItems,
           })
           .then((pageResult) => {
             this.$set(this.sectionNodes, section.id, {
@@ -177,7 +203,10 @@ export default {
       if (!hasMoreNodes) {
         return null;
       }
-      return window.kolibri.getContentPage(pagination).then((pageResult) => {
+      return window.kolibri.getContentPage({
+        ...pagination,
+        ...(!this.hideUnavailableItems && { no_available_filtering: true }),
+      }).then((pageResult) => {
         this.$set(this.sectionNodes, sectionId, {
           nodes: nodes.concat(pageResult.results),
           hasMoreNodes: pageResult.more !== null,
@@ -190,7 +219,10 @@ export default {
       if (!hasMoreNodes) {
         return null;
       }
-      return window.kolibri.getContentPage(pagination).then((pageResult) => {
+      return window.kolibri.getContentPage({
+        ...pagination,
+        ...(!this.hideUnavailableItems && { no_available_filtering: true }),
+      }).then((pageResult) => {
         this.contentNodes = {
           nodes: nodes.concat(pageResult.results),
           hasMoreNodes: pageResult.more !== null,
diff --git a/packages/template-ui/src/views/ListSection.vue b/packages/template-ui/src/views/ListSection.vue
index 9517ac6d0..f8c9eeb75 100644
--- a/packages/template-ui/src/views/ListSection.vue
+++ b/packages/template-ui/src/views/ListSection.vue
@@ -4,6 +4,18 @@
   >
     <ChannelHeader :section="section" />
 
+    <b-container v-if="false">
+      <div class="my-4">
+        <b-form-checkbox
+          v-model="hideUnavailableItems"
+          name="check-only-downloaded"
+          switch
+        >
+          Only downloaded items
+        </b-form-checkbox>
+      </div>
+    </b-container>
+
     <div v-if="isInlineLevel">
       <template v-if="loadingSubsectionNodes">
         <EkCardGridPlaceholder
@@ -71,6 +83,7 @@ export default {
     return {
       subsectionNodes: { nodes: [], hasMoreNodes: false, pagination: null },
       loadingSubsectionNodes: true,
+      hideUnavailableItems: window.kolibri.defaultHideUnavailable,
     };
   },
   computed: {
@@ -92,6 +105,10 @@ export default {
         this.loadInlineLevel();
       }
     },
+    hideUnavailableItems() {
+      console.log("Switched again!");
+      return this.fetchSubsectionNodes();
+    },
   },
   mounted() {
     if (this.isInlineLevel) {
@@ -115,6 +132,7 @@ export default {
         return window.kolibri.getContentByFilter({
           parent: subsection.id,
           maxResults: sectionPageSize,
+          includeUnavailable: !this.hideUnavailableItems,
         })
           .then((pageResult) => {
             this.$set(this.subsectionNodes, subsection.id, {
@@ -132,7 +150,10 @@ export default {
       if (!hasMoreNodes) {
         return null;
       }
-      return window.kolibri.getContentPage(pagination).then((pageResult) => {
+      return window.kolibri.getContentPage({
+        ...pagination,
+        ...(!this.hideUnavailableItems && { no_available_filtering: true }),
+      }).then((pageResult) => {
         this.$set(this.subsectionNodes, sectionId, {
           nodes: nodes.concat(pageResult.results),
           hasMoreNodes: pageResult.more !== null,