diff --git a/kolibri/plugins/coach/frontend/app.js b/kolibri/plugins/coach/frontend/app.js
index 12585943130..1f6059444cd 100644
--- a/kolibri/plugins/coach/frontend/app.js
+++ b/kolibri/plugins/coach/frontend/app.js
@@ -104,9 +104,11 @@ class CoachToolsModule extends KolibriApp {
         PageNames.COURSES_ASSIGN,
         PageNames.COURSES_ASSIGN_INDEX,
         PageNames.COURSES_ASSIGN_COURSE_DETAILS,
+        PageNames.COURSES_ASSIGN_COURSE_PREVIEW,
         PageNames.COURSES_ASSIGN_SELECT_RECIPIENTS,
         PageNames.COURSE_SUMMARY_ASSIGN,
         PageNames.COURSE_SUMMARY_ASSIGN_COURSE_DETAILS,
+        PageNames.COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW,
         PageNames.COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS,
         PageNames.UNIT_DETAIL,
         PageNames.UNIT_DETAIL_LESSONS,
@@ -180,9 +182,11 @@ class CoachToolsModule extends KolibriApp {
           PageNames.COURSES_ASSIGN,
           PageNames.COURSES_ASSIGN_INDEX,
           PageNames.COURSES_ASSIGN_COURSE_DETAILS,
+          PageNames.COURSES_ASSIGN_COURSE_PREVIEW,
           PageNames.COURSES_ASSIGN_SELECT_RECIPIENTS,
           PageNames.COURSE_SUMMARY_ASSIGN,
           PageNames.COURSE_SUMMARY_ASSIGN_COURSE_DETAILS,
+          PageNames.COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW,
           PageNames.COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS,
           HomeActivityPage.name,
         ].includes(to.name)
diff --git a/kolibri/plugins/coach/frontend/constants/index.js b/kolibri/plugins/coach/frontend/constants/index.js
index ee4e2db38f6..7eb42a93e58 100644
--- a/kolibri/plugins/coach/frontend/constants/index.js
+++ b/kolibri/plugins/coach/frontend/constants/index.js
@@ -83,12 +83,14 @@ export const PageNames = {
   COURSES_ASSIGN: 'COURSES_ASSIGN',
   COURSES_ASSIGN_INDEX: 'COURSES_ASSIGN_INDEX',
   COURSES_ASSIGN_COURSE_DETAILS: 'COURSES_ASSIGN_COURSE_DETAILS',
+  COURSES_ASSIGN_COURSE_PREVIEW: 'COURSES_ASSIGN_COURSE_PREVIEW',
   COURSES_ASSIGN_SELECT_RECIPIENTS: 'COURSES_ASSIGN_SELECT_RECIPIENTS',
   UNIT_DETAIL_LESSONS: 'UNIT_DETAIL_LESSONS',
   UNIT_DETAIL_OBJECTIVES: 'UNIT_DETAIL_OBJECTIVES',
   // Side panel routes accessible from the course summary page
   COURSE_SUMMARY_ASSIGN: 'COURSE_SUMMARY_ASSIGN',
   COURSE_SUMMARY_ASSIGN_COURSE_DETAILS: 'COURSE_SUMMARY_ASSIGN_COURSE_DETAILS',
+  COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW: 'COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW',
   COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS: 'COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS',
 
   /* Attendance */
diff --git a/kolibri/plugins/coach/frontend/routes/coursesRoutes.js b/kolibri/plugins/coach/frontend/routes/coursesRoutes.js
index 04f5bf012be..3a9badb43d3 100644
--- a/kolibri/plugins/coach/frontend/routes/coursesRoutes.js
+++ b/kolibri/plugins/coach/frontend/routes/coursesRoutes.js
@@ -7,6 +7,7 @@ import AssignCourseSidePanel from '../views/courses/sidePanels/AssignCourse/inde
 import CourseDetailsSubpage from '../views/courses/sidePanels/AssignCourse/subpages/CourseDetails.vue';
 import SelectRecipientsSubpage from '../views/courses/sidePanels/AssignCourse/subpages/SelectRecipients.vue';
 import AssignCourseIndexSubpage from '../views/courses/sidePanels/AssignCourse/subpages/AssignCourseIndex.vue';
+import CoursePreviewSidePanel from '../views/courses/sidePanels/AssignCourse/subpages/CoursePreviewSidePanel.vue';
 import { classIdParamRequiredGuard, RouteSegments, COMPACT_UUID_PATTERN } from './utils';
 
 const { OPTIONAL_CLASS, ALL_COURSES, CLASS, COURSE_SESSION } = RouteSegments;
@@ -76,6 +77,11 @@ export default [
             path: ':courseId/course-details',
             component: CourseDetailsSubpage,
           },
+          {
+            name: PageNames.COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW,
+            path: ':courseId/preview',
+            component: CoursePreviewSidePanel,
+          },
           {
             name: PageNames.COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS,
             path: 'select-recipients',
@@ -144,6 +150,11 @@ export default [
             path: ':courseId/course-details',
             component: CourseDetailsSubpage,
           },
+          {
+            name: PageNames.COURSES_ASSIGN_COURSE_PREVIEW,
+            path: ':courseId/preview',
+            component: CoursePreviewSidePanel,
+          },
           {
             name: PageNames.COURSES_ASSIGN_SELECT_RECIPIENTS,
             path: 'select-recipients',
diff --git a/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CourseDetails.vue b/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CourseDetails.vue
index 4a6d033cc44..916101b3868 100644
--- a/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CourseDetails.vue
+++ b/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CourseDetails.vue
@@ -29,6 +29,16 @@
           {{ course.description }}
         </div>
       </section>
+      <KButton
+        :primary="false"
+        appearance="raised-button"
+        :text="previewAction$()"
+        :disabled="loading || !course"
+        class="preview-button"
+        data-testid="preview-button"
+        @click="openPreview"
+      />
+
       <KButton
         v-if="descOverflowing"
         class="view-more"
@@ -202,6 +212,7 @@
         selectRecipientsLabel$,
         preTestLabel$,
         postTestLabel$,
+        previewAction$,
       } = coursesStrings;
 
       const { expandAll$, collapseAll$ } = enhancedQuizManagementStrings;
@@ -266,6 +277,13 @@
         return message;
       });
 
+      function openPreview() {
+        const previewRouteName = route.params.courseSessionId
+          ? PageNames.COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW
+          : PageNames.COURSES_ASSIGN_COURSE_PREVIEW;
+        router.push(overrideRoute(route, { name: previewRouteName }));
+      }
+
       // Description expansion
       const descExpanded = ref(false);
       const courseDescriptionRef = templateRef('courseDescriptionRef');
@@ -282,6 +300,8 @@
         selectRecipients,
         numTestQuestions,
         isPreviewMode,
+        openPreview,
+        previewAction$,
 
         courseSubtitle,
         backAction$,
@@ -373,4 +393,8 @@
     text-align: right;
   }
 
+  .preview-button {
+    margin-bottom: 16px;
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CoursePreviewSidePanel.vue b/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CoursePreviewSidePanel.vue
new file mode 100644
index 00000000000..075e14b6e99
--- /dev/null
+++ b/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CoursePreviewSidePanel.vue
@@ -0,0 +1,240 @@
+<template>
+
+  <SidePanelLayout
+    :title="previewCourseResourcesTitle$()"
+    :goBack="goBack"
+  >
+    <!-- :key remounts on ID change: useFetchContentNode only fetches once in setup(),
+       so without a fresh instance, switching resources would show stale data
+      therefore, don't delete :key -->
+    <CourseResourcePreview
+      v-if="previewContentId"
+      :key="previewContentId"
+      :contentId="previewContentId"
+      :breadcrumbItems="breadcrumbItems"
+    />
+
+    <template v-else>
+      <KCircularLoader v-if="loading" />
+      <div v-else-if="children">
+        <div
+          v-if="topic"
+          class="topic-header"
+        >
+          <h2
+            class="topic-title"
+            dir="auto"
+          >
+            {{ topic.title }}
+          </h2>
+        </div>
+
+        <KBreadcrumbs
+          v-if="topic && breadcrumbItems.length > 1"
+          :items="breadcrumbItems"
+        />
+
+        <KCardGrid layout="1-1-1">
+          <component
+            :is="child.is_leaf ? 'AccessibleResourceCard' : 'AccessibleFolderCard'"
+            v-for="child in children"
+            :key="child.id"
+            :to="child.is_leaf ? getResourceRoute(child.id) : getTopicRoute(child.id)"
+            :contentNode="child"
+            :headingLevel="3"
+            :showBookmarkButton="false"
+          />
+        </KCardGrid>
+
+        <KButton
+          v-if="hasMore && !loadingMore"
+          :primary="false"
+          class="load-more-button"
+          :text="viewMoreAction$()"
+          @click="fetchMore"
+        />
+        <KCircularLoader
+          v-if="loadingMore"
+          :delay="false"
+        />
+      </div>
+    </template>
+  </SidePanelLayout>
+
+</template>
+
+
+<script>
+
+  import { ref, computed, watch } from 'vue';
+  import { useRoute, useRouter } from 'vue-router/composables';
+  import SidePanelLayout from 'kolibri-common/components/courses/sidePanel/SidePanelLayout';
+  import useFetch from 'kolibri-common/composables/useFetch';
+  import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
+  import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+  import { coursesStrings } from 'kolibri-common/strings/coursesStrings';
+  import AccessibleFolderCard from 'kolibri-common/components/Cards/AccessibleFolderCard';
+  import AccessibleResourceCard from 'kolibri-common/components/Cards/AccessibleResourceCard';
+  import { overrideRoute } from '../../../../../utils';
+  import { PageNames } from '../../../../../constants';
+  import CourseResourcePreview from './CourseResourcePreview';
+
+  export default {
+    name: 'CoursePreviewSidePanel',
+    components: {
+      SidePanelLayout,
+      AccessibleFolderCard,
+      AccessibleResourceCard,
+      CourseResourcePreview,
+    },
+    setup() {
+      const route = useRoute();
+      const router = useRouter();
+      const topic = ref(null);
+      const { viewMoreAction$ } = coreStrings;
+      const { previewCourseResourcesTitle$, selectCourseLabel$ } = coursesStrings;
+
+      const currentTopicId = computed(() => route.query.previewTopicId ?? route.params.courseId);
+
+      const previewContentId = computed(() => route.query.previewContentId ?? null);
+
+      // Fetches the topic node and stores it (for title + parent navigation),
+      // then returns its children for useFetch to manage as the paginated list.
+      // _topicFetchId guards against stale responses
+      let _topicFetchId = 0;
+      async function loadTopicAndChildren(topicId) {
+        _topicFetchId += 1;
+        const fetchId = _topicFetchId;
+        const newTopic = await ContentNodeResource.fetchTree({ id: topicId });
+        if (fetchId === _topicFetchId) {
+          topic.value = newTopic;
+        }
+        return newTopic.children || { results: [] };
+      }
+
+      const {
+        data: children,
+        loading,
+        hasMore,
+        fetchMore,
+        loadingMore,
+        fetchData,
+      } = useFetch({
+        fetchMethod: () => loadTopicAndChildren(currentTopicId.value),
+        fetchMoreMethod: more =>
+          ContentNodeResource.fetchTree({ id: currentTopicId.value, params: more.params }).then(
+            t => t.children || { results: [] },
+          ),
+      });
+
+      watch(currentTopicId, () => fetchData(), { immediate: true });
+
+      const breadcrumbItems = computed(() => {
+        if (!topic.value) {
+          return [];
+        }
+        const ancestors = topic.value.ancestors || [];
+        const courseIndex = ancestors.findIndex(a => a.id === route.params.courseId);
+        const fromCourse = courseIndex === -1 ? [] : ancestors.slice(courseIndex);
+        const items = [...fromCourse, topic.value].map(t => ({
+          text: t.title,
+          link: getTopicRoute(t.id),
+        }));
+        // The COURSES_ASSIGN_INDEX course-picker list only exists in the "assign a new
+        // course" flow, not when previewing from an already-assigned course's summary
+        // page, so this leading crumb is skipped there.
+        if (!route.params.courseSessionId) {
+          items.unshift({ text: selectCourseLabel$(), link: getCoursesIndexRoute() });
+        }
+        return items;
+      });
+
+      function getTopicRoute(topicId) {
+        return overrideRoute(route, {
+          query: { previewTopicId: topicId, previewContentId: undefined },
+        });
+      }
+
+      function getCoursesIndexRoute() {
+        return overrideRoute(route, {
+          name: PageNames.COURSES_ASSIGN_INDEX,
+          query: { previewTopicId: undefined, previewContentId: undefined },
+        });
+      }
+
+      function getResourceRoute(resourceId) {
+        return overrideRoute(route, { query: { previewContentId: resourceId } });
+      }
+
+      function exitPreview() {
+        const detailsRouteName = route.params.courseSessionId
+          ? PageNames.COURSE_SUMMARY_ASSIGN_COURSE_DETAILS
+          : PageNames.COURSES_ASSIGN_COURSE_DETAILS;
+        router.push(
+          overrideRoute(route, {
+            name: detailsRouteName,
+            query: { previewTopicId: undefined, previewContentId: undefined },
+          }),
+        );
+      }
+
+      function goBackHandler() {
+        if (previewContentId.value) {
+          router.push(overrideRoute(route, { query: { previewContentId: undefined } }));
+        } else if (currentTopicId.value !== route.params.courseId) {
+          router.push(getTopicRoute(topic.value.parent));
+        } else {
+          exitPreview();
+        }
+      }
+
+      // topic.value isn't reset when a new topic starts fetching, so while loading,
+      // or if the fetch fails, it may still hold stale data (or none at all). Hide
+      // the back button in both cases rather than navigating to a wrong/missing parent.
+      const goBack = computed(() => {
+        const isAmbiguousParent = computed(
+          () =>
+            !previewContentId.value &&
+            currentTopicId.value !== route.params.courseId &&
+            topic.value?.id !== currentTopicId.value,
+        );
+        return isAmbiguousParent.value ? null : goBackHandler;
+      });
+
+      return {
+        topic,
+        children,
+        loading,
+        hasMore,
+        fetchMore,
+        loadingMore,
+        previewContentId,
+        breadcrumbItems,
+        getTopicRoute,
+        getResourceRoute,
+        goBack,
+        viewMoreAction$,
+        previewCourseResourcesTitle$,
+      };
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .topic-header {
+    margin-bottom: 16px;
+  }
+
+  .topic-title {
+    margin: 0;
+    font-size: 18px;
+  }
+
+  .load-more-button {
+    margin-top: 2em;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CourseResourcePreview.vue b/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CourseResourcePreview.vue
new file mode 100644
index 00000000000..559a65e1196
--- /dev/null
+++ b/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CourseResourcePreview.vue
@@ -0,0 +1,103 @@
+<template>
+
+  <div>
+    <KCircularLoader v-if="loading && !contentNode" />
+    <div v-else-if="contentNode">
+      <h2 class="resource-title">
+        <KLabeledIcon>
+          <template #icon>
+            <LearningActivityIcon :kind="contentNode.learning_activities || []" />
+          </template>
+          <template>
+            {{ contentNode.title }}
+          </template>
+        </KLabeledIcon>
+      </h2>
+
+      <KBreadcrumbs
+        v-if="breadcrumbItems.length"
+        :items="breadcrumbItems"
+      />
+
+      <QuestionsAccordion
+        v-if="isExercise"
+        :questions="exerciseQuestions"
+        :getQuestionContent="getQuestionContent"
+        :isSelectable="false"
+      />
+      <PreviewContent
+        v-else
+        :currentContentNode="contentNode"
+        :ancestors="ancestors"
+        :questions="questions"
+        :isExercise="false"
+      />
+
+      <PreviewMetadata :contentNode="contentNode" />
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import { ContentNodeKinds } from 'kolibri/constants';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
+  import useFetchContentNode from '../../../../../composables/useFetchContentNode';
+  import PreviewContent from '../../../../common/resourceSelection/subPages/PreviewSelectedResources/PreviewContent';
+  import PreviewMetadata from '../../../../common/resourceSelection/subPages/PreviewSelectedResources/PreviewMetadata';
+  import QuestionsAccordion from '../../../../common/QuestionsAccordion';
+
+  export default {
+    name: 'CourseResourcePreview',
+    components: {
+      LearningActivityIcon,
+      PreviewContent,
+      PreviewMetadata,
+      QuestionsAccordion,
+    },
+    setup(props) {
+      const { contentNode, ancestors, questions, loading, exerciseQuestions } = useFetchContentNode(
+        props.contentId,
+      );
+
+      const isExercise = computed(() => contentNode.value?.kind === ContentNodeKinds.EXERCISE);
+
+      function getQuestionContent() {
+        return contentNode.value;
+      }
+
+      return {
+        contentNode,
+        ancestors,
+        questions,
+        loading,
+        exerciseQuestions,
+        isExercise,
+        getQuestionContent,
+      };
+    },
+    props: {
+      contentId: {
+        type: String,
+        required: true,
+      },
+      breadcrumbItems: {
+        type: Array,
+        default: () => [],
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .resource-title {
+    margin: 16px 0 24px;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/__tests__/CoursePreviewSidePanel.spec.js b/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/__tests__/CoursePreviewSidePanel.spec.js
new file mode 100644
index 00000000000..eed3983c36f
--- /dev/null
+++ b/kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/__tests__/CoursePreviewSidePanel.spec.js
@@ -0,0 +1,248 @@
+/* global flushPromises */
+import { reactive } from 'vue';
+import { render, screen, fireEvent } from '@testing-library/vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
+import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+import { coursesStrings } from 'kolibri-common/strings/coursesStrings';
+import { PageNames } from '../../../../../../constants';
+import CoursePreviewSidePanel from '../CoursePreviewSidePanel.vue';
+
+const { backAction$, saveToBookmarks$ } = coreStrings;
+const { selectCourseLabel$ } = coursesStrings;
+const TEST_ROUTES = [
+  { path: '/', name: PageNames.COURSES_ASSIGN_COURSE_DETAILS },
+  { path: '/index', name: PageNames.COURSES_ASSIGN_INDEX },
+];
+
+jest.mock('vue-router/composables', () => ({ useRoute: jest.fn(), useRouter: jest.fn() }));
+jest.mock('kolibri-common/apiResources/ContentNodeResource');
+
+describe('CoursePreviewSidePanel', () => {
+  let mockRoute;
+  let push;
+
+  beforeEach(() => {
+    mockRoute = reactive({
+      params: { courseId: 'course-1' },
+      query: { previewTopicId: 'topic-B', previewContentId: undefined },
+      name: PageNames.COURSES_ASSIGN_COURSE_DETAILS,
+    });
+    push = jest.fn();
+    useRoute.mockReturnValue(mockRoute);
+    useRouter.mockReturnValue({ push });
+  });
+
+  it('renders the topic once its fetch resolves', async () => {
+    const topicTitle = 'Topic B';
+    ContentNodeResource.fetchTree.mockResolvedValue({
+      id: 'topic-B',
+      title: topicTitle,
+      parent: 'topic-A',
+      children: { results: [] },
+    });
+
+    render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+    await flushPromises();
+
+    expect(screen.getByRole('heading', { name: topicTitle, level: 2 })).toBeInTheDocument();
+  });
+
+  it('does not render a bookmark button on resource cards', async () => {
+    const resourceTitle = 'Resource 1';
+    ContentNodeResource.fetchTree.mockResolvedValue({
+      id: 'topic-B',
+      title: 'Topic B',
+      parent: 'topic-A',
+      children: {
+        results: [
+          {
+            id: 'resource-1',
+            title: resourceTitle,
+            is_leaf: true,
+            learning_activities: [],
+          },
+        ],
+      },
+    });
+
+    render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+    await flushPromises();
+
+    expect(screen.getByRole('heading', { name: resourceTitle, level: 3 })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: saveToBookmarks$() })).not.toBeInTheDocument();
+  });
+
+  describe('breadcrumb "Courses" crumb', () => {
+    it('links to the course picker when assigning a new course', async () => {
+      ContentNodeResource.fetchTree.mockResolvedValue({
+        id: 'topic-B',
+        title: 'Topic B',
+        parent: 'topic-A',
+        children: { results: [] },
+      });
+
+      render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+      await flushPromises();
+
+      // KBreadcrumbs collapses non-last crumbs into an offscreen/dropdown clone whenever
+      // it can't measure real widths (as in jsdom), so a role/visibility-based query would
+      // miss it; check that the crumb resolves to the course-picker link.
+      const matches = screen.getAllByText(selectCourseLabel$());
+      const link = matches.map(el => el.closest('a')).find(Boolean);
+      expect(link).toHaveAttribute('href', expect.stringContaining('/index'));
+    });
+
+    it('is omitted when previewing from an already-assigned course summary', async () => {
+      mockRoute.params = { courseId: 'course-1', courseSessionId: 'session-1' };
+      ContentNodeResource.fetchTree.mockResolvedValue({
+        id: 'topic-B',
+        title: 'Topic B',
+        parent: 'topic-A',
+        children: { results: [] },
+      });
+
+      render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+      await flushPromises();
+
+      expect(screen.queryAllByText(selectCourseLabel$())).toHaveLength(0);
+    });
+  });
+
+  describe('goBack', () => {
+    it('goes from a resource back to its topic', async () => {
+      mockRoute.query = { previewTopicId: 'topic-B', previewContentId: 'resource-1' };
+      ContentNodeResource.fetchTree.mockResolvedValue({
+        id: 'topic-B',
+        parent: 'topic-A',
+        children: { results: [] },
+      });
+      ContentNodeResource.fetchModel.mockResolvedValue({ id: 'resource-1', ancestors: [] });
+
+      render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+      await flushPromises();
+
+      await fireEvent.click(screen.getByRole('button', { name: backAction$() }));
+
+      expect(push).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({
+            previewTopicId: 'topic-B',
+            previewContentId: undefined,
+          }),
+        }),
+      );
+    });
+
+    it('goes from a topic up to its parent topic', async () => {
+      ContentNodeResource.fetchTree.mockResolvedValue({
+        id: 'topic-B',
+        parent: 'topic-A',
+        children: { results: [] },
+      });
+
+      render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+      await flushPromises();
+
+      await fireEvent.click(screen.getByRole('button', { name: backAction$() }));
+
+      expect(push).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({
+            previewTopicId: 'topic-A',
+            previewContentId: undefined,
+          }),
+        }),
+      );
+    });
+
+    it('exits preview when going back from the course root', async () => {
+      mockRoute.query = { previewTopicId: 'course-1', previewContentId: undefined };
+      ContentNodeResource.fetchTree.mockResolvedValue({
+        id: 'course-1',
+        parent: null,
+        children: { results: [] },
+      });
+
+      render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+      await flushPromises();
+
+      await fireEvent.click(screen.getByRole('button', { name: backAction$() }));
+
+      expect(push).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: PageNames.COURSES_ASSIGN_COURSE_DETAILS,
+          query: expect.objectContaining({
+            previewTopicId: undefined,
+            previewContentId: undefined,
+          }),
+        }),
+      );
+    });
+  });
+
+  it('hides the back button rather than navigating to a stale parent while the next topic is still loading', async () => {
+    let resolveTopicC;
+    const topicCFetch = new Promise(resolve => {
+      resolveTopicC = resolve;
+    });
+
+    ContentNodeResource.fetchTree.mockImplementation(({ id }) => {
+      if (id === 'topic-B') {
+        return Promise.resolve({ id: 'topic-B', parent: 'topic-A', children: { results: [] } });
+      }
+      if (id === 'topic-C') {
+        return topicCFetch;
+      }
+      throw new Error(`unexpected fetchTree id: ${id}`);
+    });
+
+    render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+    // let the initial topic-B fetch resolve so topic.value is populated
+    await flushPromises();
+
+    // navigate deeper into topic-C; this starts a new (still-pending) fetch
+    mockRoute.query = { ...mockRoute.query, previewTopicId: 'topic-C' };
+    await flushPromises();
+
+    // topic.value still holds topic-B's stale data while topic-C is in flight,
+    // so the back button should be hidden rather than clickable
+    expect(screen.queryByRole('button', { name: backAction$() })).not.toBeInTheDocument();
+
+    // once the fetch resolves, the back button reappears
+    resolveTopicC({ id: 'topic-C', parent: 'topic-B', children: { results: [] } });
+    await flushPromises();
+
+    expect(screen.getByRole('button', { name: backAction$() })).toBeInTheDocument();
+  });
+
+  it('hides the back button rather than navigating to a stale parent when the topic fetch fails', async () => {
+    mockRoute.query = { previewTopicId: 'topic-C', previewContentId: undefined };
+    mockRoute.params = { courseId: 'course-1' };
+    ContentNodeResource.fetchTree.mockRejectedValue(new Error('network error'));
+
+    render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+    await flushPromises();
+
+    expect(screen.queryByRole('button', { name: backAction$() })).not.toBeInTheDocument();
+  });
+
+  it('does not crash when previewContentId is already set before the topic fetch resolves', async () => {
+    mockRoute.query = { previewTopicId: 'topic-B', previewContentId: 'resource-1' };
+    ContentNodeResource.fetchModel.mockResolvedValue({ id: 'resource-1', ancestors: [] });
+
+    let resolveTopicB;
+    ContentNodeResource.fetchTree.mockImplementation(
+      () =>
+        new Promise(resolve => {
+          resolveTopicB = resolve;
+        }),
+    );
+
+    render(CoursePreviewSidePanel, { routes: TEST_ROUTES });
+    await flushPromises();
+
+    resolveTopicB({ id: 'topic-B', parent: 'topic-A', children: { results: [] } });
+    await flushPromises();
+  });
+});
diff --git a/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue b/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
index 93dbacb23c6..b8784fdfa2f 100644
--- a/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
@@ -36,6 +36,7 @@
     <template #footer>
       <div class="default-icon">
         <KIconButton
+          v-if="showBookmarkButton"
           :icon="isBookmarked ? 'bookmark' : 'bookmarkEmpty'"
           size="mini"
           :color="$themePalette.grey.v_700"
@@ -97,6 +98,10 @@
         type: Boolean,
         default: false,
       },
+      showBookmarkButton: {
+        type: Boolean,
+        default: true,
+      },
       headingLevel: {
         type: Number,
         required: true,
diff --git a/packages/kolibri-common/components/SlotTruncator.vue b/packages/kolibri-common/components/SlotTruncator.vue
index 54b0c81b133..6adc4b06ae8 100644
--- a/packages/kolibri-common/components/SlotTruncator.vue
+++ b/packages/kolibri-common/components/SlotTruncator.vue
@@ -110,12 +110,14 @@
   }
 
   .truncated {
+    position: relative;
     overflow: hidden;
   }
 
   .overlay {
     position: absolute;
     width: 100%;
+    pointer-events: none;
     background: linear-gradient(rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 1));
   }
 
diff --git a/packages/kolibri-common/strings/coursesStrings.js b/packages/kolibri-common/strings/coursesStrings.js
index 87f487c3195..3ea4e4d0fba 100644
--- a/packages/kolibri-common/strings/coursesStrings.js
+++ b/packages/kolibri-common/strings/coursesStrings.js
@@ -213,6 +213,14 @@ export const coursesStrings = createTranslator('CoursesStrings', {
     message: 'Resume Course',
     context: 'Action label for button to resume a course',
   },
+  previewAction: {
+    message: 'Preview',
+    context: 'Action label for button to preview course resources before starting or assigning.',
+  },
+  previewCourseResourcesTitle: {
+    message: 'Preview Course Resources',
+    context: 'Title for the side panel that shows a browsable tree of course resources.',
+  },
   unitNumberLabel: {
     message: 'Unit {number}',
     context: 'Label for the unit number shown in the course unit view',