diff --git a/contentcuration/contentcuration/dev_settings.py b/contentcuration/contentcuration/dev_settings.py
index 439bdef8af..d81d23a993 100644
--- a/contentcuration/contentcuration/dev_settings.py
+++ b/contentcuration/contentcuration/dev_settings.py
@@ -5,4 +5,4 @@
 
 ROOT_URLCONF = "contentcuration.dev_urls"
 
-INSTALLED_APPS += ("drf_yasg", "automation")
+INSTALLED_APPS += ("drf_yasg",)
diff --git a/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue b/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue
index fc69859fc5..78bde4a2d3 100644
--- a/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue
+++ b/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue
@@ -1,40 +1,46 @@
 <template>
 
   <KCard
-    class="recommended-resource-card"
-    :to="to"
-    :title="title"
-    orientation="horizontal"
-    :headingLevel="headingLevel"
+    :title="node.title"
+    :headingLevel="2"
     thumbnailScaleType="contain"
     thumbnailDisplay="small"
     thumbnailAlign="right"
-    :thumbnailSrc="thumbnailSrc"
-    :style="{ margin: '16px 0 16px 0' }"
+    :thumbnailSrc="node.thumbnail_src"
+    @click="onClick"
   >
-    <template #aboveTitle>
-      <div>
-        <KIcon
-          icon="practiceSolid"
-        />
-        <span>Practice</span>
-      </div>
+    <template #select>
+      <Checkbox
+        :key="`checkbox-${node.id}`"
+        :inputValue="isSelected(node)"
+        @input="toggleSelected(node)"
+      >
+        <span class="visuallyhidden">{{ $tr('selectCard', { title: node.title }) }}</span>
+      </Checkbox>
     </template>
-    <template #title>
+    <template #aboveTitle>
+      <ContentNodeLearningActivityIcon
+        :learningActivities="learningActivities"
+        showEachActivityIcon
+        includeText
+        small
+      />
     </template>
     <template #belowTitle>
-      <div class="bellow-title-style">
-        <p>
-          below title slot section for the KCard component:
-          below title slot section for the KCard component
-        </p>
+      <div>
+        <KTextTruncator
+          :text="channelName"
+          :maxLines="2"
+        />
       </div>
     </template>
     <template #footer>
-      <div class="align-right-style">
-        <KIconButton icon="openNewTab" class="card-icon-size" />
-        <KIconButton icon="thumbDown" class="card-icon-size" />
-      </div>
+      <KFixedGrid :numCols="2">
+        <KFixedGridItem alignment="right">
+          <KIconButton icon="openNewTab" />
+          <KIconButton icon="thumbDown" />
+        </KFixedGridItem>
+      </KFixedGrid>
     </template>
   </KCard>
 
@@ -43,37 +49,68 @@
 
 <script>
 
+  import find from 'lodash/find';
+  import LearningActivities from 'kolibri-constants/labels/LearningActivities';
+  import { ContentKindLearningActivityDefaults } from 'shared/leUtils/ContentKinds';
+  import Checkbox from 'shared/views/form/Checkbox';
+  import ContentNodeLearningActivityIcon from 'shared/views/ContentNodeLearningActivityIcon';
+
   export default {
     name: 'RecommendedResourceCard',
+    components: {
+      Checkbox,
+      ContentNodeLearningActivityIcon,
+    },
     props: {
-      to: {
+      node: {
         type: Object,
         required: true,
       },
-      title: {
-        type: String,
-        default: null,
-      },
-      headingLevel: {
-        type: Number,
+      selected: {
+        type: Array,
         required: true,
       },
-      thumbnailSrc: {
-        type: String,
-        default: null,
+    },
+    computed: {
+      channelName() {
+        return this.node.channel?.name || '';
+      },
+      learningActivities() {
+        return {
+          [ContentKindLearningActivityDefaults[this.node.kind] || LearningActivities.EXPLORE]: true,
+        };
+      },
+      isSelected() {
+        return function(node) {
+          return Boolean(find(this.selected, { id: node.id }));
+        };
       },
     },
+    methods: {
+      toggleSelected(node) {
+        this.$emit('change_selected', { nodes: [node], isSelected: !this.isSelected(node) });
+      },
+      onClick() {
+        this.$emit('preview', this.node);
+      },
+    },
+    $trs: {
+      selectCard: 'Select { title }',
+    },
   };
 
 </script>
 
 
 <style>
-  .align-right-style{
-      display: flex;
-      justify-content: flex-end;
-  }
-  .recommended-resource-card {
-    max-width:400px
+  .visuallyhidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
   }
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelList.vue
index 6741ffc6c2..d9b0669abd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelList.vue
@@ -6,10 +6,10 @@
       <DropdownWrapper
         component="VFlex"
         sm6
-        md5
-        lg4
-        xl3
-        class="pr-4"
+        md6
+        lg6
+        xl6
+        class="pr-3"
       >
         <template #default="{ attach, menuProps }">
           <VSelect
@@ -23,7 +23,7 @@
           />
         </template>
       </DropdownWrapper>
-      <VFlex sm6 md5 lg4 xl3 class="pr-5">
+      <VFlex sm6 md6 lg6 xl6>
         <LanguageDropdown v-model="languageFilter" />
       </VFlex>
     </VLayout>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
index e085b6fe7d..25e18174a0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
@@ -277,7 +277,10 @@
 <style lang="less" scoped>
 
   .modal-container.fluid {
-    max-width: 1200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
index 128e990ecb..43e6e4d2f2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
@@ -3,7 +3,7 @@
   <VNavigationDrawer
     permanent
     floating
-    class="import-search-filters px-2"
+    class="import-search-filters"
   >
     <!-- Channel -->
     <p class="font-weight-bold grey--text mb-1">
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
index 55f348f138..48cfda22ad 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
@@ -2,80 +2,161 @@
 
   <ImportFromChannelsModal>
     <template #default="{ preview }">
-      <VSheet>
-        <div v-if="!isBrowsing" class="my-2 px-2">
-          <ActionLink
-            :text="$tr('backToBrowseAction')"
-            @click="handleBackToBrowse"
+
+      <KGrid :class="$computedClass(browseWindowStyle)">
+
+        <!-- Back to browse button -->
+        <KGridItem
+          :layout12="{ span: 12 }"
+          :layout8="{ span: 8 }"
+          :layout4="{ span: 4 }"
+        >
+          <div v-if="!isBrowsing" class="my-2">
+            <ActionLink
+              :text="$tr('backToBrowseAction')"
+              @click="handleBackToBrowse"
+            />
+          </div>
+        </KGridItem>
+
+        <!-- Main panel >= 800px -->
+        <KGridItem
+          :layout12="{ span: isAIFeatureEnabled && layoutFitsTwoColumns ? 8 : 12 }"
+          :layout8="{ span: 8 }"
+          :layout4="{ span: 4 }"
+        >
+          <!-- Search bar -->
+          <VForm ref="search" @submit.prevent="handleSearchTerm">
+            <VTextField
+              v-model="searchTerm"
+              class="searchtext"
+              color="primary"
+              :label="$tr('searchLabel')"
+              box
+              clearable
+              hideDetails
+            >
+              <template #prepend-inner>
+                <Icon icon="search" />
+              </template>
+              <template #append-outer>
+                <VBtn
+                  class="px-4 search-btn"
+                  color="primary"
+                  type="submit"
+                  :disabled="!searchIsValid"
+                  depressed
+                  large
+                >
+                  {{ $tr('searchAction') }}
+                </VBtn>
+              </template>
+            </VTextField>
+          </VForm>
+
+          <div v-if="!isBrowsing" class="my-2 px-2">
+            <ActionLink
+              class="mb-3"
+              :text="$tr('savedSearchesLabel')"
+              :disabled="!savedSearchesExist"
+              @click="showSavedSearches = true"
+            />
+          </div>
+          <!-- Search or Topics Browsing -->
+          <ChannelList
+            v-if="isBrowsing && !$route.params.channelId"
+            @update-language="updateLanguageQuery"
           />
-        </div>
-        <!-- Search bar -->
-        <VLayout row wrap class="mt-4 px-2">
-          <VFlex style="max-width: 700px">
-            <VForm ref="search" @submit.prevent="handleSearchTerm">
-              <VTextField
-                v-model="searchTerm"
-                class="searchtext"
-                color="primary"
-                :label="$tr('searchLabel')"
-                box
-                clearable
-                hideDetails
-                @click:clear="handleBackToBrowse"
-              >
-                <template #prepend-inner>
-                  <Icon icon="search" />
-                </template>
-                <template #append-outer>
-                  <VBtn
-                    class="px-4 search-btn"
-                    color="primary"
-                    type="submit"
-                    :disabled="!searchIsValid"
-                    depressed
-                    large
-                  >
-                    {{ $tr('searchAction') }}
-                  </VBtn>
-                </template>
-              </VTextField>
-            </VForm>
-          </VFlex>
-        </VLayout>
-
-        <div class="my-2 px-2">
-          <ActionLink
-            class="mb-3"
-            :text="$tr('savedSearchesLabel')"
-            :disabled="!savedSearchesExist"
-            @click="showSavedSearches = true"
+          <ContentTreeList
+            v-else-if="isBrowsing"
+            ref="contentTreeList"
+            :topicNode="topicNode"
+            :selected.sync="selected"
+            :topicId="topicId"
+            @preview="preview($event)"
+            @change_selected="handleChangeSelected"
+            @copy_to_clipboard="handleCopyToClipboard"
           />
-        </div>
-
-        <!-- Search or Topics Browsing -->
-        <ChannelList
-          v-if="isBrowsing && !$route.params.channelId"
-          @update-language="updateLanguageQuery"
-        />
-        <ContentTreeList
-          v-else-if="isBrowsing"
-          ref="contentTreeList"
-          :topicNode="topicNode"
-          :selected.sync="selected"
-          :topicId="$route.params.nodeId"
-          @preview="preview($event)"
-          @change_selected="handleChangeSelected"
-          @copy_to_clipboard="handleCopyToClipboard"
-        />
-        <SearchResultsList
-          v-else
-          :selected.sync="selected"
-          @preview="preview($event)"
-          @change_selected="handleChangeSelected"
-          @copy_to_clipboard="handleCopyToClipboard"
-        />
-      </VSheet>
+          <SearchResultsList
+            v-else
+            :selected.sync="selected"
+            @preview="preview($event)"
+            @change_selected="handleChangeSelected"
+            @copy_to_clipboard="handleCopyToClipboard"
+          />
+        </KGridItem>
+
+        <!-- Recommended resources panel >= 400px -->
+        <KGridItem
+          v-if="isAIFeatureEnabled"
+          :layout12="{ span: layoutFitsTwoColumns ? 4 : 12 }"
+          :layout8="{ span: 8 }"
+          :layout4="{ span: 4 }"
+        >
+          <h3 class="pb-2 pt-0 px-2">
+            {{ recommendationsSectionTitle }}
+          </h3>
+          <div class="my-3 px-2">
+            <ActionLink
+              :text="aboutRecommendationsText$()"
+              @click="handleAboutRecommendations"
+            />
+          </div>
+
+          <div class="ml-1">
+            <KCardGrid layout="1-1-1">
+              <RecommendedResourceCard
+                v-for="recommendation in displayedRecommendations"
+                :key="recommendation.id"
+                :node="recommendation"
+                :selected.sync="selected"
+                @change_selected="handleChangeSelected"
+                @preview="preview($event)"
+              />
+            </KCardGrid>
+          </div>
+          <div v-if="recommendationsLoading" class="recommendations-loader">
+            <KCircularLoader :shouldShow="recommendationsLoading" />
+          </div>
+          <div v-else-if="!recommendationsLoading">
+            <p v-if="loadMoreRecommendationsText.description" class="pb-0 pt-4 px-2">
+              {{ loadMoreRecommendationsText.description }}
+            </p>
+            <div v-if="loadMoreRecommendationsText.link" class="my-3 px-2">
+              <ActionLink
+                :text="loadMoreRecommendationsText.link"
+                @click="handleViewMoreRecommendations"
+              />
+            </div>
+          </div>
+          <div v-else-if="recommendationsLoadingError">
+            <p class="pb-0 pt-4 px-2">
+              {{ loadMoreRecommendationsText.description }}
+            </p>
+            <div class="my-3 px-2">
+              <ActionLink
+                :text="loadMoreRecommendationsText.link"
+                @click="handleViewMoreRecommendations"
+              />
+            </div>
+          </div>
+        </KGridItem>
+      </KGrid>
       <SavedSearchesModal v-model="showSavedSearches" />
+      <!-- About Recommendations Modal -->
+      <KModal
+        v-if="showAboutRecommendations"
+        :title="aboutRecommendationsText$()"
+        :cancelText="closeAction$()"
+        @cancel="closeAboutRecommendations"
+      >
+        <p class="pb-2">
+          {{ aboutRecommendationsDescription$() }}
+        </p>
+        <p>
+          {{ aboutRecommendationsFeedbackDescription$() }}
+        </p>
+      </KModal>
     </template>
   </ImportFromChannelsModal>
 
@@ -85,13 +166,19 @@
 <script>
 
   import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
+  import { computed } from '@vue/composition-api';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { RouteNames } from '../../constants';
+  import RecommendedResourceCard from '../../../RecommendedResourceCard/components/RecommendedResourceCard';
   import ChannelList from './ChannelList';
   import ContentTreeList from './ContentTreeList';
   import SearchResultsList from './SearchResultsList';
   import SavedSearchesModal from './SavedSearchesModal';
   import ImportFromChannelsModal from './ImportFromChannelsModal';
+  import { thumbnail } from './sampleData';
   import { withChangeTracker } from 'shared/data/changes';
+  import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+  import { searchRecommendationsStrings } from 'shared/strings/searchRecommendationsStrings';
 
   export default {
     name: 'SearchOrBrowseWindow',
@@ -101,6 +188,47 @@
       SearchResultsList,
       ChannelList,
       SavedSearchesModal,
+      RecommendedResourceCard,
+    },
+    setup() {
+      const { windowWidth } = useKResponsiveWindow();
+
+      const {
+        closeAction$,
+        tryAgainLink$,
+        viewMoreLink$,
+        noDirectMatchesMessage$,
+        showOtherResourcesLink$,
+        aboutRecommendationsText$,
+        showOtherResourcesMessage$,
+        showOtherRecommendationsLink$,
+        resourcesMightBeRelevantTitle$,
+        problemShowingResourcesMessage$,
+        aboutRecommendationsDescription$,
+        resourcesInChannelMightBeRelevantTitle$,
+        aboutRecommendationsFeedbackDescription$,
+      } = searchRecommendationsStrings;
+
+      const layoutFitsTwoColumns = computed(function() {
+        return windowWidth.value >= 960;
+      });
+
+      return {
+        closeAction$,
+        tryAgainLink$,
+        viewMoreLink$,
+        noDirectMatchesMessage$,
+        showOtherResourcesLink$,
+        aboutRecommendationsText$,
+        showOtherResourcesMessage$,
+        showOtherRecommendationsLink$,
+        resourcesMightBeRelevantTitle$,
+        problemShowingResourcesMessage$,
+        aboutRecommendationsDescription$,
+        resourcesInChannelMightBeRelevantTitle$,
+        aboutRecommendationsFeedbackDescription$,
+        layoutFitsTwoColumns,
+      };
     },
     data() {
       return {
@@ -109,11 +237,28 @@
         copyNode: null,
         languageFromChannelList: null,
         showSavedSearches: false,
+        importDestinationAncestors: [],
+        showAboutRecommendations: false,
+        recommendations: [],
+        otherRecommendations: [],
+        displayedRecommendations: [],
+        recommendationsLoading: false,
+        recommendationsLoadingError: false,
+        recommendationsPageSize: 1,
+        recommendationsCurrentIndex: 0,
+        recommendationsBelowThreshold: false,
+        showNoDirectMatches: false,
+        showShowOtherResources: false,
+        showViewMoreRecommendations: false,
+        otherRecommendationsLoaded: false,
       };
     },
     computed: {
       ...mapGetters('importFromChannels', ['savedSearchesExist']),
+      ...mapGetters(['isAIFeatureEnabled']),
+      ...mapGetters('contentNode', ['getContentNodeAncestors']),
       ...mapState('importFromChannels', ['selected']),
+      ...mapState('currentChannel', ['currentChannelId']),
       isBrowsing() {
         return this.$route.name === RouteNames.IMPORT_FROM_CHANNELS_BROWSE;
       },
@@ -135,6 +280,68 @@
           this.searchTerm.trim() !== this.$route.params.searchTerm
         );
       },
+      loadMoreRecommendationsText() {
+        let link = null;
+        let description = null;
+
+        if (!this.recommendationsLoadingError) {
+          if (this.showNoDirectMatches) {
+            link = this.showOtherRecommendationsLink$();
+            description = this.noDirectMatchesMessage$();
+          } else if (this.showViewMoreRecommendations) {
+            link = this.viewMoreLink$();
+            description = null;
+          } else if (this.showShowOtherResources) {
+            link = this.showOtherResourcesLink$();
+            description = this.showOtherResourcesMessage$();
+          }
+        } else {
+          link = this.tryAgainLink$();
+          description = this.problemShowingResourcesMessage$();
+        }
+
+        return {
+          link,
+          description,
+        };
+      },
+      shouldLoadOtherRecommendations() {
+        return (
+          (this.showNoDirectMatches || this.showShowOtherResources) &&
+          !this.otherRecommendationsLoaded
+        );
+      },
+      moreRecommendationsAvailable() {
+        const displayCount = this.displayedRecommendations.length;
+        const totalCount = this.recommendations.length + this.otherRecommendations.length;
+        return displayCount < totalCount;
+      },
+      browseWindowStyle() {
+        return {
+          width: this.isAIFeatureEnabled ? '1200px' : '800px',
+        };
+      },
+      firstAncestor() {
+        const ancestors = this.getContentNodeAncestors(this.topicId, true);
+        return ancestors?.[0] ?? null;
+      },
+      topicId() {
+        return this.$route.params.nodeId;
+      },
+      recommendationsSectionTitle() {
+        if (this.firstAncestor) {
+          return this.resourcesInChannelMightBeRelevantTitle$({
+            channelName: this.firstAncestor?.title,
+            topic: this.importDestination,
+          });
+        }
+        return this.resourcesMightBeRelevantTitle$({
+          topic: this.importDestination,
+        });
+      },
+      importDestination() {
+        return this.importDestinationAncestors.slice(-1)[0]?.title || '';
+      },
     },
     beforeRouteEnter(to, from, next) {
       next(vm => {
@@ -154,8 +361,18 @@
       }
       next();
     },
+    mounted() {
+      this.searchTerm = this.$route.params.searchTerm || '';
+      this.loadAncestors({ id: this.$route.params.destNodeId }).then(ancestors => {
+        this.importDestinationAncestors = ancestors;
+        this.loadRecommendations();
+      });
+    },
     methods: {
+      ...mapActions('channel', ['loadChannel']),
       ...mapActions('clipboard', ['copy']),
+      ...mapActions('contentNode', ['loadAncestors', 'loadPublicContentNode']),
+      ...mapActions('importFromChannels', ['fetchResourceSearchResults']),
       ...mapMutations('importFromChannels', {
         selectNodes: 'SELECT_NODES',
         deselectNodes: 'DESELECT_NODES',
@@ -213,6 +430,133 @@
             throw error;
           });
       }),
+      handleAboutRecommendations() {
+        this.showAboutRecommendations = true;
+      },
+      closeAboutRecommendations() {
+        this.showAboutRecommendations = false;
+      },
+      handleViewMoreRecommendations() {
+        if (!this.recommendationsLoadingError) {
+          const pageSize = this.recommendationsPageSize;
+          const currentIndex = this.recommendationsCurrentIndex;
+          const nextIndex = currentIndex + pageSize;
+          if (this.showViewMoreRecommendations) {
+            this.displayedRecommendations = this.recommendations.slice(0, nextIndex);
+            this.recommendationsCurrentIndex = nextIndex;
+            this.showViewMoreRecommendations = this.moreRecommendationsAvailable;
+          } else if (this.shouldLoadOtherRecommendations) {
+            this.loadRecommendations(true);
+          } else {
+            this.displayedRecommendations = [
+              ...this.recommendations,
+              ...this.otherRecommendations.slice(0, nextIndex - this.recommendations.length),
+            ];
+            this.recommendationsCurrentIndex = nextIndex;
+            if (this.showNoDirectMatches) {
+              this.showNoDirectMatches = this.moreRecommendationsAvailable;
+            }
+            if (this.showShowOtherResources) {
+              this.showShowOtherResources = this.moreRecommendationsAvailable;
+            }
+          }
+        } else {
+          this.loadRecommendations(this.recommendationsBelowThreshold);
+        }
+      },
+      async loadRecommendations(belowThreshold = false) {
+        if (this.isAIFeatureEnabled) {
+          this.recommendationsLoading = true;
+          this.recommendationsLoadingError = false;
+          try {
+            return this.fetchRecommendations(belowThreshold).then(async recommendations => {
+              return await this.fetchRecommendedNodes(recommendations).then(nodes => {
+                const recommendations = nodes.filter(Boolean);
+                const pageSize = this.recommendationsPageSize;
+                const currentIndex = this.recommendationsCurrentIndex;
+
+                if (belowThreshold) {
+                  this.otherRecommendations = recommendations;
+                  this.displayedRecommendations = [
+                    ...this.recommendations,
+                    ...this.otherRecommendations.slice(0, pageSize),
+                  ];
+                  this.recommendationsCurrentIndex = currentIndex + pageSize;
+
+                  const isEmpty = this.otherRecommendations.length === 0;
+                  if (this.showNoDirectMatches) {
+                    this.showNoDirectMatches = !isEmpty;
+                  }
+                  if (this.showShowOtherResources) {
+                    this.showShowOtherResources = !isEmpty;
+                  }
+                  this.otherRecommendationsLoaded = true;
+                } else {
+                  this.recommendations = recommendations;
+                  this.displayedRecommendations = this.recommendations.slice(0, pageSize);
+                  this.recommendationsCurrentIndex = pageSize;
+
+                  const count = this.recommendations.length;
+                  this.showNoDirectMatches = count === 0;
+                  this.showShowOtherResources = count > pageSize;
+                  this.showViewMoreRecommendations = currentIndex < count;
+                }
+                this.recommendationsBelowThreshold = belowThreshold;
+                this.recommendationsLoading = false;
+              });
+            });
+          } catch (error) {
+            this.recommendationsLoading = false;
+            this.recommendationsLoadingError = true;
+          }
+        }
+      },
+      // eslint-disable-next-line no-unused-vars
+      async fetchRecommendations(belowThreshold) {
+        // This is a placeholder for the api call that interacts with
+        // the recommender models based on current context. For now, we just
+        // load all local public nodes for visual testing purposes.
+        return this.fetchResourceSearchResults({
+          page_size: 25,
+          exclude_channel: this.currentChannelId,
+        }).then(response => {
+          const resources = response.results.filter(resource => {
+            return resource.kind !== ContentKindsNames.TOPIC;
+          });
+          return resources.map(resource => {
+            return {
+              id: resource.id,
+              node_id: resource.node_id,
+              main_tree_id: resource.root_id,
+              parent_id: resource.parent,
+            };
+          });
+        });
+      },
+      async fetchRecommendedNodes(recommendations) {
+        return await Promise.all(
+          recommendations.map(async recommendation => {
+            try {
+              // loadPublicContentNode is cached, so multiple calls shouldn't be an issue.
+              const node = await this.loadPublicContentNode({
+                id: recommendation.id,
+                nodeId: recommendation.node_id,
+                rootId: recommendation.main_tree_id,
+                parent: recommendation.parent_id,
+              });
+              const channel = await this.loadChannel(node.channel_id);
+
+              return {
+                ...node,
+                thumbnail_src: thumbnail[0], //Temporal. For visual testing of KCard thumbnail only.
+                channel,
+              };
+            } catch {
+              return null;
+            }
+          })
+        ).then(nodes => nodes.filter(Boolean));
+      },
     },
     $trs: {
       backToBrowseAction: 'Back to browse',
@@ -233,7 +577,7 @@
 <style lang="less" scoped>
 
   .v-form {
-    max-width: 900px;
+    max-width: 100%;
   }
 
   .searchtext /deep/ .v-input__append-outer {
@@ -253,4 +597,16 @@
     z-index: 3;
   }
 
+  .recommendations-loader {
+    margin-top: 24px;
+  }
+
+  .ai-browse-window {
+    width: 1200px;
+  }
+
+  .non-ai-browse-window {
+    width: 1000px;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/sampleData.js b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/sampleData.js
new file mode 100644
index 0000000000..c53aaad08a
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/sampleData.js
@@ -0,0 +1,3 @@
+export const thumbnail = [
+  'data:image/png;base64,R0lGODdh4gDiAIcAAP+/O/6+O/2+O/y9PPu8PPq8PPm7PPi6PPe6Pfa5PfW4PfS4PfO3PfK3PvG2PvC1Pu+0Pu60Pu2zP+yzP+uyP+qxP+mwP+iwQOevQOavQOWuQOStQOOsQeKsQeGrQeCrQd+qQd6pQd2pQt2oQtyoQtunQtqnQtmmQtimQ9elQ9ekQ9akQ9WjQ9SjQ9OiRNKiRNGhRNGgRNCgRM+fRM6fRc2eRcyeRcudRcucRcqcRcmbRsibRseaRsaaRsWZRsWYRsSYR8OXR8KXR8GWR8CWR7+VSL+VR76USL2TSLyTSLuSSLqSSLmRSbiQSbePSbaPSbWOSbSOSrONSrKMSrGLSrCLSq+KS66KS62JS6yIS6uHS6qHTKmGTKiGTKeFTKaFTKaETKWETaSDTaOCTaKCTaGBTaCBTaCATp+ATp5/Tp1+Tpx+Tpt9Tpp9T5p8T5l8T5h7T5d6T5Z6T5V5UJR5UJR4UJN4UJJ3UJB2UY91UY51UY50UY10UYxzUotzUopyUolxUohxUohwUodwU4ZvU4VvU4RuU4NtU4JtU4JsVIFsVIBrVH9rVH5qVH1pVHxpVXxoVXtoVXpnVXlnVXhmVXdmVnZlVnZkVnVkVnRjVnNjVnJiV3FiV3BhV29gV25fV21fWGxeWGteWGpdWGlcWGhbWWdbWWZaWWVaWWRZWWNYWmNYWWJXWmFXWmBWWl9WWl5VWl1VW11UW1xTW1tTW1pSW1lSW1hRXFdRXFdQXFZPXFVPXFROXFNOXVJNXVFNXVFMXVBLXU9LXU5KXk1KXkxJXktJXktIXkpHXklHX0hGX0dGX0ZFX0VFX0VEX0REYENDYEJCYEFCYEBBYD9BYD9AYT5AYT0/YTw+YTs+YTo9YTk9Yjg8Yjc7YjY6YjU6YjQ5YzM5YzI4YzE3YzA2Yy82ZC41ZC01ZCw0ZCszZCozZSkyZSgxZScxZSYwZSUvZiQvZiMuZgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAA4gDiAEAI/wABCBxIsKDBgwgTKlzIsKHDhxAjSpxIsaLFixgzatzIsaPHjyBDihxJsqTJkyhTqlw5UEa8lzBjypxJM+YyADhz6tzJs6fPn0BzxhtKtOhQKQCSKl3KtKnTp1CjSp1KtepTLPGyat3KNSu6FgDCih0LJZ7Zs2jTmnUHoK3bt3Djyp1LN268u3jz3pUCoK/fv4ADCx5MuLDhw4gT/x0Rr7Hjx47TZQBAubLly5gvo4nHubPnzgBCixZtYV2806hTq169+gWA17Bhx5tNu/ZsKQBy696dO4C4eMCDCx9OHDgpAMiTK1/OvLnz59CjK49Hvbr16ukAaN/Ovbv37+DDA//AFK+8+fPlJQBYz749+xPx4sufH38MgPsA4unfz1+/FIAABAqMV9DgQYPsACxk2HDhqXgRJU6UCMDiRYwZNW7k2NEjx3ghRY4UCQ/ASZQpVa5k2dLlS5cl2ghbF8/mTZw5bx4C0BNAPKBBhQKVAsBoPKRJlSINAcDpU6hRpU6FGs/qVaxZtWYF0NXrV7BhxYptEc/sWbRn36kA0NbtW7hx4aKLV9fuXbsA9Mbj29fv30EHAAwmXBhAPMSJFSM+BMAxgHiRJU+OLAUAgA3xNG/mHM8aANChRY8mXXp0PNSpVa9mvRrAa9ixZc+mXRt2kni5de/mrbvQDgDBhQc/0Cj/3nHkyZUffwPAOYBm8aRPpy4dwHXs2bWniNfd+3fvhwCMBxDP/Hn05qUAYA8ARzz48eXHRwDA/n389lHE49/fP8B48YwBKGjwIMKEChcybOiw4QN48SZSrGjxIsaJ0m4A6Ojx48cD8UaSLGnyZMkGA+KxbOmSJYCYAOLRrGmTphQAOnfyJBAoHtCgQocSHaoMANKkSpcyber0KdSoUqdSrWr1qtMeWrdy1QrgK9iwYseSLWv2LNq0ateybev2Ldy4YePRrWuXLoC8evfy7ev3L+DAggcTLmz4MOLEihfvjef4MWTHACZTrmz5MubMmjdjnnAlT7Bu8UbHA3cslZcK/wBWs27t+jXs2LJn065tOx7u3LpxIwHg+zfw4L7jES9unDiA5MnjMW/unDmA6ABWxKtu/Xp1ANq3c++uXU688OLHxzMC4PwEdPHWs2/fflalQoVgcYtn/z7+/E4A8O/vHyAAgQMJFjR4EGFChQsHxnP4EKJDJAAoVrR4kWI8jRs5agTw8WM8kSNJigRwEsCKeCtZtlwJAGZMmTNhyol3E2fOeEYA9Iz3E2jQoO4qADB6FGlSpUuZNnX6FGpUp/GoVrVKFQkArVu5dtUaD2xYsWABlC0bD21atWgBtAWwIl5cuXPjArB7F29eu3Li9fX7N54RAIMJE+YSD3FixYsZN/9GbAJAZMmTKVe2fBlzZs2bAcTz/Bn0ZwCjSZc2DSBeatWrVQNw7TpebNmzYwOwbTtebt27c6MC8Bt4cOHxiBc3XtwIAAXxmDd3Ho8WAOnTqVcHICBedu3bswPw/h18ePHjyZc3fx49gHPx2Ld3/x4+/Gfx6Ne3Hw9A/vzx+Pf3DzBePAAEC9aKhzChwoUMGZaLBzGixHhGAFgEICaexo0cO3r8CBKAyJEkS5o8iTKlypUsW7p8CTOmzJk0a9q8iTOnzp08e/r8CRTlu3gHABg9ijQpAHbYADh9CjUqgGewAFi9ijWr1q1cu3r9CvbqhXjxjgE4izat2rVs27p9Czf/rty51thFAIA3r954ngAAiGfsAYDBhAnjigcg8TNYAADEAwA5suTI8QAAwFUr3igAnDsD0KAOW7YfAEqbLg0vHoDV8eIJAAA7dmx41RQAuI07t27duI4B+A08uPDhxIsbP448ufLlwD/BAwAderx4AKpHcwUgu/bt2znFA/AMFgAA8QCYP4/+fDwAAHAdAwA/vnwA8QDYv48fQLw613IBAAhA4ECCBQ0eNIjrGACGDR0+hBhR4kSKFS1exAjRTLx4ADx+BLkkXjxde+DoihdPGwCWLJ/BAhAzwLp48UTRIUQrXjsAPeMBAIDrGACiRY0CiAdA6VKmAOLVARAVgKd4//Fe/XlDCl28cQC8fgUbVqxXXMcAnEWbVu1atm3dvoUbV+5cunXt3sWbV+9evn39/gUcWPBgwoUNH0acWPFixo0dP4YcWfJkypUtX8acObOANbe4xQMdOjS1LwIAnEadWvVq1q1dv4YdW/Zs2rVt38a9ekA83r19/wYeXPhvcSoAHEeeXPly5s2dN48XXfr06FIAXMeeXft27t29fwcfXvz47VbinUefPr0qAO3dv4cfH0A8+vXt3weQX/9+/v39AwQgcCDBggbjIUyoEKEUAA4fQowocSLFihYvYsyo8SGBeB4/gvzoBgDJkiZPokypciXJXPFewowpcybNmh0A4P/EGW8nz547pQAIKjQotXhGjyJNqnRp0jgAnkKNKnUq1apWr16Np3Ur162TAIANK3Ys2bJmz6JNazYe27Zu2R4CIBdAvLp279aVAmAvhnh+/wL2ywQA4cKGDxOOp3gxY8UfAECOLHky5cqWL2OmzCAe586eO7sBIHo06dKmTwOIp3o169VdAMCGLSse7dq2b+POrfsQgN4A4gEPLhy4FAAAmMRLrnx5PDIAnkOPLn06denxrmPPrn27dgDev4MPL348eQBX4qFPr169NQDu38OPLx9DvPr279+3BgBApnj+AcYTOHAgAIMHESY0GI9hQ4cMDwGQCCBeRYsXK0oBsJH/WTyPH0F6BDCSZEmTJOHFU7mSpbsEAGDGlDmTZk2bN3HmlBmPZ0+fP4EGFfqTCACjR40+ibeUaVOn8chBi/UuXlWrV7FifQWAK4B4X8GG/SoFQFmzAKLFU7uWbVu3b91uAzCXbl27d/Hm1buXb9+9MfB4OhePcOF40ijVALCYcWPHjyE3VnBnU6pntSS52TIAQGfPn0GHFj2adOnPFr5wovWr1yY7ZIYAkD2bdm3bt3Hn1r2bd2/fv4EHDx6PeHHjxAEkV76ceXPnz6FHlz6denXr17Fn1759eTzv38F7BzCefHnz59GnV7+efXv37+HHl/8+Xn379+sjAbCff3///wABAIhHsKBBggASJozHsKFDhgAiAlgRr6LFixUBaNzIsaNGOfFCihwZzwiAkygNxFvJsqXLlzBXEgBAs6bNmzhz6tzJs6dPm/GCCh0aFAmAo0iTKj0ar6nTp00BSJUar6rVq1UBaAWwIp7Xr2C9AhhLtqzZsXLiqV3LNp4RAAAKxJtLt+5cAHjz6tUrJJ7fv4Dj5QJAuLDhw4gTK17MuLHjeJAjS4aMBIDly5gzW47HubNnzgBCh45HurRp0gBSA1gRr7Xr160ByJ5Nu7ZsOfFy694dzwiA3wBQxBtOvLjx48cHGQDAvLnz59CjS59Ovbp16fGya9+eHQyA7+DDi/8HICGe+fPozQNYvz6e+/fw3QOYD2BFvPv4898HwL+/f4AABA4EkCveQYQJ4xkB0NDhQ4gRG15RF8/iRYwZLWoB0NHjR5AhRY4kWdKkSSnxVK5kyTIJAJgxYwZwF8/mTZw5AezcGc/nT6A+AQwdCi/eUaRJkWISAMDp06cY4k2lWtWqEQAAhMXj2tUrVwBhxY4l6yjeWbRp4xEC0NbtW7hx5c6lW9fuXbcW4u3l29fv3ycABOOKV9jw4XgAFCuO19jx48YAJE+e7CjeZcyZNW8mAMBzPNChRcczAsD0adMr4q1m3dr169fqAMymXdv2bdy5de/m3dv3b+DBhQ8nXtz/+HHkyZUvZ97c+XPo0X/H0wPA+nXs1ynFCwLA+3fw4b0/gwXA/Hn06dWvZ9/e/Xv36hoNAFAfAK5jAPTv59/fP0AAAgcSLGjwIMKEChcyPAgkXiQAEidKjOcAwJd4ADZy7NgxXjwAz2ABABAPAMqUKlPGAwAA1zkAMmfSBBAPAM6cOgHEq3MlHoCgQocKbRFPFICkSpcyXYrrGICoUqdSrWr1KtasWrdy7Tr1QbxSAADEA2D2LLxaANaybbtWU7wUAJ7BAgAgng0AevfyBRAvHgAAuI4BKGz4MIB4ABYzbgwgXh0A8coAqGz5cmV48QBw7uz582dcxwCQLm36NOrU/6pXs27t+jXs2LJn065t+zbu3Lp38+7t+zfw4MKHEy9u/Djy5MqXM2/u/Dn06NKnU69u/Tr27Nq3c+/u/Tv48OLHky9fPQKxeOrXs2/vPt4tKADm069v/z7+/Pr344/nH2A8gQMHSgFwEGFChQsZNnT4EGJEiRMlznkXD2NGjRs5dvQYbwYAkSNJljR5EmVKlfFYtnTJUgoAmTNp1rR5E2dOnTt59vSZ84W6eEOJFjV6FGlSpQCYNnX6FGpUqVOjxrN6FatVKQC4dvX6FWxYsWPJljV7Fm3YZPHYtnX7FhMAuXPp1p27JF5evXv3wiMBAHBgwYMJFzZ8WHA8xYsZK/+WAgByZMmTKVe2fBlzZs2bOU9mFw90aNGiAZQ2fRp1atTxWLd23ZoPANmzac9OUatdPN27effWDS8NAOHDiQ+Pdxx58uNSADR3/hw6gBjd4lW3fv26u1UFAHT3/h18ePHjyZc3Pz5eevXr1wNw/x5+fPnz6dd/T6NdPP37+ff3DzCewIEE433LACChwngMGzpkKAWAxIkTMcS7iDGjxo0cL5YBADKkyJEkS5o8iTIlgFbxWrp86RKAzJk0a9q8iTOnTHjxevr86VMJgKFEiT6IhzSpUqUAmjaNBzWqVKhSAFi9SiGe1q1cu8bz5gtTrnhky5o9SxaA2rVs27p9Czf/rty48eravWs3GIC9fPv6/Qs4sGAA8QobPlx4FoDFjBs7jgc5smTIhwBYBhAvs+bNmaUA+AygVrzRpEuPpgQgterVq4XEew079msmAGrbvo07t+7dvHvrjgc8uPDgvAAYP448ufLlzJs7f748nvTp1KcfAoAdQLzt3LtvlwIg/LN45MubJw8gvfr17NXn6AE/vvweGgBQuo8/v/79+gH4BwhA4ECCBQ0eHIgr3kKGDRkCgBhR4kSKFS1etBhAhah4HT1+BBlSZMdDAEwCiJdS5cqUUgAAGBBP5kya8UYBwJlT506ePXfGAxpU6FCiQwEcRZpU6VKmTOM9hRo1KgCq/1WtXsWaFUA8rl29diUAQGygeGXNnkWb1iwpAPHcvoXr9hAAugDi3cWb964UAACyxAMcWHA8OgAMH0acWPHixPEcP4YcWXJkAJUtX8acWfNmd/E8fwYNWgAA0qVNn0ZdOkw81q1dty4CAMCmeLVt3679C8Bu3r19xwMeXDjwQwCMA4iXXPny5FIAPI8XXfr06GEAXMeeXTv2ELC8fwcPqxIA8uXNn0efXv169uyHxYMfX/78agDs38ef//6weP39A4wncKDASgAOiouncCHDeLYAQIwocSKAIPEuYsx48RCAjgDigQwpEqQUACYDxEupcmVKcwBewowpE8CUeDZv4v+MhwUAz54+fwINKnQo0aI9gcRLqnQp06ZOnz4dAGDq1CLxrmLNilUVgK5evwLwFm8s2bJmMwFICyAe27Zu2UoBIFduhXTx7uLNm7fXBgB+AQARFG8w4cKFpQFIrHgx48aOH0OOLBlyiHiWL2POrHkz5xcAPoMODSBHvNKmT6NOrXr1aQCuAcSLLXt2bCkAbuPGXS4e796+fwMPztsOgOLGjyNPrnw58+bOnys/FG869erWr8fbcwEA9+7ev4MXgC4e+fLmz5PHAmD9+nju38N3rwwA/Xj27+O3LwUA//7+AQIQCGDBm3gHESZUiFAUAIcPIUaUOJFiRYsXMWbUuJH/Y0ePH0GGFDmSZEmTJzPGU7mSpUoAL2HGlDmTZk2bN3Hm1LmTZ0+fP4EGjRmPaFGjRAEkVbqUaVOnT6FGlTqValWrV7Fm1bp1aTyvX8F6BTCWbFmzZ9GmVbuWbVu3b+HGlTuXbt2y8fDm1YsXQF+/fwEHFjyYcGHDhxEnVryYceJ4jyFHfowEQGXLlzFXjreZc+fNAECDjjeadOnRAFADWBGPdWvXrAHElj2bdmw58XDn1h3PCADfv4EbiTeceHHjx+MZCQCAeXPnz6FHlz6denXr0eNl1749OxIA38GHF/89Xnnz58sDUK8+Xnv379sDkA9gRTz79/HbB7Cff3///wABAJATr6DBg/GMAFi48FS8hxAjSpxIMWIgABgzatzIsaPHjyBDiswYr6TJkyWRAFjJsqXLlfFiypwZE4BNm/Fy6tyZE4BPACviCR1KVCiAo0iTKj0qJ57Tp1DjGQFANZ7Vq1itogPAtatXrtziiR1LViyAs2jTql3Ltq3bt3DjAohHt65dukgA6N3Lt6/eeIADCwYMoHDheIgTK0YMoDGAFfEiS54cGYDly5gzW5YTr7Pnz/GMAAAQI57p06hNgwDAurVr14biyZ5NOx6A27hz697Nu7fv38CDxxtOvPhwJACSK1/OPHm859CjPwdAnXq869izXwfAHcCKeODDi/8HD6C8+fPoy8uJx769+3hGAMiPR7++/fv217kRAKC/f4AABA4kWNDgQYQJFS5kuDDeQ4gRHyIBUNHiRYwV423k2HEjAJAg440kWXIkAJQAVsRj2dIlSwAxZc6kGVNOPJw5dcYzAsDnzyPxhA4lWtToUaHQACxl2tTpU6hRpU6lWrVpPKxZtWJFAsDrV7BhvcYjW9YsWQBp08Zj29YtWwBxAayIV9fu3boA9O7l21evpHiBBQ+OZwTAYcSJFQv4AyveY8iRJU9+7A7AZcyZNW/m3NnzZ9Ch440mXXp0LwCpVa9mDQBVPNixZcMGULt2PNy5deMG0BtAhHjBhQ8PbgH/wHHkyZVnidfc+fPmRgBMp17d+nXsANrF497de3cA4cWPJ1/e/Hn06dWrJxbP/Xv47r0pAFDf/n378fTv588fAEAAAgHEK2jwYEEAChXGa+jwoUMhACZSrEjRXbyMGjdqNAIAQLyQIkeGBGDyJMqUJuOxbOmSJYCYMmfSrGnzJs6cOneuiOfzJ9CgQocSBQrg6NF4SpcyVQrg6dMA8aZSrWr1KtasVY0A6AovHtiwYsPCKwLgLNqzf+Kxbeu2rTsAcufSrWv3Lt68evfynWsrHuDAggcTDiwIAK54ihczjgfg8eN4kidTlgzgMubL8TZz7uz5M+dgAADEK236dDwj/wBWs54V7zXs2LJn04YtDQWA3Lp38+7t+zfw4MKHB0/CLR7y5MqRB0oA4Dn0J2imU6+OBgB27Gi2c+++HQD48OLD73kX7zz69PHYXQDg/j0ANPLn00fDAQD+/PrxC6jBDGA8gQMJFozXyQEAhQsZNnT4EGJEiRMpVrR4EWNGjRs5dvT4EWRIkSNJljR5EmVKlStZtnRJclI8PQBo1rR5s2a8LgB49vT58xksAEOJFjV6FGlSpUuZNnX6FGpUqVOjJjDHDkBWrVu5iogHAGxYsWPBPoMFAG1atWvZtnX7Fm5cuQBWxItXANcxAHv59vX7F3BgwYMJFzZseEE8AwAYN/92DIBCPF4AAByKF08LAM0AqMSLlwhAaADPYAEAEA9AatWrVccDAABXLQA04qkBcNuAsnjlAACwFU9VAADD2cRzFQBAcgAC4sHzIQBA9AbT4ukAcB17du3bAeA6BgB8ePHjyZc3fx59evXr2QOIFw9AfPnyMcUDACCeDwD7+fffDzBFvEEAnsECACAegIUMGzKMBwAArngAKlq8KCCeFAAcO3a8EE8LgHgmAJg8idLktngDALh8CTMmTFzHANi8iTOnzp08e/r8CTSo0JvxIAA4elRFvD8AAIQ7BSCq1KlTF8UD8AwWAADxAHj9CvZrPAAAcB0DgDatWgDxALh9Cxf/QLw63eLZvYs3r10AfPv6/esX1zEAhAsbPow4seLFjBs7fgzZcDxIACrP2jYAgGYX8QB4/gwadLx4AJ7BAgAgHoDVrFuvXhEPAABcxwDYvo0bQDwAvHv7BhCvzpF4AIobP25cwbE5AJo7fw79Oa5jAKpbv449u/bt3Lt7/w4+PHZC8UDEIwIgvXoAr+LZAgA/PvwB8WYBuP8MFgAAE+LJAAhA4ECB3uIBiAcAAK5jABw+hAggHgCKFS0CiFcHAIB28ZgAABkSJIN4gwCcRJlS5UpcxwC8hBlT5kyaNW3exJlT506ePX3+BBpU6FCiRY0eRZpU6VKmTZ0+hRpV6lSq/1WtXsWaVetWrl29fgUbVuxYsmXNnkWbVu1atm3dvoUbV+5cunXt3sWbV+9evn39/gUcWPBgwoUNH0acWPFixkwLcYsXWfJkypMfAcCcWfNmzp09fwb9Od5o0qVHSwGQWvVq1q1dv4YdW/Zs2rVtqyaELt5u3r19//69CcBw4sWNH0eeXPly4/GcP4fuXAoA6tWtX8eeXft27t29fwcfflo88uXNn0efPn0EAO3dv4cfX/58+vUBxMOfXz9+KQD8AwQgcCDBggYPIkyocCHDhg4TDogncSLFihYvYpzoDgDHjh4/ggwpciTJeCZPojQpBQDLli5fwowpcybNmjZv4v+sGW8nz54+fwINGnQAgKJGjyJNqnQpU6XxnkKN+lQKgKpWr2LNqnUr165ev4INyxVbvLJmz6JNG2xWp2Pw4sGNK3fuXAUA7uLNq3cv375+98YLLHhwYCkADiNOrHgx48aOH0OOLHly43iWL2POHG/dAQCeP4MGLQRbvNKmT6OGAWA169auX8OOLdt1vNq2b9eWAmA3796+fwMPLnw48eLGjwOPp3w58+aCAECPLn36dHXxrmPPnt0RgO7ev4MPL348+e/xzqNPf14KgPbu38OPL38+/fr27+PPDx9IvP7+AcYTOFAgNwAHESZUuPBgAmXxIEaUGPEAAIsXMWa86OL/TiNTvaxBAwZr0h0hCwCkVLmSZcp4L2HGfCkFQE2bN3HeFLDBCyhcxKa5ctQHCwCjR5EmVbqUaVOnT6EajTeVatWqlgBk1bqVa1euweKFFTs2rDsAZ9GmncAnXlu3b+HGdcvODwC7d/HG07uXr14pAAAHFhy4wbd4hxEnVrx4BQDHjyFHljyZcmXLlyXXireZc2fOGwCEFj2adOnSAuKlVr1aNQDXr10Tijebdm3bt3HPtgaAd2/e8YAHFw5cCgDjx5ED0BOPeXPnz6FDvwGAenXr17Fn176de/fq8cCHFx8+GADz59GnV7+efXvzG+LFlz+ffn379wHk1x+Pf3///wDjxZMCoKDBghriKVzIsKHDhw0BSJxIsaLFixgzatzYJZ7HjyA/DgBAsqTJkyhTqlwJ4EO8lzBjyoxnTZeuZe/i6dzJs2c8dgCCBo1HtKhRolIAKF0KgFG8p1CjSp1KlaoCAFizat3KtavXr2C/notHtqzZsgDSql3Ltq3bt3ABJIhHt67dugDy6t2rN57fv4D/ngBAGEC8w4gTH5YCoHHjHvEiS548edkBAJgzA1DgLp7nz6A/hwFAurTp06hTq17NWnW817Bjw+YGoLbt27hz697NG8C0eMCDCwcOoLjx48jjKV/OXPkcANABxJtOvfp0KQCyAxgQr7v3795JAP8YT778eALx0qtfrx6A+/fw48ufT7++ffrx8uvfr78UAIAABA4kWNDgQYQJ4y1k2HDhFAARJU6kGM/iRYwWDwHgCCDeR5AhP0oBUBJAPJQpVaYE0NLlS5gAgMSjWdNmvF4AdO7k2dPnT6BBhf6MV9ToUaOfACxl2tTpU6hRpU6lCvVAPKxZtWI9BMArgHhhxY4NKwXAWSrx1K5lq1YAALhx5c6FG8/uXbx2ewDg29fvX8CBBQ8mDDjeYcSJEWcD0NjxY8iRJU+mXNnyYyKZ4m3m3LnzIQChAcQjXdo0aSkAVMdj3do160cAZM+mXdv2bdrxdO/m3dt3bwDBhQ8nXtz/eHF38ZQvZ74cwHPo0aVPp17d+vXoBoQA8uUt3nfw4cWPj3cIwHkA8dSvZ69eCgD48eTPpx+P3QAA+fXv59/fP0AAAgHEK2jwIMKECAEwbOjwIcSIEN3Eq2jxosUBADZy7OjxI0gAX/6QLGmS5BMAKlcC6BLvJcyYMmfSnHkIAE4A8Xby7LlTCgAAJeIRLWo0nh8ASpcyber0adN4UqdSrWq1KoCsWrdy7erVa7ywYseOBWD2LNq0atcCiOf2Ldy3HgDQBfAuHt68evfyzasqHuDAggEfAmAYQLzEihcnlgIAAJl4kidTjncGAObMmjdz7rw5HujQokeTHg3gNOrU/6pXs2YtLB7s2LJjjwBg+zbu3Lp1M4nn+zfw3wCGh4hn/Djy5MfdsTrUIwCA6ADiUa9unfohANoBxOvu/Xt3KQAAFIln/jz6eI8AsG/v/j38+O/j0a9v/z7++wD28+/vHyAAgQMJFjQYD2FChQsBNHT4EGLEhwTiVbR40WIkAACOxPP4EeRHLABIljRpMl5KlStTHgLwEkA8mTNpypQCAGc8nTt56mwBAGhQoUOJFjV6FGlSpUuDEon3FGrUqO0AVLV6FWvWqnXidfX69SsAAE7ilTV7tqwLAGvZtnULIF5cuXPjHgJwF0A8vXv56pUCAHA8wYMJC0YHAHFixYsTQ/+K9xhy5HhqAFS2fBlzZs2bOXfuHA90aNGjdzkAcBp1atWoEcRz/Ro27HYVAABIFg93bt3xoAHw/Rt4cAAK4hU3frz4IQDLAcRz/hy6cykAqMeIdx179uuDAHT3/h1893jjyZePBwlAevXr2bd3/x5+fPkA4tW3fx9/fRoA+Pf3DxCAQACC1MU7iDChQgAMAcR7CDHiQ2UAKlq8iBEAu3gcO3rkeAiASADxSpo8WVIKgJUA3MV7CTPmyyUAatq8eRNPvJ08e+4EADSo0KFEixo9ijRpUGTxmjp9CjWq1KlU2wG4etVTvK1cu26lACCs2LFiA8Q7izZtWkUA2gKIBzf/rly4UgDYtfsunt69fPcCAQA4sOAy8QobPmyYAYDFjBs7fgw5suTJlB3Hu4w5s+bNnDtztgYgtGgD5eKZPo36tBUArFuzPsAqnuzZtGvH+wQgN4B4vHv75i0FgPDhUuIZP448ebxosEg5iwc9uvTp8XoAuI49u/bt3Lt7/w6++7t45MubP48+vXryUwC4fw8/nvz59Ovbv4+f/jcA/AHEAxhP4ECC8aQAQJgQIbp4DR0+hBhRIkQAFS1exJhR40aOHT1+TBVP5EiSJU2eNGkMwEqWLVnGgxlT5kyaNOnEw5lTJ04APQHEAxpUKFApAIwePcoi3lKmTZ0+hboUwFSq/1WtXsWaVetWrl2tJhkWT+xYsmXNln23AcBatm3drjXQLt5cunXt3k0GQG88vn398m0AQHA8woUNE5YCQPFixooLmIsXWfJkypXjQasBQPNmzp09fwYdWvRo0qOPmIqXWvVq1qrLFQEQW/Zs2rVlDzAVT/du3rydbQAQXLgmVcWNHy8OQLkq5s2dM9cBQPp06tUB6PgWT/t27tybMQIQXvx48uXNn0efXv169u3dv4cfX/58+vXt38efX/9+/v39AwQgcCDBggYPIkyocCHDhg4fCowncSJFiQAuYsyocSPHjh4/ggwpciTJkiZPokyZMR7Lli5ZAogpcybNmjZv4v/MqXMnz54+fwINKnTozHhGjyI1CmAp06ZOn0KNKnUq1apWr2LNqnUr165N44ENKxYsgLJmz6JNq3Yt27Zu38KNK3cu3bp2756Np3cvX70A/gIOLHgw4cKGDyNOrHgx48aOH0OOHDge5cqWKQPIrHkz586eP4MOLXo06dKmT6NOrXr15niuX8N2DWA27dq2b+POrXs3796+fwMPLnw48eK14yFPrhw5gObOn0OPLn069erWr2PPrn079+7evz+PJ348efEAzqNPr349+/bu36u30Cke/fr27a8KA2A///7+AQIQOJBgQYMHESZUuBBhPIcPITpEAoBiRYsXKcbTuJH/o0YAHz/GEzmSpEgAJwGsiLeSZcuVAGDGlDkTppx4N3HmjGcEQE+fPUPEEzqUaFGjRZEBULqUaVOnT6FGlTqVqtN4V7FmvYoEQFevX8F2jTeWbNmxANCijbeWbdu1AOACWBGPbl27dAHk1buXb1458QAHFhzPCADDh4fFU7yYcWPHjxU/AzCZcmXLlzFn1ryZc+fK8UCHFg0aCQDTp1GnNh2PdWvXrAHEjh2Pdm3btAHkBrAiXm/fv3sDED6ceHHhcuIlV748nhEAzwFMiDedenXr17FfPweAe3fv38GHFz+efHnz3OOlV78+PRIA7+HHl/8+Xn379+sD0K8/Xn///wDjCRwIoCCAFfESKlyYEIDDhxAjOpQTr6LFi/GMANjoLJ7HjyA9+iEAoKRJk4viqVzJciWAlzBjypxJs6bNmzhzAojHs6dPnkgACB1KtKjQeEiTKkUKoGnTeFCjSoUKoCqAFfGyat2aFYDXr2DDepUTr6zZs/GMAFgbr63bt20NAJhLty5dePHy6t0bDwiAv4ADCx5MuLDhw4gTx1vMuPFiJAAiS55MOXK8y5gzXwbAmXO8z6BDfwZAGsCKeKhTq0YNoLXr17Bby4lHu7bteEYAABARr7fv370BCB9OvPireMiTK48HoLnz59CjS59Ovbr16/Gya9+eHQmA7+DDi///Hq+8+fPlAahXH6+9+/ftAcgHsCKe/fv47QPYz7+/f4AAAMiJV9DgwXhGAADgEM/hQ4gPBQCgWNHiRYwZNW7k2NHjR4/xRI4kKRIJAJQpVa5EGc/lS5guAcycGc/mTZw2AewEsCLeT6BBfwIgWtToUaJy4i1l2jSeEQBR402lWtXqVF98DADg2tXrV7BhxY4lW9bsWbDx1K5lqxYJALhx5c6FG8/uXbx2AezdG8/vX8B+AQwGsCLeYcSJDwNg3NjxY8Zy4k2mXDmeEQCZtcTj3NnzZ9Ccx8kJAMD0adSpVa9m3dr1a9iw482mXXs2EgC5de/mnTveb+DBfwMgTjz/3nHkyY8DYA5gRTzo0aVDB1Dd+nXs1eXE497dezwjAMSLzxTP/Hn06dWvjwetAQD48eXPp1/f/n38+fXPj9ffP8B4AgciAWDwIMKEBuMxbOiQIYCIEeNRrGiRIoCMAFbE6+jxY0cAIkeSLClSTryUKlfGMwLgJUwArOLRrGnzJs6cNC8dAODzJ9CgQocSLWr0KFKf8ZYybboUCYCoUqdSjRrvKtasVwFw5RrvK9iwXwGQBbAiHtq0atECaOv2Ldy2fOLRrWs3nhEAevfyBbCgEbR4ggcTLmzY8AAAihczbuz4MeTIkidTjmf5MmbLTQBw7uz5M+d4okeTFg3g9Ol4/6pXs1YN4DWAFfFm0649GwDu3Lp34+4U7zfw4PGMAChu/Dhy4yw8xWvu/Dn06PEAUK9u/Tr27Nq3c+/uPR748OLB4wFg/jz69AC2xGvv/n17APLlx6tv/359APoBlIjnH2A8gQMHAjB4EGFCAA/iNXT4sKERABMpVrR40SKBSvE4dvTocR0AkSNJljR5EmVKlStXxnP5EqbLcABo1rR5EwC4eDt59twJACjQeEOJFh0KACkABPGYNnXKVAcAqVOpVq0UD2tWrViNAPD6FWxYsWMBmEAXD21atWgBtHX7Fm5cuXPp1rVrN15evXv1GgDwF3DgwFTiFTZ82DAAxYrjNf92/LgxAMmS41W2fNkyAM2bOXOmEA90aNGhjQAAEA91atXx2gFw/Rp2bNfxaNe2TRtAbt27eff2/Rt4cOHC78Qzfhz5cXgAmDd3DuBHunjTqVevDgA79njbuXffDgA8+HjjyZcvPwBAevXrASSL9x5+/PhGAACIdx9//vuZAPT3DxCAwIEDOcQ7iDBhvF0AGjp8CDGixIkUK1q8qCyexo0cOZZjAiAkgAE2gsU7iTKlypMAWraMBzOmTJgAatbsEy+nzp08Z1UAABQACFTo4hk9ijRpPCMAAGSIBzWqVKjuAFi9ivWqu3hcu3rlOgCA2LFky5o9izat2rVsAcR7Czf/rty5dOvGBYAXb7y9fPvuBQA4cLzBhAsbPow4cWEjABp3OBcvsuTJlCtbvswBgObNnDt7/gw6tOjRpDUfiIc6terVrFfvwBUvtuzZ8QDYth0vt+7duQH4/g3gUbzhxIsbP168EIB4zJs7j2cEgHTpxOJZv449u/bt2isA+A4+vPjx5MubP48+vXhs8dq7fw8/Pjw9AADgioc/v/54APr3BxhP4ECCAgEcRHhQQDyGDR0+hBiPFgCK8SxexBjPCACOHQFMQRdP5EiSJU2eFARA5UqWLV2+hBlT5kyaMo3Ew5lT506c5gYAAAoAVzyiRY3GA5A0aTymTZ0yBRBV6tQO//GsXsWa1Sq8SwC8eo0XVuzYeEYAnEWb9kg8tm3dvoXL9lsCAHXt3sWbV+9evn39/gWMt0EMImgazbkSAsBixo0dP4YcWfJkABh8iKlTSM0LAJ09fwYdWvRo0CKkqLEDKREcLEkGAIAdW/Zs2rVt38adW/du3r19/wYeXPhw4sWNH0eeXPly5s2dP4ceXfp06tWtX8eeXft27t29fwcfXvz44XYIbQCQXv169uoZeQEQX/58+m+8AMCfX/9+/v39AwQgcCDBggYPIkyocCHDhg4fQnQYIF48ABYvYsxosUk8AB4/ggwJ4BksACZPokypciXLli5fwkTZJ94xADZv4v/MqXMnz54+fwIN+vNKvFMAjiJNqhRAvBAAnkKNKhXAM1gArmLNqnUr165ev4INexVLvFzEjgFIq3Yt27Zu38KNK3cu3bk64gHIq3fv3gDV0gEILHgw4cDPYAFIrHgx48aOH0OOLDlylW3x4nkCAADXMQCeP4MOLXo06dKmT6NOndpWPACuX8N+HS8egNoAsLiLpzueOywDAAAH/gwWAADxACBPrjx5PAAAcNUCAGDAtXjW44UzAGA7gAG64oEHrwQA+fLkwcCLp159KQDu38OPL/89rmMA7uPPr38///7+AQIQOJBgQYMHESZUWDCeEwAPIUYEgCaeFwAD4sVzAoD/Y0ch2eINADDyGSwAAOIBULmS5cp4AADgqvWCnC8AN28OiBcvQoB46AAEFXor3hwARwd8itcCQFOnCdy1AzCValWrVwHgOgaAa1evX8GGFTuWbFmzZ9F+iNcLQFu3bgXEGwAAVDwAd/HmvRuPFAAAz2ABABAPQGHDhw3HAwAAFzsrACBHjmwl3joAlzFjdhOPAgBP7EwAED2aNIF47gCkVr2aNWtcxwDElj2bdm3bt3Hn1r2bd28A6OIFADCc+PBzvQAEiBcAQHPnz53HCwfgGSwAAOIB0L6d+/Z4AADgigeAfHnzAOJhALCePfsE8dYEiAeAfn379RXFgwGAf3///wABCBw4ENcxAAgTKlzIsKHDhxAjSpxIEaGfeAAyagTAJh4AAL6YARhJsmRJWfEAPIMFAEA8ADBjyowZDwAAXMgA6NzJE0A8AECDCgUQrw4ucgCSKl26NBk3AFCjSp0qFdcxAFizat3KtavXr2DDih1LNms8MQDSpiUUbwQAAO0uAZhLt25dPvECPIMFAEA8AIADCw4cDwAAXMcAKF7MGEA8AJAjSwYQrw67dNkya97MORuAz6BDiw6N6xiA06hTq17NurXr17Bjy56NekC8AAByL4j3CYBvT+wACB9OnLi4eACewQIAIB6A59CjQ48HAACuYwCya98OIB6A7+DDA/+IV6dVOQDo06tfz759e1zHAMifT7++/fv48+vfz7+/f4AABAIQE68JAADxSABgyDBeDgARJU6MaCLeIwDPYAEAEC8BAJAhRQLIFQ8AAFzHAKxk2RJAPAAxZc4EEK8OgHgOAOzk2XOnrXgcAAwlWtRoUVzHACxl2tTpU6hRpU6lWtXqVafx4gFIpA7AV7Ai4kEAUNbs2QHxSgAA8AwWAADLtAGgW9fuk0rxAADAdQzAX8CBAcQDUNjwYQDx6gBQEy8SAMiRJT+Jhw3AZcyZNWvGdQzAZ9ChRY8mXdr0adSpVa8ePYxbPACxZcsuFS+eFAC5ATCJFw8VAOAAnsECUDzLTrx4PgAsB9AlniEBAOIBAIDrGADs2bUDiAfA+3fwAOLVAVBeRTxrEACsX18qHikA8eXPp18fAK5jAPTv59/fP0AAAgcSLGjwIMKEChcybOhwgaBavgYtAGDxIsaMRzwNQ1UmAICQIkeSLGny5EgmelrNeqQlAICYMmfSrGnzJs6cOnfy7OnzJ9CgQocSLWr0KNKkSpcyber0KdSoUqdSrWr1KtasWrdy7er1K9iwYseSLWv2LNq0ateybev2Ldy4cufSrWv3Ll60AQEAOw==',
+];
diff --git a/contentcuration/contentcuration/frontend/shared/i18n/index.js b/contentcuration/contentcuration/frontend/shared/i18n/index.js
index f6a2ebf17f..d391bd97b8 100644
--- a/contentcuration/contentcuration/frontend/shared/i18n/index.js
+++ b/contentcuration/contentcuration/frontend/shared/i18n/index.js
@@ -129,13 +129,16 @@ class Translator {
    * @param {object} defaultMessages - an object mapping message ids to default messages.
    */
   constructor(nameSpace, defaultMessages) {
-    this.nameSpace = nameSpace;
-    this.defaultMessages = defaultMessages;
+    this._nameSpace = nameSpace;
+    this._defaultMessages = defaultMessages;
+    for (const key in defaultMessages) {
+      this[`${key}$`] = this.$tr.bind(this, key);
+    }
   }
   $tr(messageId, args) {
     return $trWrapper(
-      this.nameSpace,
-      this.defaultMessages,
+      this._nameSpace,
+      this._defaultMessages,
       Vue.prototype.$formatMessage,
       messageId,
       args
diff --git a/contentcuration/contentcuration/frontend/shared/mixins.js b/contentcuration/contentcuration/frontend/shared/mixins.js
index 58cc27b727..75dbf5ec7e 100644
--- a/contentcuration/contentcuration/frontend/shared/mixins.js
+++ b/contentcuration/contentcuration/frontend/shared/mixins.js
@@ -713,8 +713,8 @@ export const metadataTranslationMixin = {
       } else if (nonconformingKeys[camelKey]) {
         key = nonconformingKeys[camelKey];
       } else if (
-        !metadataStrings.defaultMessages[key] &&
-        metadataStrings.defaultMessages[camelKey]
+        !metadataStrings._defaultMessages[key] &&
+        metadataStrings._defaultMessages[camelKey]
       ) {
         key = camelKey;
       }
diff --git a/contentcuration/contentcuration/frontend/shared/strings/searchRecommendationsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/searchRecommendationsStrings.js
new file mode 100644
index 0000000000..85614f7dd8
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/strings/searchRecommendationsStrings.js
@@ -0,0 +1,158 @@
+import { createTranslator } from 'shared/i18n';
+
+export const searchRecommendationsStrings = createTranslator('SearchRecommendationsStrings', {
+  aboutRecommendationsText: {
+    message: 'About Recommendations',
+    context: 'A title that introduces how the recommendation system works',
+  },
+  aboutRecommendationsDescription: {
+    message:
+      'Our recommendation system learns from the titles and descriptions of what you already have in your channel, and uses that to show you other potentially relevant resources across the Kolibri Library.',
+    context: 'A description that explains how the recommendation system works',
+  },
+  aboutRecommendationsFeedbackDescription: {
+    message:
+      'Interacting with these recommendations, whether by using them or marking them as not relevant, will help us improve the quality of the recommendations you see.',
+    context:
+      'A description that explains how the user can help improve the quality of the recommendations',
+  },
+  goToLocationText: {
+    message: 'Go to location',
+    context: 'A label for an action that takes the user to a specific location',
+  },
+  resourcesMightBeRelevantTitle: {
+    message: "These resources might be relevant to '{ topic }'",
+    context:
+      'A title for a list of resources that might be relevant to the user for a currently viewed channel',
+  },
+  viewMoreLink: {
+    message: 'View more',
+    context: 'A label for a link that takes the user to a page with more information',
+  },
+  resourcesInChannelMightBeRelevantTitle: {
+    message: "These resources in { channelName } might be relevant to '{ topic }'",
+    context:
+      'A title for a list of resources that might be relevant to the user for a currently viewed channel based on a specific topic',
+  },
+  showOtherResourcesLink: {
+    message: 'Show other resources anyway',
+    context: 'A label for a link that shows the user other resources that might not be relevant',
+  },
+  showOtherResourcesMessage: {
+    message: "We can show you other resources, but they might not be what you're looking for",
+    context:
+      'A message that explains to the user that there are other resources available, but they might not be relevant to their search',
+  },
+  tryAgainLink: {
+    message: 'Try again',
+    context:
+      'A label for a link that allows the user to try loading recommended resources again after an error',
+  },
+  problemShowingResourcesMessage: {
+    message: 'There was a problem showing these resources',
+    context:
+      'A message that explains to the user that an error was encountered while loading recommended resources',
+  },
+  noDirectMatchesMessage: {
+    message:
+      'No direct matches found, but there are other resources that might be helpful for your curriculum',
+    context:
+      'A message that explains to the user that there are no direct matches to their search, but there are other resources that might be helpful',
+  },
+  showOtherRecommendationsLink: {
+    message: 'Show other recommendations',
+    context: 'A label for a link that shows the user other recommendations',
+  },
+  markAsNotRelevantTooltip: {
+    message: 'Mark as not relevant',
+    context: 'A tooltip that explains to the user that they can mark a resource as not relevant',
+  },
+  feedbackConfirmationMessage: {
+    message: 'Thank you! Your feedback will help us improve your recommendations',
+    context: 'A message that thanks the user for their feedback on the provided recommendations',
+  },
+  giveFeedbackText: {
+    message: 'Give feedback',
+    context: 'A label that describes the act of providing feedback on a recommended resource',
+  },
+  undoAction: {
+    message: 'Undo',
+    context: 'A label for an action that allows the user to undo a previous action',
+  },
+  closeAction: {
+    message: 'Close',
+    context: 'A label for an action that closes a dialog or window',
+  },
+  cancelAction: {
+    message: 'Cancel',
+    context: 'A label for an action that cancels a previous action',
+  },
+  submitAction: {
+    message: 'Submit',
+    context: 'A label for an action that submits a request',
+  },
+  feedbackSubmittedMessage: {
+    message: 'Feedback submitted',
+    context: "A message that confirms that the user's feedback has been submitted successfully",
+  },
+  notRelevantAction: {
+    message: 'Not relevant',
+    context: 'A label for an action that marks a resource as not relevant',
+  },
+  giveFeedbackDescription: {
+    message:
+      'Help us understand why this resource is not relevant for you right now. Check all that apply:',
+    context:
+      'A description that asks the user to provide feedback on why a resource is not relevant',
+  },
+  notSuitableForCurriculumLabel: {
+    message: 'Not suitable for the curriculum I am using',
+    context:
+      "A label to a feedback option that explains that the resource is not suitable for the user's curriculum",
+  },
+  notRelatedToSubjectLabel: {
+    message: 'Not related to the subject or knowledge area I am trying to find resources for',
+    context:
+      "A label to a feedback option that explains that the resource is not related to the user's subject or knowledge area",
+  },
+  notSuitableForCulturalBackgroundLabel: {
+    message: 'Not suitable for the cultural backgrounds and experiences of learners',
+    context:
+      'A label to a feedback option that explains that the resource is not suitable for the cultural backgrounds and experiences of learners',
+  },
+  notSpecificLearningActivityLabel: {
+    message:
+      "Not the type of specific learning activity I'm looking for (e.g. reading text-based material, watching a video, interactive questions, etc.)",
+    context:
+      'A label to a feedback option that explains that the resource is not the type of specific learning activity the user is looking for',
+  },
+  tooAdvancedForLearnersLabel: {
+    message: "Too advanced for the knowledge level of learners I'm looking for",
+    context:
+      'A label to a feedback option that explains that the resource is too advanced for the knowledge level of learners',
+  },
+  tooBasicForLearnersLabel: {
+    message: "Too basic for the knowledge level of learners I'm looking for",
+    context:
+      'A label to a feedback option that explains that the resource is too basic for the knowledge level of learners',
+  },
+  resourceNotWellMadeLabel: {
+    message: "The resource doesn't look or sound well-made enough for use",
+    context: 'A label to a feedback option that explains that the resource is not well-made',
+  },
+  alreadyUsedResourceLabel: {
+    message: 'I already used this resource in my channel',
+    context:
+      'A label to a feedback option that explains that the user has already used the resource in their channel',
+  },
+  otherLabel: {
+    message: 'Other',
+    context:
+      'A label to a feedback option that explains that the resource is not relevant for another reason',
+  },
+  enterFeedbackLabel: {
+    message: 'Enter your feedback',
+    context:
+      'A label to an input that asks the user to enter their specific reason for marking a resource as not relevant',
+  },
+});
diff --git a/package.json b/package.json
index c5a758f5b7..d2ac1996dd 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "^5.0.0-rc10",
+    "kolibri-design-system": "^5.0.0-rc11",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index d35f4db204..9ec4c215d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -459,6 +459,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
   integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
 
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
@@ -469,6 +474,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
 "@babel/helper-validator-option@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
@@ -545,6 +555,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.8.tgz#642af7d0333eab9c0ad70b14ac5e76dbde7bfdf8"
   integrity sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==
 
+"@babel/parser@^7.23.5":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
+  integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
+  dependencies:
+    "@babel/types" "^7.26.3"
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.17.12":
   version "7.17.12"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.17.12.tgz#1dca338caaefca368639c9ffb095afbd4d420b1e"
@@ -1742,6 +1759,14 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
+  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -3050,6 +3075,17 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+"@vue/compiler-sfc@2.7.16":
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz#ff81711a0fac9c68683d8bb00b63f857de77dc83"
+  integrity sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==
+  dependencies:
+    "@babel/parser" "^7.23.5"
+    postcss "^8.4.14"
+    source-map "^0.6.1"
+  optionalDependencies:
+    prettier "^1.18.2 || ^2.0.0"
+
 "@vue/component-compiler-utils@^3.1.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -3066,7 +3102,7 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/composition-api@1.7.2", "@vue/composition-api@^1.7.2":
+"@vue/composition-api@^1.7.2":
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.7.2.tgz#0b656f3ec39fefc2cf40aaa8c12426bcfeae1b44"
   integrity sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==
@@ -5168,6 +5204,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 csv-parse@^5.3.9:
   version "5.3.9"
   resolved "https://registry.yarnpkg.com/csv-parse/-/csv-parse-5.3.9.tgz#7af0daa161b0213080bb2cdffacd9b699cf48963"
@@ -9399,12 +9440,11 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.5.tgz#2b9df4c477119d0ade2d66bf8aef8a4172f0418f"
   integrity sha512-ZoFZ83xgteZhFZtYjiOmITcZeSF+X42i12TOo87zmcdA78jj0dZbPYB+ttO855UxoKY8h4HHeDVZIUkE5TGa5g==
 
-kolibri-design-system@^5.0.0-rc10:
-  version "5.0.0-rc10"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc10.tgz#8c92a1b097878a2a8e2f67cda76771914f77b7b8"
-  integrity sha512-Dkk5D5PunIm+qPsIMmgo06rjA0BkPZOOpeABuPgZmtpXcFwhpAP07VrLs0LhvFBdSFri3aJDXj/kj7HskXLhWg==
+kolibri-design-system@^5.0.0-rc11:
+  version "5.0.0-rc11"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc11.tgz#433b31d25337255708cf1bc28b86e4d619962f98"
+  integrity sha512-g3mxd+Bd82al5Bf3zfO3tizItI/LeMVCUVXwifv8rtbukIa5aoWDwCTUJkdnEQCFSZR5WQ0k9mhieIAe47ebvQ==
   dependencies:
-    "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "3.0.21"
     color "3.2.1"
@@ -9416,6 +9456,7 @@ kolibri-design-system@^5.0.0-rc10:
     popper.js "1.16.1"
     purecss "2.2.0"
     tippy.js "4.3.5"
+    vue "2"
     vue-intl "3.1.0"
     vue2-teleport "1.1.4"
     xstate "4.38.3"
@@ -10191,6 +10232,11 @@ nanoid@^3.3.6:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
+nanoid@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -10875,6 +10921,11 @@ picocolors@^1.0.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -11249,6 +11300,15 @@ postcss@^8.2.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.14:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 postcss@^8.4.16, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.6:
   version "8.4.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab"
@@ -12468,6 +12528,11 @@ source-map-js@^1.0.1, source-map-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -14057,6 +14122,14 @@ vue2-teleport@1.1.4:
   resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.1.4.tgz#30c84b1005bf9c208b1c05f4b6147300c54ee846"
   integrity sha512-mGTszyQP6k3sSSk7MBq+PZdVojHYLwg5772hl3UVpu5uaLBqWIZ5eNP6/TjkDrf1XUTTxybvpXC6inpjwO+i/Q==
 
+vue@2:
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
+  integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
+  dependencies:
+    "@vue/compiler-sfc" "2.7.16"
+    csstype "^3.1.0"
+
 vue@^2.6.12:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
@@ -14614,6 +14687,7 @@ workbox-window@7.0.0, workbox-window@^7.0.0:
     workbox-core "7.0.0"
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==