diff --git a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
index 6c1243837a..3bfb5d76d7 100644
--- a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
@@ -16,6 +16,7 @@
       :cardViewStyle="windowIsSmall ? 'card' : 'list'"
       :footerIcons="footerIcons"
       @removeFromBookmarks="removeFromBookmarks"
+      @toggleInfoPanel="toggleInfoPanel"
     />
 
     <KButton
@@ -28,6 +29,13 @@
       v-else-if="loading"
       :delay="false"
     />
+
+    <FullScreenSidePanel
+      v-if="sidePanelContent"
+      @closePanel="sidePanelContent = null"
+    >
+      <BrowseResourceMetadata :content="sidePanelContent" :canDownloadContent="true" />
+    </FullScreenSidePanel>
   </div>
 
 </template>
@@ -37,6 +45,7 @@
 
   import { mapActions } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import FullScreenSidePanel from 'kolibri.coreVue.components.FullScreenSidePanel';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import { ContentNodeResource } from 'kolibri.resources';
   import client from 'kolibri.client';
@@ -45,6 +54,7 @@
   import { PageNames } from '../constants';
   import { normalizeContentNode } from '../modules/coreLearn/utils.js';
   import HybridLearningCardGrid from './HybridLearningCardGrid';
+  import BrowseResourceMetadata from './BrowseResourceMetadata';
 
   export default {
     name: 'BookmarkPage',
@@ -54,6 +64,8 @@
       };
     },
     components: {
+      BrowseResourceMetadata,
+      FullScreenSidePanel,
       HybridLearningCardGrid,
     },
     mixins: [commonCoreStrings, responsiveWindowMixin],
@@ -62,6 +74,7 @@
         loading: true,
         bookmarks: [],
         more: null,
+        sidePanelContent: null,
       };
     },
     computed: {
@@ -103,6 +116,9 @@
           });
         }
       },
+      toggleInfoPanel(content) {
+        this.sidePanelContent = content;
+      },
     },
     $trs: {
       bookmarksHeader: {
diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue
index 8d06b0ff0e..5547fcb845 100644
--- a/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue
@@ -54,7 +54,7 @@
       :footerIcons="footerIcons"
       :createdDate="content.bookmark ? content.bookmark.created : null"
       @openCopiesModal="openCopiesModal"
-      @toggleInfoPanel="$emit('toggleInfoPanel', content)"
+      @viewInformation="$emit('toggleInfoPanel', content)"
       @removeFromBookmarks="removeFromBookmarks(content, contents)"
     />
     <CopiesModal