diff --git a/src/lib/ui/learning-objects/layout/LoContextPanel.svelte b/src/lib/ui/learning-objects/layout/LoContextPanel.svelte
index b9a71426b..a48d37dde 100644
--- a/src/lib/ui/learning-objects/layout/LoContextPanel.svelte
+++ b/src/lib/ui/learning-objects/layout/LoContextPanel.svelte
@@ -4,6 +4,7 @@
   import { currentLo, layout } from "$lib/stores";
   import { onDestroy } from "svelte";
   import LoContext from "../structure/LoContext.svelte";
+  import { TreeView } from "@skeletonlabs/skeleton";
 
   export let loContext: Lo;
 
@@ -33,6 +34,8 @@
     <figure class="flex justify-center p-2">
       <Image {lo} />
     </figure>
-    <LoContext lo={loContext} />
+    <TreeView padding="p-1">
+      <LoContext lo={loContext} />
+    </TreeView>
   </div>
 </div>
diff --git a/src/lib/ui/learning-objects/structure/CourseContext.svelte b/src/lib/ui/learning-objects/structure/CourseContext.svelte
index 50b0897c6..33a62532c 100644
--- a/src/lib/ui/learning-objects/structure/CourseContext.svelte
+++ b/src/lib/ui/learning-objects/structure/CourseContext.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { isCompositeLo, type Course } from "$lib/services/models/lo-types";
+  import { type Course } from "$lib/services/models/lo-types";
   import LoContext from "./LoContext.svelte";
-  import { Accordion, AccordionItem } from "@skeletonlabs/skeleton";
+  import { TreeView, TreeViewItem } from "@skeletonlabs/skeleton";
 
   export let course: Course;
 </script>
 
-<Accordion regionPanel="space-y-0.5">
+<TreeView padding="p-1">
   {#each course.los as lo}
     {#if !lo.hide}
-      <AccordionItem>
-        <svelte:fragment slot="summary">{lo.title}</svelte:fragment>
-        <svelte:fragment slot="content">
+      <TreeViewItem>
+        {lo.title}
+        <svelte:fragment slot="children">
           <LoContext {lo} />
         </svelte:fragment>
-      </AccordionItem>
+      </TreeViewItem>
     {/if}
   {/each}
-</Accordion>
+</TreeView>
diff --git a/src/lib/ui/learning-objects/structure/LoContext.svelte b/src/lib/ui/learning-objects/structure/LoContext.svelte
index ba19dd697..7c5371365 100644
--- a/src/lib/ui/learning-objects/structure/LoContext.svelte
+++ b/src/lib/ui/learning-objects/structure/LoContext.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Lo } from "$lib/services/models/lo-types";
-  import LoReference from "./LoReference.svelte";
+  import { TreeViewItem } from "@skeletonlabs/skeleton";
+  import Icon from "$lib/ui/themes/icons/Icon.svelte";
 
   export let lo: Lo;
   if (lo?.toc) {
@@ -10,12 +11,25 @@
       }
     });
   }
-  export let indent = 0;
 </script>
 
 {#each lo?.toc as lo}
-  <LoReference {lo} indent={indent + 4} />
-  {#if lo.toc}
-    <svelte:self {lo} indent={indent + 4} />
-  {/if}
+  <TreeViewItem open hideChildren>
+    <svelte:fragment slot="lead">
+      <Icon type={lo.type} />
+    </svelte:fragment>
+    <a href={lo?.route} class="flex">
+      {@html lo.title}
+      {#if lo.video && lo.type != "panelvideo"}
+        <a class="pl-4" href={lo.video}>
+          <Icon type="video" />
+        </a>
+      {/if}
+    </a>
+    <svelte:fragment slot="children">
+      {#if lo.toc}
+        <svelte:self {lo} />
+      {/if}
+    </svelte:fragment>
+  </TreeViewItem>
 {/each}
diff --git a/src/lib/ui/learning-objects/structure/LoReference.svelte b/src/lib/ui/learning-objects/structure/LoReference.svelte
deleted file mode 100644
index e0860c264..000000000
--- a/src/lib/ui/learning-objects/structure/LoReference.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-  import type { Lo } from "$lib/services/models/lo-types";
-  import Icon from "$lib/ui/themes/icons/Icon.svelte";
-
-  export let lo: Lo;
-  export let indent = 0;
-  if (indent > 16) {
-    indent = 16;
-  }
-</script>
-
-<a href={lo?.route} class="flex py-1 ml-{indent}">
-  <Icon type={lo.type} />
-  <span class="ml-2 mb-1"> {@html lo.title} </span>
-  {#if lo.video && lo.type != "panelvideo"}
-    <a class="flex pl-4" href={lo.video}>
-      <Icon type="video" />
-    </a>
-  {/if}
-</a>