diff --git a/_includes/docs-sidebar.html b/_includes/docs-sidebar.html
index 18835563..31b8b13f 100644
--- a/_includes/docs-sidebar.html
+++ b/_includes/docs-sidebar.html
@@ -6,6 +6,7 @@ <h2>Overview</h2>
     <li><a href="/docs/upgrade-to-v8"><strong>Upgrade to v8</strong></a></li>
     <li><a href="/docs">Overview</a></li>
     <li><a href="/docs/faq">FAQ</a></li>
+    <li><a href="/docs/mongodb-rest/demo-webapp">Demo WebApp with RESTHeart</a></li>
     <li><a href="/docs/performances">Performances</a></li>
     <li><a href="https://github.com/SoftInstigate/restheart/issues?q=is%3Aissue+is%3Aopen+label%3A%22feature+request%22">Roadmap</a></li>
     <li><a href="/docs/plugins/tutorial">Framework Tutorial</a></li>
diff --git a/css/fedora.css b/css/fedora.css
index 8da2c267..15c39c8d 100644
--- a/css/fedora.css
+++ b/css/fedora.css
@@ -28,13 +28,10 @@ h2,h3,h4,h5,h6{color:var(--primarycolor) !important;}
 .title{font-style: normal; font-weight: normal;}
 a{text-decoration: none;}
 #toc.toc2 a:link{color:var(--linkcolor);}
-blockquote{color:var(--linkcoloralternate) !important}
-.quoteblock blockquote:before{color:var(--linkcoloralternate)}
 /* code{color:var(--white);background-color: var(--highlightcolor) !important} */
 mark{background-color: var(--highlightcolor);} /* Text highlighting color */
 .highlightcolor {font-family: "Space Mono"; color: var(--highlightcolor) !important; } /* Text highlighting color */
 .background-primary{background-color: var(--primarycolor);}
-
 #toc.toc2{background-color:var(--sidebarbackground);}
 #toctitle{color:var(--white);}
 
diff --git a/docs/mongodb-rest/demo-webapp.html b/docs/mongodb-rest/demo-webapp.html
new file mode 100644
index 00000000..f47ea261
--- /dev/null
+++ b/docs/mongodb-rest/demo-webapp.html
@@ -0,0 +1,142 @@
+---
+title: Demo WebApp
+layout: default
+menu: mongodb
+---
+
+<header class="container mt-5">
+  <hgroup>
+    <h2>Post & View Messages</h2>
+    <p class="mt-10">A simple web app to view and post messages using RESTHeart's built-in REST API on MongoDB.</p>
+    <p class="mt-6"><small class="mt-10">Backend made with <a href="https://restheart.org">RESTHeart</a> • Frontend made with <a href="https://alpinejs.dev/" target="_blank">Alpine.js</a> and <a href="https://picocss.com/" target="_blank">Picocss</a> • <a href="https://codepen.io/ujibang/pen/yLmyvEd" target="_blank">Source Code</a></p>
+  </hgroup>
+</header>
+
+<main class="container" x-data="{ page: 1, docs: [], from: '', message: '' }">
+  <div class="d-flex-end">
+    <button class="outline" @click="postMsgDialog.showModal()">New Message</button>
+  </div>
+  <section class="mt-5">
+    <div class="d-flex-wrap">
+      <template x-init="docs = await fetchDocs(page)" x-for="doc in docs" :key="doc._id.$oid">
+        <blockquote>
+          <span x-text="doc.message"></span>
+          <footer>
+            <cite>- </span> <span x-text="doc.from"></span> on <span x-text="new Date(doc.timestamp['$date']).toLocaleDateString('it-IT')"></span></cite>
+          </footer>
+        </blockquote>
+    </div>
+    </template>
+    </div>
+    <div class="d-flex text-center">
+      <a href="#" class="no-decoration" @click="if (page > 1) docs = await fetchDocs(--page)">
+        <h5>&lt;</h5>
+      </a>
+      <h5 x-text="page"></h5>
+      <a href="#" class="no-decoration" @click="docs = await fetchDocs(++page)">
+        <h5>&gt;</h5>
+      </a>
+    </div>
+  </section>
+  <dialog id="postMsgDialog">
+    <form>
+      <article class="mw-600 p-4">
+        <header>
+          <button aria-label="Close" rel="prev" @click="postMsgDialog.close()"></button>
+          <h3>Post your message</h3>
+        </header>
+
+        <hgroup>
+          <input type="text" name="from" placeholder="Your name..." aria-label="Your name..." required x-model="from" />
+          <textarea rows="3" name="message" placeholder="Your Message..." aria-label="Your Message..." required x-model="message"></textarea>
+        </hgroup>
+
+        <footer>
+          <button @click="post(from, message); page = 1; docs = await fetchDocs(page)">Post</button>
+        </footer>
+      </article>
+    </form>
+  </dialog>
+</main>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+<script src="//unpkg.com/alpinejs" defer></script>
+<script>
+const fetchDocs = (page) =>
+  fetch(
+    encodeURI(`https://demo.restheart.org/messages?page=${page}&pagesize=8`)
+  ).then((response) => response.json());
+
+const post = (from, message) =>
+  fetch("https://demo.restheart.org/messages", {
+    method: "post",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ from, message })
+  });
+
+const postMsgDialog = document.getElementById('postMsgDialog');
+</script>
+
+<style>
+
+header {
+  padding: 0 !important;
+}
+
+blockquote footer {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-6 {
+  margin-top: 6px;
+}
+
+.mw-260 {
+  max-width: 260px;
+}
+
+.mw-600 {
+  min-width: 600px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.no-decoration {
+  text-decoration: none;
+}
+
+blockquote {
+  width:240px;
+}
+
+.d-flex-end {
+  display: flex;
+  justify-content: flex-end
+}
+
+.d-flex-wrap {
+  justify-content: center;
+  display: flex;
+  row-gap: 46px;
+  column-gap: 16px;
+  flex-wrap: wrap;
+}
+
+.d-flex {
+  display: flex; justify-content: center; gap: 16px;
+}
+
+blockquote cite {
+  color: grey;
+}
+</style>
\ No newline at end of file
diff --git a/index.md b/index.md
index d85abb86..2f8f1de5 100644
--- a/index.md
+++ b/index.md
@@ -59,16 +59,6 @@ stars-bounce: true
   }, '#sophiaFrame' );
 </script>
 
-<!-- <section id="demo-webapp" class="pt-2 pb-2">
-    <h3 class="font-weight-bold highlightcolor mt-3 text-center">Simple Demo Web App</h3>
-    <p class="codepen" data-height="900" data-theme-id="dark" data-default-tab="result" data-slug-hash="yLmyvEd" data-pen-title="RESTHeart Demo Web App" data-user="ujibang" style="height: 900px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
-    <span>See the Pen <a href="https://codepen.io/ujibang/pen/yLmyvEd">
-    RESTHeart Demo Web App</a> by Andrea Di Cesare (<a href="https://codepen.io/ujibang">@ujibang</a>)
-    on <a href="https://codepen.io">CodePen</a>.</span>
-    </p>
-    <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
-</section> -->
-
 <!-- <section id="article-at-aws-blog" class="call-to-action black-background">
     <div class="container-fluid">
         <div class="row">