diff --git a/app/hooks/useCollectionTrees.ts b/app/hooks/useCollectionTrees.ts
index 7d8ed5784..6ce03bc24 100644
--- a/app/hooks/useCollectionTrees.ts
+++ b/app/hooks/useCollectionTrees.ts
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { NavigationNode, NavigationNodeType } from "@shared/types";
+import { sortNavigationNodes } from "@shared/utils/collections";
 import Collection from "~/models/Collection";
 import useStores from "~/hooks/useStores";
 
@@ -66,7 +67,9 @@ export default function useCollectionTrees(): NavigationNode[] {
       title: collection.name,
       url: collection.url,
       type: NavigationNodeType.Collection,
-      children: collection.documents || [],
+      children: collection.documents
+        ? sortNavigationNodes(collection.documents, collection.sort, true)
+        : [],
       parent: null,
     };
 
diff --git a/shared/utils/collections.ts b/shared/utils/collections.ts
index a400b2697..deed68971 100644
--- a/shared/utils/collections.ts
+++ b/shared/utils/collections.ts
@@ -7,25 +7,25 @@ type Sort = {
 };
 
 export const sortNavigationNodes = (
-  documents: NavigationNode[],
+  nodes: NavigationNode[],
   sort: Sort,
   sortChildren = true
 ): NavigationNode[] => {
   // "index" field is manually sorted and is represented by the documentStructure
   // already saved in the database, no further sort is needed
   if (sort.field === "index") {
-    return documents;
+    return nodes;
   }
 
-  const orderedDocs = naturalSort(documents, sort.field, {
+  const orderedDocs = naturalSort(nodes, sort.field, {
     direction: sort.direction,
   });
 
-  return orderedDocs.map((document) => ({
-    ...document,
+  return orderedDocs.map((node) => ({
+    ...node,
     children: sortChildren
-      ? sortNavigationNodes(document.children, sort, sortChildren)
-      : document.children,
+      ? sortNavigationNodes(node.children, sort, sortChildren)
+      : node.children,
   }));
 };