diff --git a/src/app/[locale]/courses/contents/[courseId]/page.tsx b/src/app/[locale]/courses/contents/[courseId]/page.tsx
new file mode 100644
index 00000000..7332c63e
--- /dev/null
+++ b/src/app/[locale]/courses/contents/[courseId]/page.tsx
@@ -0,0 +1,54 @@
+import { notFound, redirect } from 'next/navigation'
+import { getCourseById } from '@/database/course/select'
+import { NextContentButton, PreviousContentButton } from '@/src/components/courses/contents/[courseId]/ContentNavigationButtons'
+import { ContentProvider } from '@/src/components/courses/contents/[courseId]/ContentProvider'
+import { ContentRenderer } from '@/src/components/courses/contents/[courseId]/ContentRenderer'
+import { ContentPageBreadcrumbs } from '@/src/components/courses/contents/[courseId]/ContentsPageBreadcrumbs'
+import { ContentSwitchButton } from '@/src/components/courses/contents/[courseId]/ContentSwitchButton'
+import PageHeading from '@/src/components/Shared/PageHeading'
+import { getScopedI18n } from '@/src/i18n/server-localization'
+import _logger from '@/src/lib/log/Logger'
+import getReferer from '@/src/lib/Shared/getReferer'
+
+const logger = _logger.createModuleLogger('/' + import.meta.url.split('/').reverse().slice(0, 2).reverse().join('/')!)
+
+export default async function CourseContentsPage({ params }: { params: Promise<{ courseId: string }> }) {
+  const t = await getScopedI18n('Courses.Contents')
+  const { courseId } = await params
+  const course = await getCourseById(courseId)
+  const referer = await getReferer()
+
+  if (!course) notFound()
+  if (course.contents.length === 0) {
+    logger.info(`Course (id: ${course.id}) has no contents, redirecting user back to ${referer ?? '/courses'} page.`)
+
+    // redirects users to where they came from when redirected by the app, or to the /courses page if user navigated manually.
+    redirect(referer ?? '/courses')
+  }
+
+  return (
+    <>
+      <ContentPageBreadcrumbs course={course} />
+      <PageHeading title={t('title')} description={t('description')} />
+
+      <ContentProvider initialProps={{ contents: course.contents }}>
+        <div className='flex flex-1 gap-8'>
+          <div className='flex flex-1 flex-col gap-6'>
+            <ContentRenderer />
+            <div className='flex justify-between'>
+              <PreviousContentButton />
+              <NextContentButton />
+            </div>
+          </div>
+
+          <div className='hidden flex-col gap-2 @4xl:flex'>
+            <h2 className='font-semibold'>{t('Navigation.title')}</h2>
+            {course.contents.map((c) => (
+              <ContentSwitchButton content={c} key={c.categoryId} />
+            ))}
+          </div>
+        </div>
+      </ContentProvider>
+    </>
+  )
+}
diff --git a/src/components/courses/(hamburger-menu)/CourseActionMenu.tsx b/src/components/courses/(hamburger-menu)/CourseActionMenu.tsx
index 467ae696..03fe08fa 100644
--- a/src/components/courses/(hamburger-menu)/CourseActionMenu.tsx
+++ b/src/components/courses/(hamburger-menu)/CourseActionMenu.tsx
@@ -29,7 +29,7 @@ import { useSession } from '@/src/lib/auth/client'
 import { generateToken } from '@/src/lib/Shared/generateToken'
 import { Course } from '@/src/schemas/CourseSchema'
 
-export default function CourseActionMenu({ id, questions, share_key, owner_id, collaborators }: {} & Course) {
+export default function CourseActionMenu({ id, questions, share_key, owner_id, collaborators, contents }: {} & Course) {
   const t = useScopedI18n('Components.CourseActionMenu')
   const [menuOpen, setMenuOpen] = useState(false)
 
@@ -106,6 +106,18 @@ export default function CourseActionMenu({ id, questions, share_key, owner_id, c
           </DropdownMenuItem>
         </DropdownMenuGroup>
 
+        <DropdownMenuItem
+          className='group justify-between'
+          enableTooltip={contents.length === 0}
+          tooltipOptions={{ ...baseTooltipOptions, content: t('show_course_contents.tooltip') }}
+          onClick={() => {
+            router.push(`${window.location.origin}/courses/contents/${id}`)
+          }}
+          disabled={contents.length === 0}>
+          {t('show_course_contents.label')}
+          <ArrowUpRightIcon className='text-neutral-600 group-data-disabled:text-inherit dark:text-neutral-400 dark:group-data-disabled:text-inherit' />
+        </DropdownMenuItem>
+
         <DropdownMenuSub>
           <DropdownMenuSubTrigger enableTooltip={!hasQuestions} tooltipOptions={{ ...baseTooltipOptions, content: 'This course has no questions, sharing disabled.' }} disabled={!hasQuestions}>
             {t('invite_to_submenu_label')}
diff --git a/src/components/courses/CourseCard.tsx b/src/components/courses/CourseCard.tsx
index 31258974..bcb202a1 100644
--- a/src/components/courses/CourseCard.tsx
+++ b/src/components/courses/CourseCard.tsx
@@ -44,7 +44,7 @@ export function CourseCard(course: Course) {
         <span className='line-clamp-2 text-center text-sm text-balance text-neutral-500 dark:text-neutral-400'>{course.description}</span>
       </div>
       <div className='flex flex-wrap justify-evenly gap-8 px-6'>
-        <StatisticElement label={t('Statistics.questions_label')} value={course.questions.length} />
+        <StatisticElement label={t('Statistics.contents_label')} value={course.contents.length} />
         <StatisticElement
           label={t('Statistics.estimatedTime_label')}
           value={
@@ -53,7 +53,7 @@ export function CourseCard(course: Course) {
             </>
           }
         />
-        <StatisticElement label={t('Statistics.points_label')} value={course.questions.map((q) => q.points).reduce((prev, current) => (prev += current), 0)} />
+        <StatisticElement label={t('Statistics.questions_label')} value={course.questions.length} />
       </div>
       <Footer updatedAt={course.updatedAt} />
     </Card>
diff --git a/src/components/courses/contents/[courseId]/ContentNavigationButtons.tsx b/src/components/courses/contents/[courseId]/ContentNavigationButtons.tsx
new file mode 100644
index 00000000..04ac403d
--- /dev/null
+++ b/src/components/courses/contents/[courseId]/ContentNavigationButtons.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
+import { useContentContext } from '@/src/components/courses/contents/[courseId]/ContentProvider'
+import { Button } from '@/src/components/shadcn/button'
+import { useScopedI18n } from '@/src/i18n/client-localization'
+
+export function NextContentButton() {
+  const t = useScopedI18n('Courses.Contents.Navigation')
+  const { contents, currentContentIndex, setCurrentIndex } = useContentContext()
+
+  if (contents.length <= currentContentIndex + 1) return <div />
+  return (
+    <Button onClick={() => setCurrentIndex((prev) => prev + 1)} variant='ghost' className='group flex h-fit max-w-56 flex-col gap-1'>
+      <span className='self-start text-sm text-muted-foreground'>{t('next_btn_label')}</span>
+      <div className='flex items-center gap-1 group-hover:text-primary group-hover:underline'>
+        {contents.at(currentContentIndex + 1)?.title}
+        <ChevronRightIcon className='transition-transform group-hover:scale-125' />
+      </div>
+    </Button>
+  )
+}
+
+export function PreviousContentButton() {
+  const t = useScopedI18n('Courses.Contents.Navigation')
+  const { contents, currentContentIndex, setCurrentIndex } = useContentContext()
+
+  if (currentContentIndex - 1 < 0) return <div />
+
+  return (
+    <Button onClick={() => setCurrentIndex((prev) => prev - 1)} variant='ghost' className='group flex h-fit max-w-56 flex-col gap-1'>
+      <span className='self-end text-right text-sm text-muted-foreground'>{t('previous_btn_label')}</span>
+      <div className='flex items-center gap-1 group-hover:text-primary group-hover:underline'>
+        <ChevronLeftIcon className='transition-transform group-hover:scale-125' />
+        {contents.at(currentContentIndex - 1)?.title}
+      </div>
+    </Button>
+  )
+}
diff --git a/src/components/courses/contents/[courseId]/ContentProvider.tsx b/src/components/courses/contents/[courseId]/ContentProvider.tsx
new file mode 100644
index 00000000..8fd0db6d
--- /dev/null
+++ b/src/components/courses/contents/[courseId]/ContentProvider.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { createContext, SetStateAction, useContext, useState } from 'react'
+import { Course } from '@/src/schemas/CourseSchema'
+
+type ContextProps = {
+  currentContentIndex: number
+  setCurrentIndex: React.Dispatch<SetStateAction<number>>
+  contents: Course['contents']
+}
+
+const Context = createContext<ContextProps | null>(null)
+
+export function ContentProvider({ children, initialProps }: { children: React.ReactNode; initialProps?: Partial<ContextProps> }) {
+  const [currentIndex, setCurrentIndex] = useState(initialProps?.currentContentIndex ?? 0)
+
+  return <Context.Provider value={{ currentContentIndex: currentIndex, setCurrentIndex, contents: [], ...initialProps }}>{children}</Context.Provider>
+}
+
+export function useContentContext() {
+  const ctx = useContext(Context)
+
+  if (!ctx) throw new Error('useContentContext may only be used within a <ContentProvider />')
+
+  return ctx
+}
diff --git a/src/components/courses/contents/[courseId]/ContentRenderer.tsx b/src/components/courses/contents/[courseId]/ContentRenderer.tsx
new file mode 100644
index 00000000..e9befad4
--- /dev/null
+++ b/src/components/courses/contents/[courseId]/ContentRenderer.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { useContentContext } from '@/src/components/courses/contents/[courseId]/ContentProvider'
+import { RichTextEditor } from '@/src/components/tiptap-examples/RichTextEditor'
+import { cn } from '@/src/lib/Shared/utils'
+
+export function ContentRenderer() {
+  const { contents, currentContentIndex } = useContentContext()
+
+  return <RichTextEditor readOnly defaultContent={contents.at(currentContentIndex)?.content} editorPaneClassname={cn('border-dashed p-4')} />
+}
diff --git a/src/components/courses/contents/[courseId]/ContentSwitchButton.tsx b/src/components/courses/contents/[courseId]/ContentSwitchButton.tsx
new file mode 100644
index 00000000..2f863c82
--- /dev/null
+++ b/src/components/courses/contents/[courseId]/ContentSwitchButton.tsx
@@ -0,0 +1,26 @@
+'use client'
+import { useMemo } from 'react'
+import { BookTextIcon } from 'lucide-react'
+import { useContentContext } from '@/src/components/courses/contents/[courseId]/ContentProvider'
+import { Button } from '@/src/components/shadcn/button'
+import { cn } from '@/src/lib/Shared/utils'
+import { Course } from '@/src/schemas/CourseSchema'
+
+/**
+ * Used to switch between available contents. Shows the title of a given content as the button-label in combination with an icon.
+ */
+export function ContentSwitchButton({ content }: { content: Course['contents'][number] }) {
+  const { contents, currentContentIndex, setCurrentIndex } = useContentContext()
+  const index = useMemo(() => contents.findIndex((c) => c.categoryId === content.categoryId), [content, contents])
+
+  return (
+    <Button
+      disabled={index === -1} // index retrieval was unsuccesful -> switching not possible
+      variant='link'
+      className={cn('w-fit text-ellipsis', index === currentContentIndex ? 'text-primary underline' : 'text-muted-foreground')}
+      onClick={() => setCurrentIndex(index)}>
+      <BookTextIcon />
+      {content.title}
+    </Button>
+  )
+}
diff --git a/src/components/courses/contents/[courseId]/ContentsPageBreadcrumbs.tsx b/src/components/courses/contents/[courseId]/ContentsPageBreadcrumbs.tsx
new file mode 100644
index 00000000..cb7f075d
--- /dev/null
+++ b/src/components/courses/contents/[courseId]/ContentsPageBreadcrumbs.tsx
@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/src/components/shadcn/breadcrumb'
+import { Course } from '@/src/schemas/CourseSchema'
+
+export function ContentPageBreadcrumbs({ course }: { course: Course }) {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href={`/`}>Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href={`/courses`}>Courses</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href={`/courses/edit/${course.id}`}>{course.name}</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+
+        <BreadcrumbPage>Contents</BreadcrumbPage>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/src/components/courses/create/(sections)/ContentSection.tsx b/src/components/courses/create/(sections)/ContentSection.tsx
index a465c1a7..72fa4366 100644
--- a/src/components/courses/create/(sections)/ContentSection.tsx
+++ b/src/components/courses/create/(sections)/ContentSection.tsx
@@ -1,68 +1,106 @@
 'use client'
 
-import { generateHTML } from '@tiptap/core'
-import { PenIcon, PlusCircleIcon, TrashIcon } from 'lucide-react'
+import { Folder, Info, Pen, Plus, Trash2 } from 'lucide-react'
 import CourseContentDialog from '@/src/components/courses/create/(sections)/CourseContentDialog'
 import { useCourseStore } from '@/src/components/courses/create/CreateCourseProvider'
 import { Button } from '@/src/components/shadcn/button'
-import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from '@/src/components/shadcn/card'
+import GenericCard from '@/src/components/Shared/Card'
+import { CardStageJumpButton } from '@/src/components/Shared/CardStageJumpButton'
 import ConfirmationDialog from '@/src/components/Shared/ConfirmationDialog/ConfirmationDialog'
-import { RichTextEditor, RichTextEditorExtensions } from '@/src/components/tiptap-examples/RichTextEditor'
 import { useScopedI18n } from '@/src/i18n/client-localization'
+import { cn } from '@/src/lib/Shared/utils'
 
-export default function ContentSection() {
-  const { contents, removeCourseContent } = useCourseStore((store) => store)
+export default function ContentSection({ jumpBackButton, disabled }: { jumpBackButton?: boolean; disabled?: boolean }) {
+  const { contents } = useCourseStore((store) => store)
   const t = useScopedI18n('Courses.Create.ContentSection')
 
   return (
-    <div className='flex flex-1 flex-col gap-10'>
-      <div className='flex flex-col gap-1'>
-        <h2 className='h-fit text-xl font-semibold'>{t('title')}</h2>
-        <span className='text-muted-foreground'>{t('description')}</span>
+    <GenericCard disableInteractions className='relative flex break-inside-avoid flex-col p-3'>
+      {jumpBackButton && <CardStageJumpButton targetStage={2} />}
+      <div className='-mx-3 -mt-3 flex flex-col rounded-t-md border-b border-neutral-400 bg-neutral-300 p-2 px-3 text-neutral-600 dark:border-neutral-500 dark:bg-neutral-700/60 dark:text-neutral-300'>
+        <div className='flex flex-col gap-0'>
+          <h2 className=''>{t('title')}</h2>
+        </div>
       </div>
 
-      <div className='grid grid-cols-[repeat(auto-fill,minmax(380px,1fr))] gap-12'>
-        <CourseContentDialog mode='create'>
-          <Card className='flex h-full items-center justify-center'>
-            <CardContent className='flex gap-4 text-primary'>
-              <PlusCircleIcon /> {t('Actions.create_new_button_label')}
-            </CardContent>
-          </Card>
-        </CourseContentDialog>
-        {contents.map((content) => {
-          const htmlContent = content.content ? generateHTML(content.content, RichTextEditorExtensions) : ''
+      {contents.length > 0 ? <CourseContentRenderer disabled={disabled} /> : <EmptyCourseContentBody />}
 
-          return (
-            <Card key={content.categoryId} className=''>
-              <CardHeader>
-                <CardTitle>{content.title}</CardTitle>
-                <CardDescription>{content.description}</CardDescription>
-                <CardAction>
-                  <CourseContentDialog mode='edit' courseContent={content}>
-                    <Button variant='link' asChild aria-label={t('Actions.edit_content_button_aria_label')} className='enabled:text-orange-400 dark:enabled:text-orange-300/80'>
-                      <PenIcon />
-                      {t('Actions.edit_content_button_label')}
-                    </Button>
-                  </CourseContentDialog>
+      <CreateContentButton disabled={disabled} />
+    </GenericCard>
+  )
+}
 
-                  <ConfirmationDialog
-                    confirmAction={() => removeCourseContent(content.categoryId)}
-                    confirmLabel={t('Actions.delete_content_confirm_label')}
-                    body={t('Actions.delete_content_dialog_body')}>
-                    <Button variant='link' asChild aria-label={t('Actions.delete_content_button_aria_label')} className='enabled:text-destructive/80'>
-                      <TrashIcon />
-                      {t('Actions.delete_content_button_label')}
-                    </Button>
-                  </ConfirmationDialog>
-                </CardAction>
-              </CardHeader>
-              <CardContent className='flex h-full px-4.5 **:[div]:[[role=presentation]]:max-h-42 **:[div]:[[role=presentation]]:min-h-auto **:[div]:[[role=presentation]]:cursor-default **:[div]:[[role=presentation]]:border-ring-subtle **:[div]:[[role=presentation]]:p-2.5'>
-                <RichTextEditor key={htmlContent} defaultContent={content.content} readOnly size='sm' />
-              </CardContent>
-            </Card>
-          )
-        })}
-      </div>
+function CreateContentButton({ disabled }: { disabled?: boolean }) {
+  const t = useScopedI18n('Courses.Create.ContentSection')
+
+  return (
+    <div className='flex justify-center gap-8'>
+      <CourseContentDialog mode='create'>
+        <Button variant='outline' size='lg' disabled={disabled}>
+          <Plus className='size-5' />
+          {t('Actions.create_new_button_label')}
+        </Button>
+      </CourseContentDialog>
+    </div>
+  )
+}
+
+function CourseContentRenderer({ disabled }: { disabled?: boolean }) {
+  const t = useScopedI18n('Courses.Create.ContentSection')
+  const { contents, removeCourseContent, questionCategories } = useCourseStore((store) => store)
+
+  return (
+    <div className={cn('my-4 grid flex-1 grid-cols-1 gap-6')}>
+      {contents.map((content, i) => (
+        <GenericCard disableInteractions key={i + content.categoryId} className={cn('relative flex h-fit gap-3 p-2 first:mt-3 hover:bg-none')}>
+          <div className='flex flex-1 flex-col p-1'>
+            <div className='flex items-center justify-between'>
+              <h2 className='text-neutral-700 dark:text-neutral-300'>{content.title}</h2>
+              <span className='text-neutral-700 dark:text-neutral-300'>{}</span>
+            </div>
+            <div className='flex justify-between text-xs'>
+              <span className='text-neutral-500 lowercase dark:text-neutral-400'>{content.description}</span>
+              <div className='flex items-center gap-1 text-neutral-500 dark:text-neutral-400'>
+                <Folder className='size-3' />
+                <span className='lowercase'>{questionCategories.find((c) => c.id === content.categoryId)?.name}</span>
+              </div>
+            </div>
+          </div>
+          <CourseContentDialog mode='edit' courseContent={content}>
+            <Button
+              aria-label={t('Actions.edit_content_button_aria_label')}
+              size='icon'
+              variant='base'
+              type='button'
+              disabled={disabled}
+              className='group my-auto flex size-7.5 items-center gap-4 rounded-lg bg-neutral-300/50 p-1.5 ring-1 ring-neutral-400 hover:cursor-pointer hover:ring-[1.5px] hover:ring-ring-hover dark:bg-neutral-700 dark:ring-neutral-600 dark:hover:ring-ring-hover'>
+              <Pen className='size-4 text-orange-600/70 group-hover:stroke-3 dark:text-orange-400/70' />
+            </Button>
+          </CourseContentDialog>
+
+          <ConfirmationDialog confirmAction={() => removeCourseContent(content.categoryId)} confirmLabel={t('Actions.delete_content_confirm_label')} body={t('Actions.delete_content_dialog_body')}>
+            <Button
+              size='icon'
+              variant='base'
+              aria-label={t('Actions.delete_content_button_aria_label')}
+              type='button'
+              disabled={disabled}
+              className='group my-auto flex size-7.5 items-center gap-4 rounded-lg bg-neutral-300/50 ring-1 ring-neutral-400 hover:cursor-pointer hover:ring-[1.5px] hover:ring-ring-hover dark:bg-neutral-700 dark:ring-neutral-600 dark:hover:ring-ring-hover'>
+              <Trash2 className='size-4 text-red-600/70 group-hover:stroke-[2.5] dark:text-red-400/70' />
+            </Button>
+          </ConfirmationDialog>
+        </GenericCard>
+      ))}
+    </div>
+  )
+}
+
+function EmptyCourseContentBody() {
+  const t = useScopedI18n('Courses.Create.ContentSection')
+  return (
+    <div className={cn('flex min-h-60 flex-1 flex-col items-center justify-center gap-6')}>
+      <Info className='size-16 text-neutral-400 dark:text-neutral-500' />
+      <span className='text-center tracking-wide text-balance text-neutral-500 dark:text-neutral-400'>{t('empty_content_text')}</span>
     </div>
   )
 }
diff --git a/src/components/courses/create/(sections)/OverviewSection.tsx b/src/components/courses/create/(sections)/OverviewSection.tsx
index d0103ab8..30b1f2f1 100644
--- a/src/components/courses/create/(sections)/OverviewSection.tsx
+++ b/src/components/courses/create/(sections)/OverviewSection.tsx
@@ -1,3 +1,4 @@
+import ContentSection from '@/src/components/courses/create/(sections)/ContentSection'
 import GeneralSection from '@/src/components/courses/create/(sections)/GeneralSection'
 import QuestionsSection from '@/src/components/courses/create/(sections)/QuestionsSection'
 import SettingsSection from '@/src/components/courses/create/(sections)/SettingsSection'
@@ -14,6 +15,7 @@ export async function OverviewSection() {
       </div>
       <div className='grid gap-8 xl:grid-cols-2 **:[&_input]:ring-neutral-300/70 **:dark:[&_input]:ring-neutral-600/70 **:[&_textarea]:ring-neutral-300/70 **:dark:[&_textarea]:ring-neutral-600/70'>
         <GeneralSection disabled jumpBackButton />
+        <ContentSection disabled jumpBackButton />
         <QuestionsSection disabled jumpBackButton />
         <SettingsSection disabled jumpBackButtons className='xl:col-span-2' />
       </div>
diff --git a/src/components/tiptap-examples/RichTextEditor.tsx b/src/components/tiptap-examples/RichTextEditor.tsx
index 9657416d..0d013abf 100644
--- a/src/components/tiptap-examples/RichTextEditor.tsx
+++ b/src/components/tiptap-examples/RichTextEditor.tsx
@@ -137,12 +137,16 @@ export function RichTextEditor({
   disabled,
   readOnly,
   size = 'md',
+  editorPaneClassname,
+  editorContainerClassname,
 }: {
   onUpdateAction?: (content: object) => void
   defaultContent?: Content
   disabled?: boolean
   readOnly?: boolean
   size?: 'sm' | 'md' | 'lg'
+  editorPaneClassname?: string
+  editorContainerClassname?: string
 }) {
   const t = useScopedI18n('Components.RichTextEditor')
   const isMobile = useIsBreakpoint()
@@ -180,7 +184,7 @@ export function RichTextEditor({
 
   return (
     <div data-slot='rich-text-editor-wrapper' className='flex flex-1 flex-col items-center'>
-      <div data-slot='rich-text-editor-container' className='@container/editor flex size-full max-h-[58dvh] flex-col'>
+      <div data-slot='rich-text-editor-container' className={cn('@container/editor flex size-full max-h-[58dvh] flex-col', editorContainerClassname)}>
         <EditorContext.Provider value={{ editor }}>
           <Toolbar className={cn(readOnly && 'hidden!')}>
             {mobileView === 'main' ? (
@@ -199,7 +203,7 @@ export function RichTextEditor({
             }}
             editor={editor}
             role='presentation'
-            className={cn('rounded-md border border-input-ring', 'flex flex-1 flex-col', 'min-h-72 p-5', 'cursor-text overflow-auto')}
+            className={cn('rounded-md border border-input-ring', 'flex flex-1 flex-col', 'min-h-72 p-5', 'cursor-text overflow-auto', editorPaneClassname)}
           />
         </EditorContext.Provider>
       </div>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index bec865c4..7d71c024 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -107,7 +107,8 @@
           },
           "submit_create_button_label": "Kursinhalt erstellen",
           "submit_update_button_label": "Inhalt aktualisieren"
-        }
+        },
+        "empty_content_text": "There are currently no contents associated to this course."
       },
       "QuestionSection": {
         "title": "Fragen",
@@ -343,6 +344,15 @@
         }
       },
       "title": "Ergebnisse deines Übungsversuchs"
+    },
+    "Contents": {
+      "title": "Kursinhalte",
+      "description": "Lesen Sie die Kursinhalte durch, um sich auf Übungen und Prüfungen vorzubereiten",
+      "Navigation": {
+        "title": "Verfügbare Inhalte",
+        "next_btn_label": "Nächster",
+        "previous_btn_label": "Vorheriger"
+      }
     }
   },
   "Examination": {
@@ -393,6 +403,7 @@
       "Statistics": {
         "questions_label": "Fragen",
         "estimatedTime_label": "geschätze Zeit",
+        "contents_label": "Inhalte",
         "points_label": "Punkte"
       },
       "user_role": {
@@ -430,6 +441,10 @@
         "tooltip": "Übungs freigabelink erfolgreich in Zwischenablage kopiert.",
         "toast": "Erstellen des Übungslinks fehlgeschlagen."
       },
+      "show_course_contents": {
+        "label": "Kursinhalte anzeigen",
+        "tooltip": "Dieser Kurs hat keine Inhalte die angezeigt werden können."
+      },
       "edit_course": {
         "label": "Kurs bearbeiten",
         "tooltip": "Dir fehlen die Berechtigungen um diesen Kurs zu bearbeiten."
diff --git a/src/i18n/locales/de.ts b/src/i18n/locales/de.ts
index 85ea860e..70e8a359 100644
--- a/src/i18n/locales/de.ts
+++ b/src/i18n/locales/de.ts
@@ -110,7 +110,8 @@ export default {
           },
           submit_create_button_label: 'Kursinhalt erstellen',
           submit_update_button_label: 'Inhalt aktualisieren'
-        }
+        },
+        empty_content_text: 'There are currently no contents associated to this course.'
       },
       QuestionSection: {
         title: 'Fragen',
@@ -346,6 +347,15 @@ export default {
         }
       },
       title: 'Ergebnisse deines Übungsversuchs'
+    },
+    Contents: {
+      title: 'Kursinhalte',
+      description: 'Lesen Sie die Kursinhalte durch, um sich auf Übungen und Prüfungen vorzubereiten',
+      Navigation: {
+        title: 'Verfügbare Inhalte',
+        next_btn_label: 'Nächster',
+        previous_btn_label: 'Vorheriger'
+      }
     }
   },
   Examination: {
@@ -397,6 +407,7 @@ export default {
       Statistics: {
         questions_label: 'Fragen',
         estimatedTime_label: 'geschätze Zeit',
+        contents_label: 'Inhalte',
         points_label: 'Punkte'
       },
       user_role: {
@@ -434,6 +445,10 @@ export default {
         tooltip: 'Übungs freigabelink erfolgreich in Zwischenablage kopiert.',
         toast: 'Erstellen des Übungslinks fehlgeschlagen.'
       },
+      show_course_contents: {
+        label: 'Kursinhalte anzeigen',
+        tooltip: 'Dieser Kurs hat keine Inhalte die angezeigt werden können.'
+      },
       edit_course: {
         label: 'Kurs bearbeiten',
         tooltip: 'Dir fehlen die Berechtigungen um diesen Kurs zu bearbeiten.'
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index ac3800e9..ca2c405a 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -117,7 +117,8 @@
           },
           "submit_create_button_label": "Create Content",
           "submit_update_button_label": "Update Content"
-        }
+        },
+        "empty_content_text": "There are currently no contents associated to this course."
       },
       "QuestionSection": {
         "title": "Questions",
@@ -353,6 +354,15 @@
           "description": "Shows a detailed list of every question of this course to review your answers."
         }
       }
+    },
+    "Contents": {
+      "title": "Course Contents",
+      "description": "Read through the course contents to prepare for practice and examinations",
+      "Navigation": {
+        "title": "Available Contents",
+        "next_btn_label": "Next",
+        "previous_btn_label": "Previous"
+      }
     }
   },
   "Examination": {
@@ -403,6 +413,7 @@
       "Statistics": {
         "questions_label": "Questions",
         "estimatedTime_label": "estimatedTime",
+        "contents_label": "Contents",
         "points_label": "Points"
       },
       "user_role": {
@@ -440,6 +451,10 @@
         "tooltip": "This course has no questions, examination disabled.",
         "toast": "Unable to start Practice"
       },
+      "show_course_contents": {
+        "label": "Show Course Contents",
+        "tooltip": "This course has no contents, please create one first."
+      },
       "edit_course": {
         "label": "Edit Course",
         "tooltip": "You are not allowed to edit this course!"
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index d0bb0788..afeb34b1 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -117,7 +117,8 @@ export default {
           },
           submit_create_button_label: 'Create Content',
           submit_update_button_label: 'Update Content'
-        }
+        },
+        empty_content_text: 'There are currently no contents associated to this course.'
       },
       QuestionSection: {
         title: 'Questions',
@@ -353,6 +354,15 @@ export default {
           description: 'Shows a detailed list of every question of this course to review your answers.'
         }
       }
+    },
+    Contents: {
+      title: 'Course Contents',
+      description: 'Read through the course contents to prepare for practice and examinations',
+      Navigation: {
+        title: 'Available Contents',
+        next_btn_label: 'Next',
+        previous_btn_label: 'Previous'
+      }
     }
   },
   Examination: {
@@ -403,6 +413,7 @@ export default {
       Statistics: {
         questions_label: 'Questions',
         estimatedTime_label: 'estimatedTime',
+        contents_label: 'Contents',
         points_label: 'Points'
       },
       user_role: {
@@ -440,6 +451,10 @@ export default {
         tooltip: 'This course has no questions, examination disabled.',
         toast: 'Unable to start Practice'
       },
+      show_course_contents: {
+        label: 'Show Course Contents',
+        tooltip: 'This course has no contents, please create one first.'
+      },
       edit_course: {
         label: 'Edit Course',
         tooltip: 'You are not allowed to edit this course!'