diff --git a/kolibri/plugins/coach/assets/src/composables/useFetchContentNode.js b/kolibri/plugins/coach/assets/src/composables/useFetchContentNode.js
new file mode 100644
index 0000000000..7fb06d46dd
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/composables/useFetchContentNode.js
@@ -0,0 +1,33 @@
+import { ref } from 'vue';
+import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
+
+export default function useFetchContentNode(contentId) {
+  const contentNode = ref({});
+  const ancestors = ref([]);
+  const questions = ref([]);
+
+  const fetchContentNode = () => {
+    ContentNodeResource.fetchModel({
+      id: contentId,
+      getParams: { no_available_filtering: true },
+    }).then(node => {
+      contentNode.value = node;
+
+      if (node.ancestors.length) {
+        ancestors.value = node.ancestors;
+      }
+
+      if (node.assessmentmetadata) {
+        questions.value = node.assessmentmetadata.assessment_item_ids;
+      }
+    });
+  };
+
+  fetchContentNode();
+
+  return {
+    ancestors,
+    contentNode,
+    questions,
+  };
+}
diff --git a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
index fb764a328a..40c481b928 100644
--- a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
@@ -155,6 +155,17 @@ export default [
             path: 'channels',
             component: SelectFromChannels,
           },
+          {
+            name: PageNames.LESSON_PREVIEW_RESOURCE,
+            path: 'preview-selected-resources',
+            component: PreviewSelectedResources,
+            props: toRoute => {
+              const contentId = toRoute.query.contentId;
+              return {
+                contentId,
+              };
+            },
+          },
         ],
       },
       {
@@ -162,11 +173,6 @@ export default [
         path: 'preview-resources/',
         component: ManageSelectedLessonResources,
       },
-      {
-        name: PageNames.LESSON_PREVIEW_RESOURCE,
-        path: 'preview-resources/:nodeId',
-        component: PreviewSelectedResources,
-      },
     ],
   },
   {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
index 96ae5f451a..f803da605b 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
@@ -125,12 +125,20 @@
     },
     methods: {
       contentLink(content) {
-        const { name, params, query } = this.$route;
+        const { params, query } = this.$route;
         if (!content.is_leaf) {
           return this.topicsLink(content.id);
         }
-        // Just return the current route; router-link will handle the no-op from here
-        return { name, params, query };
+        return {
+          name: PageNames.LESSON_PREVIEW_RESOURCE,
+          params: {
+            ...params,
+          },
+          query: {
+            contentId: content.id,
+            ...query,
+          },
+        };
       },
       topicsLink(topicId) {
         const { name, params, query } = this.$route;
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewContent.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewContent.vue
new file mode 100644
index 0000000000..19aa442c98
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewContent.vue
@@ -0,0 +1,252 @@
+<template>
+
+  <div>
+    <KGrid>
+      <KGridItem
+        :layout12="{ span: 9 }"
+        :layout8="{ span: 4 }"
+        :layout4="{ span: 2 }"
+      >
+        {{ coreString('selectFromChannels') }}
+      </KGridItem>
+      <KGridItem
+        :layout12="{ span: 3 }"
+        :layout8="{ span: 4 }"
+        :layout4="{ span: 2 }"
+      >
+        <template>
+          <div class="add-remove-button-style">
+            <template v-if="isSelected">
+              <KIcon icon="onDevice" />
+              {{ addedIndicator$() }}
+            </template>
+
+            <KButton
+              v-if="isSelected"
+              :text="coreString('removeAction')"
+              :primary="true"
+              :disabled="disableSelectButton"
+              @click="removeResource"
+            />
+            <KButton
+              v-else
+              :text="addText$()"
+              :primary="false"
+              :disabled="disableSelectButton"
+              @click="addResource"
+            />
+          </div>
+        </template>
+      </KGridItem>
+    </KGrid>
+
+    <KBreadcrumbs
+      :items="breadcrumbs"
+      :showSingleItem="true"
+    />
+
+    <h5>
+      <KLabeledIcon :icon="content.kind">
+        <template>
+          {{ content.title }}
+        </template>
+      </KLabeledIcon>
+    </h5>
+
+    <ContentArea
+      :header="questionLabel(selectedQuestionIndex)"
+      :selectedQuestion="selectedQuestion"
+      :content="content"
+      :isExercise="isExercise"
+    />
+
+    <SlotTruncator
+      v-if="description"
+      :maxHeight="75"
+      :showViewMore="true"
+    >
+      <!-- eslint-disable vue/no-v-html -->
+      <p
+        dir="auto"
+        v-html="description"
+      ></p>
+      <!-- eslint-enable -->
+    </SlotTruncator>
+
+    <template>
+      <HeaderTable class="license-detail-style">
+        <HeaderTableRow :keyText="coreString('suggestedTime')">
+          <template #value>
+            {{ content.duration ? getTime(content.duration) : 'Not available' }}
+          </template>
+        </HeaderTableRow>
+
+        <HeaderTableRow :keyText="licenseDataHeader$()">
+          <template #value>
+            {{ licenseName }}
+          </template>
+        </HeaderTableRow>
+
+        <HeaderTableRow :keyText="copyrightHolderDataHeader$()">
+          <template #value>
+            {{ content.license_owner }}
+          </template>
+        </HeaderTableRow>
+      </HeaderTable>
+    </template>
+  </div>
+
+</template>
+
+
+<script>
+
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
+  import { licenseLongName } from 'kolibri/uiText/licenses';
+  import markdownIt from 'markdown-it';
+  import SlotTruncator from 'kolibri-common/components/SlotTruncator';
+  import ContentArea from '../../LessonSelectionContentPreviewPage/LessonContentPreview/ContentArea.vue';
+  import commonCoach from '../../../common';
+  import { PageNames } from '../../../../constants/index';
+
+  export default {
+    name: 'PreviewContent',
+    components: {
+      ContentArea,
+      SlotTruncator,
+    },
+    mixins: [commonCoreStrings, commonCoach],
+    setup() {
+      const { addText$, copyrightHolderDataHeader$, licenseDataHeader$, addedIndicator$ } =
+        searchAndFilterStrings;
+
+      return {
+        addText$,
+        licenseDataHeader$,
+        copyrightHolderDataHeader$,
+        addedIndicator$,
+      };
+    },
+    props: {
+      currentContentNode: {
+        type: Object,
+        required: true,
+      },
+      ancestors: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      isSelected: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        selectedQuestionIndex: 0,
+        disableSelectButton: false,
+      };
+    },
+    computed: {
+      breadcrumbs() {
+        return [
+          { text: this.coreString('channelsLabel'), link: this.channelsLink },
+          ...this.ancestors.map(a => ({
+            text: a.title,
+            link: this.topicsLink(a.id),
+          })),
+        ];
+      },
+      isExercise() {
+        return this.content.kind === 'exercise';
+      },
+      selectedQuestion() {
+        if (this.isExercise) {
+          return this.questions[this.selectedQuestionIndex];
+        }
+        return '';
+      },
+      licenseName() {
+        return licenseLongName(this.content.license_name);
+      },
+      content() {
+        return this.currentContentNode;
+      },
+      channelsLink() {
+        return this.selectionRootLink();
+      },
+      description() {
+        if (this.content && this.content.description) {
+          const md = new markdownIt('zero', { breaks: true });
+          return md.render(this.content.description);
+        }
+
+        return undefined;
+      },
+    },
+    methods: {
+      topicsLink(topicId) {
+        return this.topicListingLink({ ...this.$route.params, topicId });
+      },
+      topicListingLink({ topicId }) {
+        return this.$router.getRoute(
+          PageNames.LESSON_RESOURCE_SELECTION,
+          { topicId },
+          this.$route.query,
+        );
+      },
+      selectionRootLink() {
+        return this.$router.getRoute(
+          PageNames.LESSON_RESOURCE_SELECTION_ROOT,
+          {},
+          this.$route.query,
+        );
+      },
+      questionLabel(questionIndex) {
+        if (!this.isExercise) {
+          return '';
+        }
+        const questionNumber = questionIndex + 1;
+        return this.coreString('questionNumberLabel', { questionNumber });
+      },
+      addResource() {
+        this.disableSelectButton = true;
+        this.$emit('addResource', this.content);
+      },
+      removeResource() {
+        this.disableSelectButton = true;
+        this.$emit('removeResource', this.content);
+      },
+      getTime(seconds) {
+        return this.$tr('minutes', { value: Math.floor(seconds / 60) });
+      },
+    },
+    $trs: {
+      minutes: {
+        message: '{value, number, integer} {value, plural, one {minute} other {minutes}}',
+        context:
+          'Indicates time spent by learner on a specific activity. Only translate minute/minutes.',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .add-remove-button-style {
+    float: right;
+  }
+
+  .license-detail-style {
+    margin: 30px 0 32px;
+  }
+
+  /deep/ .content-renderer {
+    max-height: 500px;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources.vue
index ab66b490d4..b96dbd43cc 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources.vue
@@ -7,7 +7,19 @@
     @closePanel="() => $router.go(-1)"
     @shouldFocusFirstEl="() => null"
   >
-    <h1>PreviewSelectedResources</h1>
+    <template #header>
+      <div>
+        <h2>{{ manageLessonResourcesTitle$() }}</h2>
+      </div>
+    </template>
+    <PreviewContent
+      :currentContentNode="contentNode"
+      :ancestors="ancestors"
+      :isSelected="isSelected"
+      :questions="questions"
+      @addResource="handleAddResource"
+      @removeResource="handleRemoveResource"
+    />
   </SidePanelModal>
 
 </template>
@@ -15,12 +27,82 @@
 
 <script>
 
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+  import useFetchContentNode from '../../../../composables/useFetchContentNode';
+  import useResourceSelection from '../../../../composables/useResourceSelection';
+  import { coachStrings } from '../../../common/commonCoachStrings';
+  import { PageNames } from '../../../../constants/index';
+  import PreviewContent from './PreviewContent';
 
   export default {
     name: 'PreviewSelectedResources',
     components: {
       SidePanelModal,
+      PreviewContent,
+    },
+    mixins: [commonCoreStrings],
+    setup(props) {
+      const { contentNode, ancestors, questions } = useFetchContentNode(props.contentId);
+      const { selectedResources, selectResources, deselectResources } = useResourceSelection();
+      const { manageLessonResourcesTitle$ } = coachStrings;
+
+      return {
+        contentNode,
+        ancestors,
+        questions,
+        manageLessonResourcesTitle$,
+        selectedResources,
+        selectResources,
+        deselectResources,
+      };
+    },
+    props: {
+      contentId: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        justRemovedResource: false,
+      };
+    },
+    computed: {
+      isSelected() {
+        if (this.justRemovedResource) {
+          return true;
+        }
+        if (this.selectedResources && this.contentNode && this.contentNode.id) {
+          return this.selectedResources.some(
+            resource => resource.contentnode_id === this.contentNode.id,
+          );
+        }
+        return false;
+      },
+    },
+    methods: {
+      handleAddResource(content) {
+        this.routeBack().then(() => {
+          this.selectResources([content]);
+          this.showSnackbarNotification('resourcesAddedWithCount', { count: 1 });
+        });
+      },
+      handleRemoveResource(content) {
+        this.justRemovedResource = true;
+        this.deselectResources([content]);
+        this.routeBack().then(() => {
+          this.showSnackbarNotification('resourcesRemovedWithCount', { count: 1 });
+        });
+      },
+      routeBack() {
+        const { params, query } = this.$route;
+        return this.$router.push({
+          name: PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
+          params: params,
+          query: query,
+        });
+      },
     },
   };
 
diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
index 7cb339ddf7..86b858e77a 100644
--- a/packages/kolibri-common/strings/searchAndFilterStrings.js
+++ b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -44,4 +44,23 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
       '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
     context: 'Indicates the number of resources selected',
   },
+  addText: {
+    message: 'Add',
+    context: 'Button for adding a resource',
+  },
+
+  copyrightHolderDataHeader: {
+    message: 'Copyright holder',
+    context:
+      'Refers to the person or organization who holds the copyright or legal ownership for that resource.',
+  },
+  licenseDataHeader: {
+    message: 'License',
+    context:
+      "Refers to the type of license the learning resource has. For example, 'CC BY-NC' meaning 'Creative Commons: attribution, non-commercial'.",
+  },
+  addedIndicator: {
+    message: 'Added',
+    context: 'Notification that can refer to when resources are added to a lesson, for example.',
+  },
 });