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 00000000000..5da15d364b9
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/composables/useFetchContentNode.js
@@ -0,0 +1,41 @@
+import { ref, getCurrentInstance } from 'vue';
+import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
+
+export default function useFetchContentNode(contentId) {
+  const contentNode = ref({});
+  const ancestors = ref([]);
+  const questions = ref([]);
+  const loading = ref(true);
+  const store = getCurrentInstance().proxy.$store;
+
+  const fetchContentNode = async () => {
+    ContentNodeResource.fetchModel({
+      id: contentId,
+      getParams: { no_available_filtering: true },
+    })
+      .then(node => {
+        loading.value = false;
+        contentNode.value = node;
+
+        if (node.ancestors.length) {
+          ancestors.value = node.ancestors;
+        }
+
+        if (node.assessmentmetadata) {
+          questions.value = node.assessmentmetadata.assessment_item_ids;
+        }
+      })
+      .catch(error => {
+        store.dispatch('handleApiError', { error });
+      });
+  };
+
+  fetchContentNode();
+
+  return {
+    loading,
+    ancestors,
+    contentNode,
+    questions,
+  };
+}
diff --git a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
index 4f81298cf42..82a87013979 100644
--- a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
@@ -37,7 +37,7 @@ import {
 import LessonLearnerExercisePage from '../views/lessons/reports/LessonLearnerExercisePage.vue';
 import QuestionLearnersPage from '../views/common/reports/QuestionLearnersPage.vue';
 import EditLessonDetails from '../views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails';
-import PreviewSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources';
+import PreviewSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/PreviewSelectedResources';
 import LessonResourceSelection from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue';
 import SearchFilters from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue';
 import SelectionIndex from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectionIndex.vue';
@@ -172,6 +172,17 @@ export default [
             path: 'preview-resources',
             component: ManageSelectedResources,
           },
+          {
+            name: PageNames.LESSON_PREVIEW_RESOURCE,
+            path: 'preview',
+            component: PreviewSelectedResources,
+            props: toRoute => {
+              const contentId = toRoute.query.contentId;
+              return {
+                contentId,
+              };
+            },
+          },
         ],
       },
       {
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 08c64593ac1..e22f7e01109 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
@@ -37,7 +37,7 @@
   import { ContentNodeKinds } from 'kolibri/constants';
   import ContentCardList from '../../lessons/LessonResourceSelectionPage/ContentCardList.vue';
   import ResourceSelectionBreadcrumbs from '../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
-  import { ViewMoreButtonStates } from '../../../constants';
+  import { ViewMoreButtonStates, PageNames } from '../../../constants';
 
   export default {
     name: 'UpdatedResourceSelection',
@@ -148,12 +148,18 @@
     },
     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: {
+            ...query,
+            contentId: content.id,
+          },
+        };
       },
       topicsLink(topicId) {
         const route = this.getTopicLink?.(topicId);
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
index 8ff6e6c79ef..42d9e925a43 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
@@ -21,7 +21,6 @@
     <div v-if="subpageLoading">
       <KCircularLoader />
     </div>
-
     <router-view
       v-else
       :setTitle="setTitle"
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/PreviewSelectedResources/PreviewContent.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/PreviewSelectedResources/PreviewContent.vue
new file mode 100644
index 00000000000..e23fefe7ef8
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/PreviewSelectedResources/PreviewContent.vue
@@ -0,0 +1,252 @@
+<template>
+
+  <div>
+    <div class="channel-header">
+      <p>
+        {{ coreString('selectFromChannels') }}
+      </p>
+
+      <div>
+        <template v-if="isSelected">
+          <KIcon icon="onDevice" />
+          {{ addedIndicator$() }}
+        </template>
+
+        <KButton
+          v-if="isSelected"
+          :text="coreString('removeAction')"
+          :primary="true"
+          @click="removeResource()"
+        />
+        <KButton
+          v-else
+          :text="addText$()"
+          :primary="false"
+          @click="addResource()"
+        />
+      </div>
+    </div>
+
+    <ResourceSelectionBreadcrumbs
+      v-if="ancestors.length"
+      :ancestors="[...ancestors, currentContentNode]"
+      :channelsLink="channelsLink"
+      :topicsLink="topicsLink"
+    />
+
+    <h2>
+      <KLabeledIcon :label="currentContentNode.kind">
+        <template #icon>
+          <LearningActivityIcon :kind="learningActivities" />
+        </template>
+        <template>
+          {{ currentContentNode.title }}
+        </template>
+      </KLabeledIcon>
+    </h2>
+
+    <ContentArea
+      :header="questionLabel(selectedQuestionIndex)"
+      :selectedQuestion="selectedQuestion"
+      :content="currentContentNode"
+      :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>
+
+    <HeaderTable class="license-detail-style">
+      <HeaderTableRow :keyText="coreString('suggestedTime')">
+        <template #value>
+          {{
+            currentContentNode.duration
+              ? getTime(currentContentNode.duration)
+              : notAvailableLabel$()
+          }}
+        </template>
+      </HeaderTableRow>
+
+      <HeaderTableRow :keyText="licenseDataHeader$()">
+        <template #value>
+          {{ licenseName }}
+        </template>
+      </HeaderTableRow>
+
+      <HeaderTableRow :keyText="copyrightHolderDataHeader$()">
+        <template #value>
+          {{ currentContentNode.license_owner }}
+        </template>
+      </HeaderTableRow>
+    </HeaderTable>
+  </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 { ContentNodeKinds } from 'kolibri/constants';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
+  import SlotTruncator from 'kolibri-common/components/SlotTruncator';
+  import ContentArea from '../../../../../LessonSelectionContentPreviewPage/LessonContentPreview/ContentArea.vue';
+  import commonCoach from '../../../../../../common';
+  import { PageNames } from '../../../../../../../constants/index';
+  import ResourceSelectionBreadcrumbs from '../../../../../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
+
+  export default {
+    name: 'PreviewContent',
+    components: {
+      ContentArea,
+      SlotTruncator,
+      LearningActivityIcon,
+      ResourceSelectionBreadcrumbs,
+    },
+    mixins: [commonCoreStrings, commonCoach],
+    setup() {
+      const {
+        addText$,
+        copyrightHolderDataHeader$,
+        licenseDataHeader$,
+        addedIndicator$,
+        notAvailableLabel$,
+        minutes$,
+      } = searchAndFilterStrings;
+
+      return {
+        addText$,
+        licenseDataHeader$,
+        copyrightHolderDataHeader$,
+        addedIndicator$,
+        notAvailableLabel$,
+        minutes$,
+      };
+    },
+    props: {
+      currentContentNode: {
+        type: Object,
+        required: true,
+      },
+      ancestors: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      isSelected: {
+        type: Boolean,
+        required: true,
+      },
+      questions: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+    },
+    data() {
+      return {
+        selectedQuestionIndex: 0,
+      };
+    },
+    computed: {
+      channelsLink() {
+        return {
+          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+        };
+      },
+      isExercise() {
+        return this.currentContentNode.kind === ContentNodeKinds.EXERCISE;
+      },
+      selectedQuestion() {
+        if (this.isExercise) {
+          return this.questions[this.selectedQuestionIndex];
+        }
+        return '';
+      },
+      licenseName() {
+        return licenseLongName(this.currentContentNode.license_name);
+      },
+      description() {
+        if (this.currentContentNode && this.currentContentNode.description) {
+          const md = new markdownIt('zero', { breaks: true });
+          return md.render(this.currentContentNode.description);
+        }
+
+        return undefined;
+      },
+      learningActivities() {
+        if (this.currentContentNode.learning_activities) {
+          return this.currentContentNode.learning_activities;
+        }
+        return [];
+      },
+    },
+    methods: {
+      topicsLink(topicId) {
+        const { params, query } = this.$route;
+
+        return {
+          name: PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
+          params: params,
+          query: {
+            ...query,
+            topicId,
+          },
+        };
+      },
+      questionLabel(questionIndex) {
+        if (!this.isExercise) {
+          return '';
+        }
+        const questionNumber = questionIndex + 1;
+        return this.coreString('questionNumberLabel', { questionNumber });
+      },
+      addResource() {
+        this.$emit('addResource', this.currentContentNode);
+      },
+      removeResource() {
+        this.$emit('removeResource', this.currentContentNode);
+      },
+      getTime(seconds) {
+        return this.minutes$({ value: Math.floor(seconds / 60) });
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .license-detail-style {
+    margin-top: 10px;
+  }
+
+  /deep/ .content-renderer {
+    position: relative;
+    max-height: 500px;
+  }
+
+  .channel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .channel-header p {
+    font-weight: 600;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/PreviewSelectedResources/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/PreviewSelectedResources/index.vue
new file mode 100644
index 00000000000..8bee699ab97
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/PreviewSelectedResources/index.vue
@@ -0,0 +1,106 @@
+<template>
+
+  <div>
+    <KCircularLoader v-if="loading && !contentNode" />
+    <PreviewContent
+      v-else
+      :currentContentNode="contentNode"
+      :ancestors="ancestors"
+      :isSelected="isSelected"
+      :questions="questions"
+      @addResource="handleAddResource"
+      @removeResource="handleRemoveResource"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { getCurrentInstance, ref } from 'vue';
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import useFetchContentNode from '../../../../../../../composables/useFetchContentNode';
+  import { coachStrings } from '../../../../../../common/commonCoachStrings';
+  import { PageNames } from '../../../../../../../constants/index';
+  import PreviewContent from './PreviewContent';
+
+  export default {
+    name: 'PreviewSelectedResources',
+    components: {
+      PreviewContent,
+    },
+    mixins: [commonCoreStrings],
+    setup(props) {
+      const previousRoute = ref(null);
+      const instance = getCurrentInstance();
+
+      const { contentNode, ancestors, questions, loading } = useFetchContentNode(props.contentId);
+      const { manageLessonResourcesTitle$ } = coachStrings;
+
+      props.setTitle(manageLessonResourcesTitle$());
+      props.setGoBack(null);
+
+      const routeBack = () => {
+        const backRoute = previousRoute.value?.name
+          ? previousRoute.value
+          : {
+            name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+          };
+        instance.proxy.$router.push(backRoute);
+      };
+
+      return {
+        contentNode,
+        ancestors,
+        questions,
+        loading,
+        routeBack,
+        // eslint-disable-next-line vue/no-unused-properties
+        previousRoute,
+      };
+    },
+    props: {
+      contentId: {
+        type: String,
+        required: true,
+      },
+      setTitle: {
+        type: Function,
+        default: () => {},
+      },
+      setGoBack: {
+        type: Function,
+        default: () => {},
+      },
+      selectedResources: {
+        type: Array,
+        required: true,
+      },
+    },
+    computed: {
+      isSelected() {
+        if (this.selectedResources && this.contentNode) {
+          return this.selectedResources.some(resource => resource.id === this.contentNode.id);
+        }
+        return false;
+      },
+    },
+    beforeRouteEnter(to, from, next) {
+      next(vm => {
+        vm.previousRoute = from;
+      });
+    },
+    methods: {
+      handleAddResource(content) {
+        this.routeBack();
+        this.$emit('selectResources', [content]);
+      },
+      handleRemoveResource(content) {
+        this.routeBack();
+        this.$emit('deselectResources', [content]);
+      },
+    },
+  };
+
+</script>
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
deleted file mode 100644
index ab66b490d4c..00000000000
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-
-  <SidePanelModal
-    alignment="right"
-    sidePanelWidth="700px"
-    closeButtonIconType="close"
-    @closePanel="() => $router.go(-1)"
-    @shouldFocusFirstEl="() => null"
-  >
-    <h1>PreviewSelectedResources</h1>
-  </SidePanelModal>
-
-</template>
-
-
-<script>
-
-  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
-
-  export default {
-    name: 'PreviewSelectedResources',
-    components: {
-      SidePanelModal,
-    },
-  };
-
-</script>
diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
index 6a3e3c89e1d..e60564dc36d 100644
--- a/packages/kolibri-common/strings/searchAndFilterStrings.js
+++ b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -85,4 +85,32 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
     message: 'Choose a category',
     context: 'Label for a selector component to choose a category',
   },
+  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.',
+  },
+  notAvailableLabel: {
+    message: 'Not available',
+    context: 'Message that shows when the value of key is null',
+  },
+  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.',
+  },
 });