diff --git a/src/components/IndexNode.vue b/src/components/IndexNode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bfb99cb0c8c55f55bc1e7eac140a8b73b7336b77
--- /dev/null
+++ b/src/components/IndexNode.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, type Ref } from 'vue'
+import type { IndexInode, IndexLeaf } from '../types'
+import { CID } from 'multiformats'
+import { kubo } from '@/kubo'
+
+const inode: Ref<IndexInode | null> = ref(null)
+const leaf: Ref<IndexLeaf | null> = ref(null)
+
+const props = defineProps<{
+  cid: CID
+}>()
+
+function onload() {
+  kubo.dag.get(props.cid).then((d) => {
+    const dag = d.value
+    if ((dag as unknown as IndexInode).children) {
+      inode.value = dag
+    } else {
+      leaf.value = dag
+    }
+  })
+}
+
+function exploreUrl(cid: CID): string {
+  return `http://127.0.0.1:5001/ipfs/bafybeidf7cpkwsjkq6xs3r6fbbxghbugilx3jtezbza7gua3k5wjixpmba/#/explore/ipfs/${cid}`
+}
+
+onload()
+</script>
+
+<template>
+  <template v-if="inode">
+    <ul>
+      <li v-for="c in inode.children.filter((e) => e != null)">
+        <div>{{ c![0] }} <a :href="exploreUrl(c![1])" target="_blank">cid</a></div>
+        <div><IndexNode :key="c![1].toString()" :cid="c![1]"></IndexNode></div>
+      </li>
+    </ul>
+  </template>
+  <template v-if="leaf"> leaf ({{ leaf.leaf.length }}) </template>
+</template>
+
+<style scoped>
+.mono {
+  font-family: monospace;
+}
+</style>
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 236176f1e3993c92c3b46dac0bbcde4db61f1ece..e9fb50f96c49bfa4d46681397b7ccd36ee162c97 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { kubo } from '@/kubo'
 import { emptyInode } from '../types'
-import { BASE, IPNS } from '../consts'
+import { IPNS } from '../consts'
 import { ref } from 'vue'
+import { CID } from 'multiformats'
+import type { Ref } from 'vue'
+import IndexNode from '../components/IndexNode.vue'
 
 const rootnodeipns = ref('')
 const ipnsTarget = ref('')
+const ipnsTargetCid: Ref<CID | null> = ref(null)
 
 // inits indexing and publishes ipns entry for it
 async function initIndex() {
@@ -20,6 +24,7 @@ async function resolve() {
   for await (const name of kubo.name.resolve(IPNS, { nocache: true })) {
     console.log(name)
     ipnsTarget.value = name
+    ipnsTargetCid.value = CID.parse(name.slice(6))
   }
 }
 </script>
@@ -32,6 +37,7 @@ async function resolve() {
     <p>root node ipns: /ipns/{{ rootnodeipns }}</p>
     <p>IPNS {{ IPNS }}</p>
     <p>pointing to <button @click="resolve">resolve</button> {{ ipnsTarget }}</p>
+    <p><IndexNode v-if="ipnsTargetCid" :key="ipnsTarget" :cid="ipnsTargetCid"></IndexNode></p>
   </div>
 </template>