diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue
index c594f25bd9..fcb6d40278 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue
@@ -4,7 +4,7 @@
     <div v-if="loading && !loadingMore">
       <KCircularLoader />
     </div>
-    <div v-else>
+    <div v-else-if="!showSearch">
       <h1
         v-if="selectPracticeQuiz"
         class="select-folder-style"
@@ -67,7 +67,7 @@
         </div>
       </div>
 
-      <div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks">
+      <div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks && !showSearch">
         <p>{{ coreString('selectFromBookmarks') }}</p>
 
         <div>
@@ -97,12 +97,6 @@
         :topicsLink="topicsLink"
       />
 
-      <LessonsSearchBox
-        v-if="!showBookmarks"
-        @clear="clearSearchTerm"
-        @searchterm="handleSearchTermChange"
-      />
-
       <div
         v-if="showNumberOfQuestionsWarning"
         class="shadow"
@@ -124,6 +118,7 @@
       </div>
 
       <ContentCardList
+        v-if="!showSearch"
         :contentList="contentList"
         :showSelectAll="showSelectAll"
         :viewMoreButtonState="viewMoreButtonState"
@@ -176,6 +171,18 @@
         />
       </div>
     </div>
+
+    <SearchFiltersPanel
+      v-if="showSearch"
+      ref="sidePanel"
+      v-model="searchTerms"
+      data-test="side-panel"
+      width="100%"
+      :accordion="true"
+      :showActivities="false"
+      @close="showSearch = false"
+    />
+
     <KModal
       v-if="showCloseConfirmation"
       :submitText="coreString('continueAction')"
@@ -206,21 +213,22 @@
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds, MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri.coreVue.vuex.constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useBaseSearch from 'kolibri-common/composables/useBaseSearch';
+  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel';
   import { exerciseToQuestionArray } from '../../../utils/selectQuestions';
   import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
   import BookmarkIcon from '../../lessons/LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
   import useQuizResources from '../../../composables/useQuizResources';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
-  import LessonsSearchBox from '../../lessons/LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
   import ContentCardList from '../../lessons/LessonResourceSelectionPage/ContentCardList.vue';
   import ResourceSelectionBreadcrumbs from '../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
   export default {
     name: 'ResourceSelection',
     components: {
+      SearchFiltersPanel,
       ContentCardList,
       BookmarkIcon,
-      LessonsSearchBox,
       ResourceSelectionBreadcrumbs,
     },
     mixins: [commonCoreStrings],
@@ -482,6 +490,9 @@
         loadingMore,
       } = useQuizResources({ topicId, practiceQuiz: selectPracticeQuiz.value });
 
+      const { searchTerms, search } = useBaseSearch({ descendant: topic });
+      search();
+
       const _loading = ref(true);
 
       const channels = ref([]);
@@ -701,6 +712,7 @@
       }
 
       return {
+        showSearch: ref(false),
         nodeIsSelectableOrUnselectable,
         showCheckbox,
         displaySectionTitle,
@@ -765,6 +777,7 @@
         selectPracticeQuizLabel$,
         numberOfQuestionsLabel$,
         addNumberOfQuestions$,
+        searchTerms,
       };
     },
     props: {
@@ -906,20 +919,6 @@
           count,
         });
       },
-      handleSearchTermChange(searchTerm) {
-        const query = {
-          ...this.$route.query,
-          search: searchTerm,
-        };
-        this.$router.push({ query });
-      },
-      clearSearchTerm() {
-        const query = {
-          ...this.$route.query,
-        };
-        delete query.search;
-        this.$router.push({ query });
-      },
     },
   };
 
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index aa2f81a92f..fde3bd3dd7 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -102,14 +102,28 @@
       </main>
 
       <!-- Side Panels for filtering and searching  -->
-      <SearchFiltersPanel
-        v-if="(!isLocalLibraryEmpty || deviceId) && (windowIsLarge || mobileSidePanelIsOpen)"
-        ref="sidePanel"
-        v-model="searchTerms"
-        data-test="side-panel"
-        :width="`${sidePanelWidth}px`"
-        @close="toggleSidePanelVisibility"
-      />
+      <div v-if="(!isLocalLibraryEmpty || deviceId) && windowIsLarge">
+        <SearchFiltersPanel
+          ref="sidePanel"
+          v-model="searchTerms"
+          :class="windowIsLarge ? 'side-panel' : ''"
+          data-test="side-panel-local"
+          :width="`${sidePanelWidth}px`"
+        />
+      </div>
+
+      <SidePanelModal
+        v-else-if="mobileSidePanelIsOpen && !windowIsLarge"
+        alignment="left"
+        @closePanel="toggleSidePanelVisibility"
+      >
+        <SearchFiltersPanel
+          ref="sidePanel"
+          v-model="searchTerms"
+          data-test="side-panel"
+          :width="`${sidePanelWidth}px`"
+        />
+      </SidePanelModal>
 
       <!-- Side Panel for metadata -->
       <SidePanelModal
@@ -249,6 +263,7 @@
         setCategory,
         currentRoute,
       } = useSearch();
+      search();
       const {
         resumableContentNodes,
         moreResumableContentNodes,
@@ -501,6 +516,14 @@
       searchTerms() {
         this.mobileSidePanelIsOpen = false;
       },
+      windowIsLarge(newVal) {
+        // Be sure we set the side panel closed if the screen size changes
+        // otherwise the watcher on mobileSidePanelIsOpen will leave the
+        // document stuck in `position: fixed;` so we won't see the scrollbar
+        if (newVal) {
+          this.mobileSidePanelIsOpen = false;
+        }
+      },
       mobileSidePanelIsOpen() {
         if (this.mobileSidePanelIsOpen) {
           document.documentElement.style.position = 'fixed';
@@ -512,7 +535,6 @@
     created() {
       const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
 
-      this.search();
       if (window.sessionStorage.getItem(welcomeDismissalKey) !== 'true') {
         this.$store.commit('SET_WELCOME_MODAL_VISIBLE', true);
       }
@@ -649,4 +671,25 @@
     margin-left: 8px;
   }
 
+  .side-panel {
+    @extend %dropshadow-2dp;
+
+    position: fixed;
+    top: 60px;
+    left: 0;
+    height: 100%;
+    padding: 24px 24px 0;
+    overflow-y: scroll;
+    font-size: 14px;
+  }
+
+  /*
+  * Work around for https://bugzilla.mozilla.org/show_bug.cgi?id=1417667
+  */
+  .side-panel::after {
+    display: block;
+    padding-bottom: 70px;
+    content: '';
+  }
+
 </style>
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index 0ba3a3c6f3..bb512a4af5 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -186,26 +186,24 @@
 
         <!-- The full screen side panel is used on smaller screens, and toggles as an overlay -->
         <template v-if="!windowIsLarge && sidePanelIsOpen">
-          <SearchFiltersPanel
-            v-if="searchActive"
-            ref="embeddedPanel"
-            v-model="searchTerms"
-            class="full-screen-side-panel"
-            :showChannels="false"
-            :style="sidePanelStyleOverrides"
-            @close="sidePanelIsOpen = false"
-          />
-          <TopicsPanelModal
-            v-else
-            ref="embeddedPanel"
-            class="full-screen-side-panel"
-            :topics="topics"
-            :topicMore="Boolean(topicMore)"
-            :topicsLoading="topicMoreLoading"
-            :style="sidePanelStyleOverrides"
-            @loadMoreTopics="handleLoadMoreInTopic"
-            @close="sidePanelIsOpen = false"
-          />
+          <SidePanelModal @closePanel="sidePanelIsOpen = false">
+            <SearchFiltersPanel
+              v-if="searchActive"
+              ref="embeddedPanel"
+              v-model="searchTerms"
+              :showChannels="false"
+              :style="sidePanelStyleOverrides"
+            />
+            <TopicsPanelModal
+              v-else
+              ref="embeddedPanel"
+              :topics="topics"
+              :topicMore="Boolean(topicMore)"
+              :topicsLoading="topicMoreLoading"
+              :style="sidePanelStyleOverrides"
+              @loadMoreTopics="handleLoadMoreInTopic"
+            />
+          </SidePanelModal>
         </template>
       </div>
 
@@ -974,8 +972,11 @@
   .side-panel {
     position: absolute;
     top: $total-height;
+    left: 0;
     min-height: calc(100vh - #{$toolbar-height});
-    padding-top: 16px;
+    // Padding & scroll to ensure user can scroll all the way down
+    padding: 1em 1em 6em;
+    overflow-y: scroll;
   }
 
   .main-content-grid {
@@ -1049,4 +1050,13 @@
     margin-bottom: 24px;
   }
 
+  /deep/ .activities-wrapper {
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  }
+
+  /deep/ .btn-activity {
+    width: 80px;
+    height: 80px;
+  }
+
 </style>
diff --git a/kolibri/plugins/learn/assets/test/views/library-page.spec.js b/kolibri/plugins/learn/assets/test/views/library-page.spec.js
index b16aabc082..f4a9b76d2d 100644
--- a/kolibri/plugins/learn/assets/test/views/library-page.spec.js
+++ b/kolibri/plugins/learn/assets/test/views/library-page.spec.js
@@ -140,7 +140,7 @@ describe('LibraryPage', () => {
         options: { stubs: ['SidePanelModal'] },
       });
       // not displayed by default
-      expect(wrapper.findComponent({ name: 'SearchFiltersPanel' }).element).toBeUndefined();
+      expect(wrapper.find('[data-test="side-panel"]').element).toBeUndefined();
       wrapper.find('[data-test="filter-button"]').trigger('click');
       await wrapper.vm.$nextTick();
       expect(wrapper.findComponent({ name: 'SearchFiltersPanel' }).element).toBeTruthy();
@@ -355,7 +355,7 @@ describe('LibraryPage', () => {
         windowIsLarge: true,
       }));
       const wrapper = await makeWrapper();
-      expect(wrapper.find('[data-test="side-panel"').element).toBeTruthy();
+      expect(wrapper.find('[data-test="side-panel-local"').element).toBeTruthy();
     });
   });
 
diff --git a/packages/kolibri-common/components/SearchBox.vue b/packages/kolibri-common/components/SearchBox.vue
index 7b3cefbde9..ede7f3f5f9 100644
--- a/packages/kolibri-common/components/SearchBox.vue
+++ b/packages/kolibri-common/components/SearchBox.vue
@@ -25,7 +25,7 @@
         class="search-input"
         :class="$computedClass(searchInputStyle)"
         dir="auto"
-        :placeholder="coreString(placeholder)"
+        :placeholder="placeholder || coreString('searchLabel')"
       >
       <div class="search-buttons-wrapper">
         <KIconButton
@@ -80,7 +80,7 @@
       },
       placeholder: {
         type: String,
-        default: 'searchLabel',
+        default: null,
       },
       value: {
         type: String,
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue b/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue
new file mode 100644
index 0000000000..c6504c173e
--- /dev/null
+++ b/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue
@@ -0,0 +1,493 @@
+<template>
+
+  <div>
+    <AccordionContainer
+      v-if="Object.keys(availableLibraryCategories).length"
+      class="accordion-select"
+    >
+      <AccordionItem
+        :title="$tr('categoryLabel')"
+        :headerAppearanceOverrides="
+          accordionHeaderStyles(activeCategories.some(cat => isCategoryActive(cat)))
+        "
+      >
+        <template #content>
+          <KButton
+            v-for="(category, key) in availableLibraryCategories"
+            :key="'cat-' + key"
+            appearance="flat-button"
+            class="category-button"
+            :class="$computedClass({ ':hover': { background: selectedHighlightColor } })"
+            :style="{
+              background: isCategoryActive(category.value) ? selectedHighlightColor : '',
+            }"
+            :text="coreString(category.value)"
+            :disabled="
+              availableRootCategories &&
+                !availableRootCategories[category.value] &&
+                !isCategoryActive(category.value)
+            "
+            @click="handleCategory(key)"
+          >
+            <template #icon>
+              <KIcon
+                class="category-icon"
+                :icon="categoryIcon(key)"
+                :color="$themeTokens.primary"
+              />
+            </template>
+            <template
+              v-if="category.nested"
+              #iconAfter
+            >
+              <KIcon
+                icon="chevronRight"
+                class="category-icon-after"
+              />
+            </template>
+          </KButton>
+          <KButton
+            :text="coreString('uncategorized')"
+            class="category-button"
+            :class="$computedClass({ ':hover': { background: selectedHighlightColor } })"
+            :style="{
+              background: isCategoryActive('no_categories') ? selectedHighlightColor : '',
+            }"
+            appearance="flat-button"
+            @click="noCategories"
+          />
+        </template>
+      </AccordionItem>
+    </AccordionContainer>
+
+    <AccordionContainer
+      v-if="languageOptionsList.length"
+      class="accordion-select"
+    >
+      <AccordionItem
+        :title="coreString('languageLabel')"
+        :headerAppearanceOverrides="
+          accordionHeaderStyles(anySelectedFor('languages', languageOptionsList))
+        "
+        :disabled="languageOptionsList.every(opt => opt.disabled)"
+        :contentAppearanceOverrides="{
+          maxHeight: '256px',
+          overflowY: 'scroll',
+        }"
+      >
+        <template #content>
+          <KCheckbox
+            v-for="lang in languageOptionsList"
+            :key="'lang-' + lang.value"
+            :checked="isSelected('languages', lang)"
+            :disabled="lang.disabled"
+            :label="lang.label"
+            @change="handleChange('languages', lang)"
+          />
+        </template>
+      </AccordionItem>
+    </AccordionContainer>
+
+    <AccordionContainer
+      v-if="contentLevelOptions.length"
+      class="accordion-select"
+    >
+      <AccordionItem
+        :title="coreString('levelLabel')"
+        :disabled="contentLevelOptions.every(opt => opt.disabled)"
+        :headerAppearanceOverrides="
+          accordionHeaderStyles(anySelectedFor('grade_levels', contentLevelOptions))
+        "
+        :contentAppearanceOverrides="{
+          maxHeight: '256px',
+          overflowY: 'scroll',
+        }"
+      >
+        <template #content>
+          <KCheckbox
+            v-for="level in contentLevelOptions"
+            :key="'level-' + level.value"
+            :checked="isSelected('grade_levels', level)"
+            :disabled="level.disabled"
+            :label="level.label"
+            @change="handleChange('grade_levels', level)"
+          />
+        </template>
+      </AccordionItem>
+    </AccordionContainer>
+
+    <AccordionContainer
+      v-if="accessibilityOptionsList.length"
+      class="accordion-select"
+    >
+      <AccordionItem
+        :title="coreString('accessibility')"
+        :headerAppearanceOverrides="
+          accordionHeaderStyles(anySelectedFor('accessibility_labels', accessibilityOptionsList))
+        "
+        :disabled="accessibilityOptionsList.every(opt => opt.disabled)"
+        :contentAppearanceOverrides="{
+          maxHeight: '256px',
+          overflowY: 'scroll',
+        }"
+      >
+        <template #content>
+          <KCheckbox
+            v-for="a11y in accessibilityOptionsList"
+            :key="'a11y-' + a11y.value"
+            :checked="isSelected('accessibility_labels', a11y)"
+            :disabled="a11y.disabled"
+            :label="a11y.label"
+            @change="handleChange('accessibility_labels', a11y)"
+          />
+        </template>
+      </AccordionItem>
+    </AccordionContainer>
+
+    <AccordionContainer class="accordion-select">
+      <AccordionItem
+        :title="coreString('showResources')"
+        :headerAppearanceOverrides="
+          accordionHeaderStyles(anySelectedFor('learner_needs', needsOptionsList))
+        "
+        :disabled="needsOptionsList.every(opt => opt.disabled)"
+        :contentAppearanceOverrides="{
+          maxHeight: '256px',
+          overflowY: 'scroll',
+        }"
+      >
+        <template #content>
+          <KCheckbox
+            v-for="need in needsOptionsList"
+            :key="'resource-need-' + need.value"
+            :checked="isSelected('learner_needs', need)"
+            :disabled="need.disabled"
+            :label="need.label"
+            @change="handleChange('learner_needs', need)"
+          />
+        </template>
+      </AccordionItem>
+    </AccordionContainer>
+  </div>
+
+</template>
+
+
+<script>
+
+  import {
+    NoCategories,
+    ContentLevels,
+    AccessibilityCategories,
+  } from 'kolibri.coreVue.vuex.constants';
+  import AccordionItem from 'kolibri-common/components/accordion/AccordionItem';
+  import AccordionContainer from 'kolibri-common/components/accordion/AccordionContainer';
+  import camelCase from 'lodash/camelCase';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { injectBaseSearch } from 'kolibri-common/composables/useBaseSearch';
+
+  export default {
+    name: 'AccordionSelectGroup',
+    components: { AccordionItem, AccordionContainer },
+    mixins: [commonCoreStrings],
+    setup() {
+      const {
+        availableResourcesNeeded,
+        availableGradeLevels,
+        availableAccessibilityOptions,
+        availableLanguages,
+        availableLibraryCategories,
+        searchableLabels,
+        activeSearchTerms,
+      } = injectBaseSearch();
+
+      return {
+        availableResourcesNeeded,
+        activeSearchTerms,
+        availableGradeLevels,
+        availableAccessibilityOptions,
+        availableLanguages,
+        availableLibraryCategories,
+        searchableLabels,
+        // This color is not in KDS but was specifically requested in the design
+        //selectedHighlightColor: '#ECF0FE',
+      };
+    },
+    props: {
+      value: {
+        type: Object,
+        required: true,
+        validator(value) {
+          const inputKeys = ['channels', 'accessibility_labels', 'languages', 'grade_levels'];
+          return inputKeys.every(k => Object.prototype.hasOwnProperty.call(value, k));
+        },
+      },
+      handleCategory: {
+        type: Function,
+        required: true,
+      },
+      activeCategories: {
+        type: Array,
+        required: true,
+      },
+    },
+    computed: {
+      availableNeeds() {
+        if (this.searchableLabels) {
+          const needs = {};
+          for (const key of this.searchableLabels.learner_needs) {
+            const root = key.split('.')[0];
+            needs[root] = true;
+            needs[key] = true;
+          }
+          return needs;
+        }
+        return null;
+      },
+      needsOptionsList() {
+        return Object.keys(this.availableResourcesNeeded).map(k => {
+          const val = this.availableResourcesNeeded[k];
+          return {
+            value: val,
+            disabled: this.searchableLabels && !this.searchableLabels.learner_needs.includes(val),
+            label: this.coreString(val),
+          };
+        });
+      },
+      selectedHighlightColor() {
+        // get right color
+        return '#D9E1FD';
+      },
+      availableRootCategories() {
+        if (this.searchableLabels) {
+          const roots = {};
+          for (const key of this.searchableLabels.categories) {
+            const root = key.split('.')[0];
+            roots[root] = true;
+          }
+          return roots;
+        }
+        return null;
+      },
+      languageOptionsList() {
+        return this.availableLanguages.map(language => {
+          return {
+            value: language.id,
+            disabled:
+              this.searchableLabels && !this.searchableLabels.languages.includes(language.id),
+            label: language.lang_name,
+          };
+        });
+      },
+      enabledLanguageOptions() {
+        return this.languageOptionsList.filter(l => !l.disabled);
+      },
+      accessibilityOptionsList() {
+        return this.availableAccessibilityOptions.map(key => {
+          const value = AccessibilityCategories[key];
+          return {
+            value,
+            disabled:
+              this.searchableLabels && !this.searchableLabels.accessibility_labels.includes(value),
+            label: this.coreString(camelCase(key)),
+          };
+        });
+      },
+      enabledAccessibilityOptions() {
+        return this.accessibilityOptionsList.filter(a => !a.disabled);
+      },
+      contentLevelOptions() {
+        return this.availableGradeLevels.map(key => {
+          const value = ContentLevels[key];
+          let translationKey;
+          if (key === 'PROFESSIONAL') {
+            translationKey = 'specializedProfessionalTraining';
+          } else if (key === 'WORK_SKILLS') {
+            translationKey = 'allLevelsWorkSkills';
+          } else if (key === 'BASIC_SKILLS') {
+            translationKey = 'allLevelsBasicSkills';
+          } else {
+            translationKey = camelCase(key);
+          }
+          return {
+            value,
+            disabled: this.searchableLabels && !this.searchableLabels.grade_levels.includes(value),
+            label: this.coreString(translationKey),
+          };
+        });
+      },
+      enabledContentLevels() {
+        return this.contentLevelOptions.filter(c => !c.disabled);
+      },
+      langId() {
+        return Object.keys(this.value.languages)[0];
+      },
+      accessId() {
+        return Object.keys(this.value.accessibility_labels)[0];
+      },
+      selectedLanguage() {
+        if (!this.langId && this.enabledLanguageOptions.length === 1) {
+          return this.enabledLanguageOptions[0];
+        }
+        return this.languageOptionsList.find(o => o.value === this.langId) || {};
+      },
+      selectedAccessibilityFilter() {
+        if (!this.accessId && this.enabledAccessibilityOptions.length === 1) {
+          return this.enabledAccessibilityOptions[0];
+        }
+        return this.accessibilityOptionsList.find(o => o.value === this.accessId) || {};
+      },
+      levelId() {
+        return Object.keys(this.value.grade_levels)[0];
+      },
+      selectedLevel() {
+        if (!this.levelId && this.enabledContentLevels.length === 1) {
+          return this.enabledContentLevels[0];
+        }
+        return this.contentLevelOptions.find(o => o.value === this.levelId) || {};
+      },
+      selectedChannel() {
+        if (!this.channelId && this.enabledChannelOptions.length === 1) {
+          return this.enabledChannelOptions[0];
+        }
+        return this.channelOptionsList.find(o => o.value === this.channelId) || {};
+      },
+    },
+    methods: {
+      noCategories() {
+        if (this.isCategoryActive(NoCategories)) {
+          // NoCategories is it's own key for the "Uncategorized" category
+          const categories = this.value.categories;
+          delete categories[NoCategories];
+          this.$emit('input', { ...this.value, categories });
+        } else {
+          this.$emit('input', { ...this.value, categories: { [NoCategories]: true } });
+        }
+      },
+      anySelectedFor(inputKey, values) {
+        return values.some(value => this.isSelected(inputKey, value));
+      },
+      isSelected(inputKey, value) {
+        return this.value[inputKey][value.value] === true;
+      },
+      accordionHeaderStyles(selected) {
+        return {
+          padding: `0.25em 0 0.25em ${selected ? '0.5em' : '0.75em'}`,
+          background: selected ? this.selectedHighlightColor : this.$themePalette.grey.v_100,
+          borderLeft: selected ? `0.25em solid ${this.$themeTokens.primary}` : 'none',
+        };
+      },
+      handleChange(field, value) {
+        const prevFieldValue = this.value[field];
+        if (value && this.isSelected(field, value)) {
+          delete prevFieldValue[value.value];
+          this.$emit('input', { ...this.value, [field]: prevFieldValue });
+        } else {
+          this.$emit('input', {
+            ...this.value,
+            [field]: { ...prevFieldValue, [value.value]: true },
+          });
+        }
+      },
+      isCategoryActive(categoryValue) {
+        // Takes the dot separated category value and checks if it is active
+        return this.activeCategories.some(k => k.includes(categoryValue));
+      },
+      categoryIcon() {
+        // TODO Add icons to KDS then use them
+        return 'categories';
+      },
+    },
+    $trs: {
+      categoryLabel: {
+        message: 'Category',
+        context:
+          'When user can select the categories, this is the header for the categories section',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  // Do not let text oveflow in select menu
+  /deep/ .ui-select-content {
+    width: 100%;
+
+    // remove position absolute to prevent text from getting under button
+    .overlay-close-button {
+      position: unset;
+      flex-shrink: 0;
+    }
+  }
+
+  /deep/ .ui-select-label-text.is-inline {
+    position: absolute;
+    bottom: 45px;
+    left: 10px;
+    font-size: 12px;
+  }
+
+  /deep/ .ui-select-label-text.is-floating {
+    position: absolute;
+    bottom: 15px;
+    left: 10px;
+    font-size: 12px;
+  }
+
+  /deep/ .ui-select-display {
+    height: 3rem;
+    border-bottom: inherit;
+  }
+
+  /deep/ .ui-select-display-value {
+    position: relative;
+    top: 12px;
+    flex-grow: 1;
+    height: 32px;
+    padding-top: 10px;
+    padding-left: 20px;
+    font-size: 14px;
+  }
+
+  /deep/ .ui-icon {
+    margin-right: 10px;
+  }
+
+  .accordion-select:not(:last-child) {
+    margin-bottom: 1em;
+  }
+
+  .category-icon {
+    position: absolute;
+    top: 50%;
+    left: 0.5em;
+    transform: translateY(-50%);
+  }
+
+  .category-icon-after {
+    position: absolute;
+    top: 50%;
+    right: 0.5em;
+    transform: translateY(-50%);
+  }
+
+  .category-button {
+    // Ensure the child KIcons' absolute positioning anchors to this button
+    position: relative;
+    width: 100%;
+    // 0.5em around except on the right where the category icon is
+    padding: 0 0.5em 0 2.25em;
+    font-weight: normal;
+    text-align: left;
+    // KButton text formatting overrides
+    text-transform: unset;
+  }
+
+  .category-button:not(:last-child) {
+    margin-bottom: 0.5em;
+  }
+
+</style>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/ActivityButtonsGroup.vue b/packages/kolibri-common/components/SearchFiltersPanel/ActivityButtonsGroup.vue
index 762f9a6db5..66e1b6c404 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/ActivityButtonsGroup.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/ActivityButtonsGroup.vue
@@ -4,28 +4,30 @@
     <h2 class="title">
       {{ $tr('activities') }}
     </h2>
-    <span
-      v-for="(key, activity) in availableLearningActivities"
-      :key="key"
-      alignment="center"
-    >
-      <KButton
-        appearance="flat-button"
-        :appearanceOverrides="
-          isKeyActive(key) ? { ...activityStyles, ...activityActiveStyles } : activityStyles
-        "
-        :disabled="availableActivities && !availableActivities[key] && !isKeyActive(key)"
-        @click="$emit('input', key)"
+    <div class="wrapper">
+      <span
+        v-for="(key, activity) in availableLearningActivities"
+        :key="key"
+        alignment="center"
       >
-        <KIcon
-          :icon="activityIcon(activity)"
-          class="activity-icon"
-        />
-        <p class="activity-button-text">
-          {{ coreString(camelCase(activity)) }}
-        </p>
-      </KButton>
-    </span>
+        <KButton
+          appearance="flat-button"
+          :appearanceOverrides="
+            isKeyActive(key) ? { ...activityStyles, ...activityActiveStyles } : activityStyles
+          "
+          :disabled="availableActivities && !availableActivities[key] && !isKeyActive(key)"
+          @click="$emit('input', key)"
+        >
+          <KIcon
+            :icon="activityIcon(activity)"
+            class="activity-icon"
+          />
+          <p class="activity-button-text">
+            {{ coreString(camelCase(activity)) }}
+          </p>
+        </KButton>
+      </span>
+    </div>
   </div>
 
 </template>
@@ -54,8 +56,8 @@
       activityStyles() {
         return {
           color: this.$themeTokens.text,
-          width: '50%',
-          height: '100px',
+          width: '120px',
+          height: '120px',
           border: '2px solid transparent',
           textTransform: 'capitalize',
           fontWeight: 'normal',
@@ -126,4 +128,9 @@
     margin-top: -12px;
   }
 
+  .wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/CategorySearchOptions.vue b/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/CategorySearchOptions.vue
index 82a6da6917..19c0b0f076 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/CategorySearchOptions.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/CategorySearchOptions.vue
@@ -23,6 +23,7 @@
           <KIcon
             :icon="icon(key)"
             size="large"
+            :color="$themeTokens.primary"
             :style="{ marginLeft: '8px' }"
           />
           <h3>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue
index 0d5c255264..42b8a3c5f2 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue
@@ -1,36 +1,16 @@
 <template>
 
-  <div>
-    <KModal
-      v-if="windowIsLarge"
-      appendToOverlay
-      :title="$tr('title')"
-      :cancelText="coreString('closeAction')"
-      size="large"
-      @cancel="$emit('cancel')"
-    >
-      <CategorySearchOptions
-        ref="searchOptions"
-        :selectedCategory="selectedCategory"
-        v-on="$listeners"
-      />
-    </KModal>
-    <div v-else>
-      <h2>{{ $tr('title') }}</h2>
-      <CategorySearchOptions
-        ref="searchOptions"
-        :selectedCategory="selectedCategory"
-        v-on="$listeners"
-      />
-    </div>
-  </div>
+  <CategorySearchOptions
+    ref="searchOptions"
+    :selectedCategory="selectedCategory"
+    v-on="$listeners"
+  />
 
 </template>
 
 
 <script>
 
-  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CategorySearchOptions from './CategorySearchOptions';
 
@@ -39,7 +19,6 @@
     components: {
       CategorySearchOptions,
     },
-    mixins: [commonCoreStrings],
     setup() {
       const { windowIsLarge } = useKResponsiveWindow();
       return {
@@ -63,12 +42,6 @@
         this.$refs.searchOptions.$el.querySelector('.filter-list-title > h2 > a').focus();
       },
     },
-    $trs: {
-      title: {
-        message: 'Choose a category',
-        context: 'Title of the category selection window',
-      },
-    },
   };
 
 </script>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/SelectGroup.vue b/packages/kolibri-common/components/SearchFiltersPanel/SelectGroup.vue
index 419bc994fd..2c171f020c 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/SelectGroup.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/SelectGroup.vue
@@ -24,18 +24,6 @@
       :style="selectorStyle"
       @change="val => handleChange('grade_levels', val)"
     />
-    <KSelect
-      v-if="showChannels && channelOptionsList.length"
-      :options="channelOptionsList"
-      :disabled="!channelId && enabledChannelOptions.length < 2"
-      class="selector"
-      :clearable="!(!channelId && enabledChannelOptions.length < 2)"
-      :clearText="coreString('clearAction')"
-      :value="selectedChannel"
-      :label="coreString('channelLabel')"
-      :style="selectorStyle"
-      @change="val => handleChange('channels', val)"
-    />
     <KSelect
       v-if="accessibilityOptionsList.length"
       :options="accessibilityOptionsList"
@@ -68,14 +56,12 @@
         availableGradeLevels,
         availableAccessibilityOptions,
         availableLanguages,
-        availableChannels,
         searchableLabels,
       } = injectBaseSearch();
       return {
         availableGradeLevels,
         availableAccessibilityOptions,
         availableLanguages,
-        availableChannels,
         searchableLabels,
       };
     },
@@ -88,10 +74,6 @@
           return inputKeys.every(k => Object.prototype.hasOwnProperty.call(value, k));
         },
       },
-      showChannels: {
-        type: Boolean,
-        default: true,
-      },
     },
     computed: {
       selectorStyle() {
@@ -151,16 +133,6 @@
       enabledContentLevels() {
         return this.contentLevelsList.filter(c => !c.disabled);
       },
-      channelOptionsList() {
-        return this.availableChannels.map(channel => ({
-          value: channel.id,
-          disabled: this.searchableLabels && !this.searchableLabels.channels.includes(channel.id),
-          label: channel.name,
-        }));
-      },
-      enabledChannelOptions() {
-        return this.channelOptionsList.filter(c => !c.disabled);
-      },
       langId() {
         return Object.keys(this.value.languages)[0];
       },
@@ -188,15 +160,6 @@
         }
         return this.contentLevelsList.find(o => o.value === this.levelId) || {};
       },
-      channelId() {
-        return Object.keys(this.value.channels)[0];
-      },
-      selectedChannel() {
-        if (!this.channelId && this.enabledChannelOptions.length === 1) {
-          return this.enabledChannelOptions[0];
-        }
-        return this.channelOptionsList.find(o => o.value === this.channelId) || {};
-      },
     },
     methods: {
       handleChange(field, value) {
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 94e6fe83c1..9d4ad114dd 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -1,10 +1,7 @@
 <template>
 
-  <component
-    :is="windowIsLarge ? 'section' : 'SidePanelModal'"
-    alignment="left"
+  <section
     role="region"
-    :class="windowIsLarge ? 'side-panel' : ''"
     :closeButtonIconType="closeButtonIcon"
     :aria-label="filterAndSearchLabel$()"
     :ariaLabel="filterAndSearchLabel$()"
@@ -24,102 +21,143 @@
       v-if="windowIsLarge || !currentCategory"
       :class="windowIsLarge ? '' : 'drawer-panel'"
     >
-      <!-- search by keyword -->
-      <h2 class="title">
-        {{ $tr('keywords') }}
-      </h2>
-      <SearchBox
-        key="channel-search"
-        ref="searchBox"
-        placeholder="findSomethingToLearn"
-        :value="value.keywords || ''"
-        @change="val => $emit('input', { ...value, keywords: val })"
-      />
       <div v-if="Object.keys(availableLibraryCategories).length">
-        <h2 class="section title">
-          {{ $tr('categories') }}
-        </h2>
-        <!-- list of category metadata - clicking prompts a filter modal -->
-        <div
-          v-for="(category, key) in availableLibraryCategories"
-          :key="key"
-          span="4"
-          class="category-list-item"
-        >
-          <KButton
-            :text="coreString(category.value)"
-            appearance="flat-button"
-            :appearanceOverrides="
-              isCategoryActive(category.value)
-                ? { ...categoryListItemStyles, ...categoryListItemActiveStyles }
-                : categoryListItemStyles
-            "
-            :disabled="
-              availableRootCategories &&
-                !availableRootCategories[category.value] &&
-                !isCategoryActive(category.value)
-            "
-            :iconAfter="hasNestedCategories(key) ? 'chevronRight' : null"
-            @click="handleCategory(key)"
+        <div v-if="!accordion">
+          <!-- search by keyword -->
+          <h2 class="title">
+            {{ $tr('keywords') }}
+          </h2>
+          <SearchBox
+            key="channel-search"
+            ref="searchBox"
+            :placeholder="coreString('findSomethingToLearn')"
+            :value="value.keywords || ''"
+            @change="val => $emit('input', { ...value, keywords: val })"
           />
-        </div>
-        <div
-          span="4"
-          class="category-list-item"
-        >
-          <KButton
-            :text="coreString('uncategorized')"
-            appearance="flat-button"
-            :appearanceOverrides="
-              isCategoryActive('no_categories')
-                ? { ...categoryListItemStyles, ...categoryListItemActiveStyles }
-                : categoryListItemStyles
-            "
-            @click="noCategories"
+          <h2 class="section title">
+            {{ $tr('categories') }}
+          </h2>
+          <!-- list of category metadata - clicking prompts a filter modal -->
+          <div
+            v-for="(category, key) in availableLibraryCategories"
+            :key="key"
+            span="4"
+            class="category-list-item"
+          >
+            <KButton
+              :text="coreString(category.value)"
+              appearance="flat-button"
+              :appearanceOverrides="
+                isCategoryActive(category.value)
+                  ? { ...categoryListItemStyles, ...categoryListItemActiveStyles }
+                  : categoryListItemStyles
+              "
+              :disabled="
+                availableRootCategories &&
+                  !availableRootCategories[category.value] &&
+                  !isCategoryActive(category.value)
+              "
+              :iconAfter="hasNestedCategories(key) ? 'chevronRight' : null"
+              @click="handleCategory(key)"
+            />
+          </div>
+          <div
+            span="4"
+            class="category-list-item"
+          >
+            <KButton
+              :text="coreString('uncategorized')"
+              appearance="flat-button"
+              :appearanceOverrides="
+                isCategoryActive('no_categories')
+                  ? { ...categoryListItemStyles, ...categoryListItemActiveStyles }
+                  : categoryListItemStyles
+              "
+              @click="noCategories"
+            />
+          </div>
+          <ActivityButtonsGroup
+            v-if="showActivities"
+            class="section"
+            @input="handleActivity"
+          />
+          <!-- Filter results by learning activity, displaying all options -->
+          <SelectGroup
+            v-model="inputValue"
+            :showChannels="showChannels"
+            class="section"
           />
+          <div
+            v-if="Object.keys(availableResourcesNeeded).length"
+            class="section"
+          >
+            <h2 class="title">
+              {{ coreString('showResources') }}
+            </h2>
+            <div
+              v-for="(val, activity) in availableResourcesNeeded"
+              :key="activity"
+              span="4"
+              alignment="center"
+            >
+              <KCheckbox
+                :checked="value.learner_needs[val]"
+                :label="coreString(activity)"
+                :disabled="availableNeeds && !availableNeeds[val]"
+                @change="handleNeed(val)"
+              />
+            </div>
+          </div>
         </div>
-      </div>
-      <ActivityButtonsGroup
-        class="section"
-        @input="handleActivity"
-      />
-      <!-- Filter results by learning activity, displaying all options -->
-      <SelectGroup
-        v-model="inputValue"
-        :showChannels="showChannels"
-        class="section"
-      />
-      <div
-        v-if="Object.keys(availableResourcesNeeded).length"
-        class="section"
-      >
-        <h2 class="title">
-          {{ coreString('showResources') }}
-        </h2>
-        <div
-          v-for="(val, activity) in availableResourcesNeeded"
-          :key="activity"
-          span="4"
-          alignment="center"
-        >
-          <KCheckbox
-            :checked="value.learner_needs[val]"
-            :label="coreString(activity)"
-            :disabled="availableNeeds && !availableNeeds[val]"
-            @change="handleNeed(val)"
+        <div v-if="accordion && !currentCategory">
+          <!-- search by keyword -->
+          <h2 class="title">
+            {{ $tr('keywords') }}
+          </h2>
+          <SearchBox
+            key="channel-search"
+            ref="searchBox"
+            style="margin-bottom: 1em"
+            :placeholder="$tr('searchByKeyword')"
+            :value="value.keywords || ''"
+            @change="val => $emit('input', { ...value, keywords: val })"
+          />
+
+          <ActivityButtonsGroup
+            v-if="showActivities"
+            class="section"
+            @input="handleActivity"
+          />
+
+          <AccordionSelectGroup
+            v-model="inputValue"
+            :showChannels="showChannels"
+            :activeCategories="activeCategories"
+            :handleCategory="handleCategory"
+            style="margin-top: 1em"
           />
         </div>
       </div>
     </div>
-    <CategorySearchModal
-      v-if="currentCategory"
-      ref="searchModal"
-      :class="windowIsLarge ? '' : 'drawer-panel'"
-      :selectedCategory="currentCategory"
+    <!-- When accordion mode is NOT activated, show as KModal, otherwise, just a div -->
+    <component
+      :is="accordion ? 'div' : 'KModal'"
+      v-if="windowIsLarge && currentCategory"
+      appendToOverlay
+      :title="$tr('chooseACategory')"
+      :cancelText="coreString('closeAction')"
+      size="large"
       @cancel="currentCategory = null"
-      @input="selectCategory"
-    />
-  </component>
+    >
+      <CategorySearchModal
+        v-if="currentCategory"
+        ref="searchModal"
+        :class="windowIsLarge ? '' : 'drawer-panel'"
+        :selectedCategory="currentCategory"
+        @input="selectCategory"
+      />
+    </component>
+  </section>
 
 </template>
 
@@ -127,8 +165,9 @@
 <script>
 
   //
-  // Usage of injectBaseSearch() in this component requires ancestor's use of useSearch
-  // Examples of it can be found in the following components:
+  // Usage of injectBaseSearch() in this component requires ancestor's use of useBaseSearch
+  // Examples of it can be found in the following components
+  // (Note: useSearch extends useBaseSearch):
   // - kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
   //   in https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue#L238-L251
   // - kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -142,10 +181,10 @@
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import { injectBaseSearch } from 'kolibri-common/composables/useBaseSearch';
   import SearchBox from '../SearchBox';
-  import SidePanelModal from '../SidePanelModal';
   import ActivityButtonsGroup from './ActivityButtonsGroup';
   import CategorySearchModal from './CategorySearchModal';
   import SelectGroup from './SelectGroup';
+  import AccordionSelectGroup from './AccordionSelectGroup';
 
   export default {
     name: 'SearchFiltersPanel',
@@ -154,7 +193,7 @@
       ActivityButtonsGroup,
       SelectGroup,
       CategorySearchModal,
-      SidePanelModal,
+      AccordionSelectGroup,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -175,9 +214,18 @@
         searchableLabels,
         activeSearchTerms,
         windowIsLarge,
+        // This color is not in KDS but was specifically requested in the design
+        selectedHighlightColor: '#ECF0FE',
       };
     },
     props: {
+      /**
+       * When true, options are presented using accordions rather than buttons & dropdowns
+       */
+      accordion: {
+        type: Boolean,
+        default: false,
+      },
       value: {
         type: Object,
         required: true,
@@ -202,6 +250,10 @@
         type: Boolean,
         default: true,
       },
+      showActivities: {
+        type: Boolean,
+        default: true,
+      },
     },
     computed: {
       closeButtonIcon() {
@@ -354,10 +406,18 @@
         message: 'Keywords',
         context: 'Section header label in the Library page sidebar.',
       },
+      searchByKeyword: {
+        message: 'Search by keyword',
+        context: 'Placeholder text in the search box, which is otherwise not labelled',
+      },
       categories: {
         message: 'Categories',
         context: 'Section header label in the Library page sidebar.',
       },
+      chooseACategory: {
+        message: 'Choose a category',
+        context: 'Title of the category selection window',
+      },
     },
   };
 
@@ -372,27 +432,6 @@
     padding-bottom: 60px;
   }
 
-  .side-panel {
-    @extend %dropshadow-2dp;
-
-    position: fixed;
-    top: 60px;
-    left: 0;
-    height: 100%;
-    padding: 24px 24px 0;
-    overflow-y: scroll;
-    font-size: 14px;
-  }
-
-  /*
-  * Work around for https://bugzilla.mozilla.org/show_bug.cgi?id=1417667
-  */
-  .side-panel::after {
-    display: block;
-    padding-bottom: 70px;
-    content: '';
-  }
-
   .side-panel-folder-link {
     margin-top: 12px;
     margin-bottom: 12px;
@@ -411,14 +450,38 @@
     margin-left: 20px;
   }
 
-  /deep/ .prop-icon {
+  .title {
+    margin-bottom: 16px;
+  }
+
+  .categoryIcon {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 50%;
+    left: 0.5em;
+    transform: translateY(-50%);
   }
 
-  .title {
-    margin-bottom: 16px;
+  .categoryIconAfter {
+    position: absolute;
+    top: 50%;
+    right: 0.5em;
+    transform: translateY(-50%);
+  }
+
+  .categoryButton {
+    // Ensure the child KIcons' absolute positioning anchors to this button
+    position: relative;
+    width: 100%;
+    // 0.5em around except on the right where the category icon is
+    padding: 0 0.5em 0 2.25em;
+    font-weight: normal;
+    text-align: left;
+    // KButton text formatting overrides
+    text-transform: unset;
+  }
+
+  .categoryButton:not(:last-child) {
+    margin-bottom: 0.5em;
   }
 
 </style>
diff --git a/packages/kolibri-common/components/accordion/AccordionContainer.vue b/packages/kolibri-common/components/accordion/AccordionContainer.vue
index c70914f204..2c69e1e4e2 100644
--- a/packages/kolibri-common/components/accordion/AccordionContainer.vue
+++ b/packages/kolibri-common/components/accordion/AccordionContainer.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div class="accordion">
+  <div
+    class="accordion"
+    :style="{ border: `1px solid ${$themeTokens.fineLine}` }"
+  >
     <div
       v-if="hasHeaderSlot"
       class="header"
@@ -59,12 +62,6 @@
 
 <style lang="scss" scoped>
 
-  @import '~kolibri-design-system/lib/styles/definitions';
-
-  .accordion {
-    @extend %dropshadow-1dp;
-  }
-
   .header {
     padding: 10px;
     border-top: 1px solid;
diff --git a/packages/kolibri-common/components/accordion/AccordionItem.vue b/packages/kolibri-common/components/accordion/AccordionItem.vue
index e793d3090c..0f5f490897 100644
--- a/packages/kolibri-common/components/accordion/AccordionItem.vue
+++ b/packages/kolibri-common/components/accordion/AccordionItem.vue
@@ -15,6 +15,7 @@
         :style="headerAppearanceOverrides"
         :aria-expanded="isExpanded"
         :aria-controls="contentId"
+        :disabled="disabled"
         @click.stop="toggle"
       >
         <div class="header-content">
@@ -31,6 +32,7 @@
           </div>
           <div class="trailing-actions">
             <KIconButton
+              tabindex="-1"
               :icon="isExpanded ? 'chevronDown' : 'chevronRight'"
               @click.stop="toggle"
             />