diff --git a/src/assets/main.css b/src/assets/main.css
index 2591c561d19358f16cc3eee5cdfc35401edc3fdf..c139e8a2439cec66899ae6e440c41cd26e8c3ad8 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -7,6 +7,10 @@
   font-weight: normal;
 }
 
+.mono {
+  font-family: monospace;
+}
+
 a,
 .green {
   text-decoration: none;
diff --git a/src/components/FeedRow.vue b/src/components/FeedRow.vue
index a42ad7be895ca3dcb330604869b1d09825f1322a..54ca04ee80aea096e1df5dbae736f8c24410ba95 100644
--- a/src/components/FeedRow.vue
+++ b/src/components/FeedRow.vue
@@ -31,8 +31,4 @@ props.dag.then((r) => {
   </tr>
 </template>
 
-<style scoped>
-.mono {
-  font-family: monospace;
-}
-</style>
+<style scoped></style>
diff --git a/src/components/IndexNode.vue b/src/components/IndexNode.vue
index bfb99cb0c8c55f55bc1e7eac140a8b73b7336b77..15669683e026452d1fcb190fa4df13165fab6bf0 100644
--- a/src/components/IndexNode.vue
+++ b/src/components/IndexNode.vue
@@ -33,7 +33,7 @@ onload()
   <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><span class="mono">{{ c![0] }}</span> <a :href="exploreUrl(c![1])" target="_blank">cid</a></div>
         <div><IndexNode :key="c![1].toString()" :cid="c![1]"></IndexNode></div>
       </li>
     </ul>
@@ -41,8 +41,4 @@ onload()
   <template v-if="leaf"> leaf ({{ leaf.leaf.length }}) </template>
 </template>
 
-<style scoped>
-.mono {
-  font-family: monospace;
-}
-</style>
+<style scoped></style>
diff --git a/src/global.ts b/src/global.ts
index 9610dbc31801ecb0d73aca891e7b946cfba5f6a2..a138828be0c8593fe0c565ac9e9b23d36a4726fd 100644
--- a/src/global.ts
+++ b/src/global.ts
@@ -1,4 +1,3 @@
-import { ref } from 'vue'
-import type { Ref } from 'vue'
+import { ref, type Ref } from 'vue'
 
 export const feed: Ref<string[]> = ref([])
diff --git a/src/views/FeedView.vue b/src/views/FeedView.vue
index 7a1efcae1e42b71ae19ada6d724924b89307ee4f..3c218c5a4c7eb0cf26063ec7c1a6f84016619a90 100644
--- a/src/views/FeedView.vue
+++ b/src/views/FeedView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { feed } from '@/global'
-import { ref } from 'vue'
-import type { Ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import { TOPIC, pubsub } from '@/p2p'
 import type { PeerId } from '@libp2p/interface'
 import { CID } from 'multiformats'
@@ -60,4 +59,4 @@ function get_dag(cid: CID): Promise<IndexRequest> {
   </div>
 </template>
 
-<style></style>
+<style scoped></style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a7e9a3eaedb1704645b30d7eb7b9f6af53b26b42..dc048d69e9863b8946c7e66843ec4ec2a5c55406 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -8,3 +8,5 @@
     <p>This UI is optional. It aims to help understand how the indexer part work and interacts with the local IPFS node (kubo for instance).</p>
   </main>
 </template>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index e9fb50f96c49bfa4d46681397b7ccd36ee162c97..369a97ed51c440f11229dccad078a97d7b04af4a 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -2,14 +2,23 @@
 import { kubo } from '@/kubo'
 import { emptyInode } from '../types'
 import { IPNS } from '../consts'
-import { ref } from 'vue'
 import { CID } from 'multiformats'
-import type { Ref } from 'vue'
+import { ref, type Ref, computed } from 'vue'
 import IndexNode from '../components/IndexNode.vue'
 
+const msg = ref('')
 const rootnodeipns = ref('')
 const ipnsTarget = ref('')
-const ipnsTargetCid: Ref<CID | null> = ref(null)
+const targetCid: Ref<CID | null> = ref(null)
+
+const isValid = computed(() => {
+  try {
+    CID.parse(msg.value)
+    return true
+  } catch {
+    return false
+  }
+})
 
 // inits indexing and publishes ipns entry for it
 async function initIndex() {
@@ -18,27 +27,49 @@ async function initIndex() {
   const res = await kubo.name.publish(rootcid, { ttl: '1s' })
   console.log(res)
   rootnodeipns.value = res.name
+  resolve()
 }
 
 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))
+    targetCid.value = CID.parse(name.slice(6))
+  }
+}
+
+function setTargetCid() {
+  if (isValid.value) {
+    const cid = CID.parse(msg.value)
+    targetCid.value = cid
+    kubo.name.publish(cid, { ttl: '1s' }).then((_) => resolve())
+  } else {
+    targetCid.value = null
   }
 }
+
+resolve()
 </script>
 
 <template>
   <div>
     <h1>Index</h1>
     <p>Info about the index</p>
-    <p>initialize index: <button @click="initIndex">initialize</button></p>
-    <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>
+    <p>initialize empty index: <button @click="initIndex">reinitialize ⚠️</button></p>
+    <p>root node ipns: <span class="mono">/ipns/{{ rootnodeipns }}</span></p>
+    <p>You can use it to configure root node instead of hardcoded one:</p>
+    <p class="mono">{{ IPNS }}</p>
+    <p>which is pointing to <button @click="resolve">resolve</button></p>
+    <p class="mono">{{ ipnsTarget }}</p>
+    <p>
+      set IPNS target cid
+      <input v-model="msg" @keyup.enter="setTargetCid" />
+      <button v-on:click="setTargetCid">Set ⚠️</button>
+    </p>
+    <h2>Tree preview</h2>
+    <p class="mono">{{ targetCid }}</p>
+    <p><IndexNode v-if="targetCid" :key="ipnsTarget" :cid="targetCid"></IndexNode></p>
   </div>
 </template>
 
-<style></style>
+<style scoped></style>
diff --git a/src/views/KuboView.vue b/src/views/KuboView.vue
index ddf963703ed772df08d94042fbf733bebf49234f..84dfd81a84c5d4658d6c2cb5973dc3063bcdcb63 100644
--- a/src/views/KuboView.vue
+++ b/src/views/KuboView.vue
@@ -5,4 +5,4 @@
   </div>
 </template>
 
-<style></style>
+<style scoped></style>