diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
index ad38c49a7..94f64f7ef 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
@@ -60,6 +60,7 @@ export const DocTree = ({ initialTargetId }: DocTreeProps) => {
       });
     };
     serialize(children);
+    console.log(children);
 
     treeData?.tree.resetTree(children);
     setInitialOpenState(initialOpenState);
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/context/DocTreeContext.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/context/DocTreeContext.tsx
index 180fe5a23..82904ce5e 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/context/DocTreeContext.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/context/DocTreeContext.tsx
@@ -49,7 +49,7 @@ export const DocTreeProvider: React.FC<DocTreeProviderProps> = ({
     },
     async (docId) => {
       const doc = await getDocChildren({ docId: docId });
-      return doc.results ?? [];
+      return subPageToTree(doc.results ?? []);
     },
   );
 
@@ -84,3 +84,11 @@ export const useDocTreeData = (): DocTreeContextType | undefined => {
   }
   return context;
 };
+
+export const subPageToTree = (children: Doc[]): TreeViewDataType<Doc>[] => {
+  children.forEach((child) => {
+    child.childrenCount = child.numchild ?? 0;
+    subPageToTree(child.children ?? []);
+  });
+  return children;
+};