diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index c77e2e1..ebc3c81 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -29,42 +29,132 @@ jobs:
       - name: Configure Pages
         uses: actions/configure-pages@v5
 
-      - name: Aggregate files from all branches into ./public
+      - name: Aggregate and build recursive directory pages
         shell: bash
         run: |
           set -euo pipefail
+
+          OWNER="${GITHUB_REPOSITORY%/*}"
+          REPO="${GITHUB_REPOSITORY#*/}"
+          SITE_ROOT="/${REPO}/"
+
           mkdir -p public
+          : > public/.nojekyll
 
-          # List remote branches (exclude HEAD pointer)
-          mapfile -t BRANCHES < <(git ls-remote --heads origin \
-            | awk '{print $2}' | sed 's@refs/heads/@@')
+          # List remote branches
+          mapfile -t BRANCHES < <(
+            git ls-remote --heads origin | awk '{print $2}' \
+              | sed 's@refs/heads/@@'
+          )
 
-          # Minimal index page
+          # Top-level landing page
           cat > public/index.html <<'HTML'
-          <!doctype html><meta charset="utf-8">
-          <title>Branches</title><h1>Branches</h1><ul>
+          <!doctype html>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width,initial-scale=1" />
+          <title>Branches</title>
+          <style>
+            body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
+                 margin:24px;background:#0d1117;color:#e6edf3}
+            a{color:#58a6ff;text-decoration:none}
+            .card{background:#161b22;padding:16px;border-radius:8px;margin:12px 0}
+            input{background:#0b0f14;border:1px solid #30363d;color:#e6edf3;
+                  padding:8px 10px;border-radius:6px;width:100%;max-width:420px}
+          </style>
+          <h1>Branches</h1>
+          <input id="q" placeholder="Filter branches..." />
+          <div id="list"></div>
+          <script>
+            const q=document.getElementById('q'),list=document.getElementById('list');
+            const branches = [];
+          </script>
           HTML
 
+          # Helper to create an index.html for every directory
+          gen_index_dir() {
+            local DIR="$1" ROOT="$2" BR="$3" SAFE="$4"
+            local rel="${DIR#$ROOT}"               # "" or "/sub/dir"
+            local title="Branch: ${BR}${rel:-/}"
+
+            # Collect entries
+            mapfile -t SUBDIRS < <(find "$DIR" -mindepth 1 -maxdepth 1 -type d \
+              -printf '%f\n' | sort)
+            mapfile -t FILES < <(find "$DIR" -mindepth 1 -maxdepth 1 -type f \
+              ! -name 'index.html' -printf '%f\n' | sort)
+
+            {
+              echo "<!doctype html><meta charset='utf-8'/>"
+              echo "<meta name='viewport' content='width=device-width,initial-scale=1'/>"
+              echo "<title>${title}</title>"
+              echo "<style>body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;margin:24px;background:#0d1117;color:#e6edf3}a{color:#58a6ff;text-decoration:none}table{width:100%;border-collapse:collapse}th,td{padding:8px;border-bottom:1px solid #30363d}tr:hover{background:#161b22}</style>"
+              echo "<h1>${title}</h1>"
+              if [[ "$DIR" != "$ROOT" ]]; then
+                echo "<p><a href='../'>⬆ Up</a> • <a href='${SITE_ROOT}'>All branches</a></p>"
+              else
+                echo "<p><a href='${SITE_ROOT}'>All branches</a></p>"
+              fi
+              echo "<table><thead><tr><th>Name</th><th style='width:120px'>Size</th><th style='width:180px'>Modified</th></tr></thead><tbody>"
+              for d in "${SUBDIRS[@]}"; do
+                echo "<tr><td>📁 <a href='./$d/'>$d/</a></td><td>—</td><td>—</td></tr>"
+              done
+              for f in "${FILES[@]}"; do
+                local size=$(stat -c %s "$DIR/$f" 2>/dev/null || echo 0)
+                local size_h=$(numfmt --to=iec --suffix=B "$size" 2>/dev/null || echo "$size")
+                local mod=$(date -r "$DIR/$f" "+%Y-%m-%d %H:%M" 2>/dev/null || echo "")
+                echo "<tr><td>📄 <a href='./$f'>$f</a></td><td>$size_h</td><td>$mod</td></tr>"
+              done
+              echo "</tbody></table>"
+              echo "<p style='opacity:.7'>Generated $(date -u '+%Y-%m-%d %H:%M UTC')</p>"
+            } > "$DIR/index.html"
+          }
+
+          # Process each branch
           for BR in "${BRANCHES[@]}"; do
-            SAFE=$(echo "$BR" | tr '/:@ ' '----' | sed 's/[^A-Za-z0-9._-]/-/g')
+            SAFE="$(echo "$BR" | tr '/:@ ' '----' | sed 's/[^A-Za-z0-9._-]/-/g')"
             mkdir -p "public/$SAFE"
 
-            # Fetch that branch tip and export without checkout
+            # Fetch and extract content without checkout
             git fetch --depth=1 origin "$BR"
             git archive --format=tar FETCH_HEAD | tar -x -C "public/$SAFE"
 
-            # Keep only static assets; drop heavy/unneeded dirs
+            # Keep only static assets, then remove empty dirs
             rm -rf "public/$SAFE/.git" "public/$SAFE/.github" "public/$SAFE/node_modules"
             find "public/$SAFE" -type f ! \
               \( -name '*.html' -o -name '*.js' -o -name '*.css' -o -name '*.json' -o \
-                 -name '*.png' -o -name '*.jpg' -o -name '*.jpeg' -o -name '*.gif' -o -name '*.svg' \) \
-              -delete
+                 -name '*.png' -o -name '*.jpg' -o -name '*.jpeg' -o -name '*.gif' -o \
+                 -name '*.svg' \) -delete
             find "public/$SAFE" -type d -empty -delete
 
-            echo "<li><a href='./$SAFE/'>$BR</a></li>" >> public/index.html
+            # Generate index.html for every directory (recursive)
+            ROOT_DIR="public/$SAFE"
+            while IFS= read -r -d '' d; do
+              gen_index_dir "$d" "$ROOT_DIR" "$BR" "$SAFE"
+            done < <(find "$ROOT_DIR" -type d -print0)
+
+            # Add branch to landing page list
+            echo "<script>branches.push({safe:${JSON.stringify:-}('${SAFE}'),name:${JSON.stringify:-}('${BR}')});</script>" >> public/index.html
           done
-          echo "</ul>" >> public/index.html
-          echo "Built public/ for ${#BRANCHES[@]} branches."
+
+          # Finish landing page with JS to render branch cards
+          cat >> public/index.html <<'HTML'
+          <script>
+            const list = document.getElementById('list');
+            function render(filter=''){
+              list.innerHTML='';
+              const q=filter.toLowerCase();
+              for(const b of branches.filter(x=>x.name.toLowerCase().includes(q))){
+                const div=document.createElement('div');
+                div.className='card';
+                div.innerHTML=`<strong>${b.name}</strong><div>
+                  <a href="./${b.safe}/">Open</a>
+                </div>`;
+                list.appendChild(div);
+              }
+            }
+            q.addEventListener('input',e=>render(e.target.value));
+            render();
+          </script>
+          HTML
 
       - name: Upload Pages artifact
         uses: actions/upload-pages-artifact@v4
@@ -73,4 +163,4 @@ jobs:
 
       - name: Deploy to GitHub Pages
         id: deploy
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4
\ No newline at end of file