diff --git a/projects/null-cms/README.md b/projects/null-cms/README.md
index 79c4f7b..00a5331 100644
--- a/projects/null-cms/README.md
+++ b/projects/null-cms/README.md
@@ -11,7 +11,7 @@ Placing the `Index` component on a `page.tsx` under `app/some/route`:
 import { Index } from "null-cms/components";
 
 export default async function Page() {
-  return <Index />;
+  return <Index base=${__dirname} />;
 }
 ```
 
diff --git a/projects/null-cms/components/index.tsx b/projects/null-cms/components/index.tsx
index e8fbe85..2fbc69c 100644
--- a/projects/null-cms/components/index.tsx
+++ b/projects/null-cms/components/index.tsx
@@ -1,10 +1,11 @@
+import path from "path";
 import { listPages } from "@/projects/null-cms/pages";
 
 export interface IndexProps {
   /**
    * The base folder name used to list all sub pages in the aspect root page.
    */
-  base?: string;
+  base: string;
 }
 
 function sanitizeBasedir(base: string): string {
@@ -15,9 +16,13 @@ function sanitizeBasedir(base: string): string {
 }
 
 // dirname is evaluated as a parameter at invocation time by the caller module
-export async function Index({ base = (() => __dirname)() }: IndexProps) {
+export async function Index({ base }: IndexProps) {
   const sanitizedBase = sanitizeBasedir(base);
-  const subPages = await listPages(sanitizedBase, ".", 1);
+  const rootPath = path.dirname(sanitizedBase);
+  const relativeBase = path.basename(sanitizedBase);
+  const subPages = await listPages(rootPath, relativeBase);
+  console.log(sanitizedBase);
+  console.log(subPages.map((sp) => sp.relativePath));
   return (
     <div>
       <ol>
diff --git a/projects/null-cms/pages.tsx b/projects/null-cms/pages.tsx
index 4c28eda..43fb887 100644
--- a/projects/null-cms/pages.tsx
+++ b/projects/null-cms/pages.tsx
@@ -15,18 +15,25 @@ export interface Page {
 // TODO: read from next config based on extensions
 const NEXT_PAGE_FILES = ["page.tsx", "page.mdx"];
 
+/**
+ *
+ * @param basePath the base directory, will not compose the relative path
+ * @param relativePath
+ * @param levelSkips will not output anything until recurred this amount of times
+ * @returns
+ */
 export async function listPages(
   basePath: string,
-  relativePath: string,
-  skipLevel: number,
+  relativePath: string = ".",
+  levelSkips: number = 1,
 ): Promise<Page[]> {
   const children = await fs.readdir(path.join(basePath, relativePath));
   const pages = await Promise.all(
     children.map(async (fileName) => {
       const childPath = path.join(basePath, relativePath, fileName);
       return (await fs.stat(childPath)).isDirectory()
-        ? listPages(basePath, path.join(relativePath, fileName), skipLevel - 1)
-        : NEXT_PAGE_FILES.includes(fileName) && skipLevel <= 0
+        ? listPages(basePath, path.join(relativePath, fileName), levelSkips - 1)
+        : NEXT_PAGE_FILES.includes(fileName) && levelSkips <= 0
           ? [await loadPage({ basePath, relativePath, fileName })]
           : [];
     }),