diff --git a/ivette/Makefile b/ivette/Makefile
index 97c58206a37b746382db22c8f13916a01d2569d9..b387e3cf27f89b71bd4ee4160187c031c83cc822 100644
--- a/ivette/Makefile
+++ b/ivette/Makefile
@@ -35,14 +35,18 @@ doc:
 	@echo "[Ivette] documentation"
 	@yarn run typedoc
 	@mkdir -p doc/html/guides
+	@echo "[Ivette] guides"
 	@find $(GUIDES) -name "*.md" -exec cp -f {} doc/html/guides/ \;
 	@find doc/html/guides -name "*.md" -print -exec pandoc \
 		--standalone --toc --toc-depth=2 --to html \
+		--template doc/pandoc/template.html \
 		--metadata title="Ivette Documentation" \
 		--metadata version="v$(VERSION)" \
-		--template doc/pandoc/template.html \
+		--metadata-file=doc/pandoc/index.json \
 		--lua-filter doc/pandoc/href.lua \
 		{} -o {}.html \; -delete
+	@echo "[Ivette] main page"
+	@echo "   file://$(PWD)/doc/html/index.html"
 
 # --------------------------------------------------------------------------
 # --- Ivette Plugins
diff --git a/ivette/README.md b/ivette/README.md
index 6e081c72571698b8696ce7ac1f9bcfe3809f05d6..ca9c70e965912edb4ce8a840534414d00a0c8f9d 100644
--- a/ivette/README.md
+++ b/ivette/README.md
@@ -1,3 +1,15 @@
+## Dome Framework Guides
+
+- [Dome Framework](guides/dome.md.html)
+- [Quick Start](guides/quickstart.md.html)
+- [Live Editing](guides/hotreload.md.html)
+- [Application Design](guides/application.md.html)
+- [Application Development](guides/development.md.html)
+- [Styling Components](guides/styling.md.html)
+- [Custom Hooks](guides/hooks.md.html)
+- [Icon Gallery](guides/icons.md.html)
+- [Glossary](guides/glossary.md.html)
+
 ## Setup
 
 From the `./ivette` sub-directory of Frama-C main directory:
diff --git a/ivette/doc/pandoc/index.json b/ivette/doc/pandoc/index.json
new file mode 100644
index 0000000000000000000000000000000000000000..34a59010156b256763292e5231e8fb7e3a93f71b
--- /dev/null
+++ b/ivette/doc/pandoc/index.json
@@ -0,0 +1,13 @@
+{
+  "guides": [
+    { "page": "dome.md", "title": "Dome Framework" },
+    { "page":"quickstart.md", "title": "Quick Start" },
+    { "page":"hotreload.md", "title": "Live Editing" },
+    { "page":"application.md", "title": "Application Design" },
+    { "page":"development.md", "title": "Application Development" },
+    { "page":"hooks.md", "title": "Custom React Hooks" },
+    { "page":"icons.md", "title": "Icons Gallery" },
+    { "page":"styling.md", "title": "styling" },
+    { "page":"glossary.md", "title": "Glossary" }
+  ]
+}
diff --git a/ivette/doc/pandoc/template.html b/ivette/doc/pandoc/template.html
index 55ae1b2eb9c8171d2f408dc35c56cdc7373a2fd0..e6ca378d1a71a85db11e53f59ee9f16a894619d3 100644
--- a/ivette/doc/pandoc/template.html
+++ b/ivette/doc/pandoc/template.html
@@ -33,7 +33,7 @@
     <div class="tsd-page-title">
       <div class="container">
         <ul class="tsd-breadcrumb">
-          <li><a href="README.md.html">Guides</a></li>
+          <li><a href="../globals.html">Globals</a></li>
         </ul>
         <h1 id="MAIN">$subtitle$</h1>
       </div>
@@ -48,7 +48,12 @@
       </div>
       <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
         <nav class="tsd-navigation primary">
-          <a class="root" href="../index.html">$title$</a>
+          <ul>
+            <li class="globals"><a href="../index.html"><em>$title$</em></a></li>
+            $for(guides)$
+            <li><a href="$guides.page$.html">$guides.title$</a></li>
+            $endfor$
+          </ul>
         </nav>
         <nav class="tsd-navigation secondary menu-sticky">
           <a href="#MAIN"><b>$subtitle$</b></a>
diff --git a/ivette/src/dome/doc/guides/dome.md b/ivette/src/dome/doc/guides/dome.md
index 15df888a882c1e71694df20c8f06dfc706203002..5e6becdb4e14e1ad17068e74c5b727e227c7e1d6 100644
--- a/ivette/src/dome/doc/guides/dome.md
+++ b/ivette/src/dome/doc/guides/dome.md
@@ -20,6 +20,7 @@ The **Dome** framework provides you with the following facilities:
 - [Live Editing](hotreload.md)
 - [Application Design](application.md)
 - [Application Development](development.md)
+- [Styling Components](styling.md)
 
 ## References