diff --git a/preview-src/driver.adoc b/preview-src/driver.adoc
index a8375e53..c5beb27e 100644
--- a/preview-src/driver.adoc
+++ b/preview-src/driver.adoc
@@ -1,6 +1,7 @@
 = Neo4j & Python
 :page-theme: docs
 :page-role: code-walkthrough
+:page-chatbot: http://localhost:3000
 :!toc:
 
 
diff --git a/src/css/base.css b/src/css/base.css
index 034f4be6..0df1c325 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -1,6 +1,6 @@
 html,
 body {
-  height: 100%;
+  height: fit-content;
 }
 
 *,
@@ -29,6 +29,11 @@ body {
   margin: 0;
 }
 
+h1,
+h2 {
+  font-family: var(--body-font-family);
+}
+
 a {
   text-decoration: none;
 }
diff --git a/src/css/neo4j-docs.css b/src/css/neo4j-docs.css
index 4a48e89c..13560a9e 100644
--- a/src/css/neo4j-docs.css
+++ b/src/css/neo4j-docs.css
@@ -1,3 +1,10 @@
+/* chatbot */
+.docs .ndl-drawer.ndl-drawer-overlay {
+  position: fixed;
+  top: 4px;
+  box-shadow: -2px 1px 2px 1px rgba(var(--colors-neutral-20));
+}
+
 .doc .paragraph .title {
   font-weight: var(--body-font-weight-bold);
 }
diff --git a/src/partials/footer-scripts.hbs b/src/partials/footer-scripts.hbs
index 5133b1b1..c70e1ef5 100644
--- a/src/partials/footer-scripts.hbs
+++ b/src/partials/footer-scripts.hbs
@@ -10,7 +10,7 @@
   {{/if}}
   {{#if (and (eq @root.page.attributes.theme "cheat-sheet") (not (eq @root.site.url "http://localhost:5252")))}}
   <script src="{{{@root.site.path}}}{{{@root.site.ui.url}}}/js/vendor/auth0.js"></script>
-  
+
   <script src="{{{@root.site.path}}}{{{@root.site.ui.url}}}/js/site.js"></script>
   {{!-- <script async src="{{{@root.site.path}}}{{{@root.site.ui.url}}}/js/vendor/gram.js"></script> --}}
   <script async src="{{{@root.site.path}}}{{{@root.site.ui.url}}}/js/vendor/highlight.js"></script>
@@ -28,7 +28,12 @@
 <script src="https://cdn.jsdelivr.net/npm/neo4j-driver@4.2.2/lib/browser/neo4j-web.min.js"></script>
 {{/if}}
 
+{{#if page.attributes.chatbot}}
+<div id="docs_chatbot"></div>
+<script type="module" crossorigin src="{{{ page.attributes.chatbot }}}/index.js"></script>
+{{/if}}
+
 <div id="neo4j-algolia-search-v2"></div>
 <script src="https://neo4j.com/wp-content/themes/neo4jweb/assets/neo4j-react-modules-assets/search-preact/chunkless/bundle.js"></script>
 <script src="https://neo4j.com/wp-content/themes/neo4jweb/assets/neo4j-react-modules-assets/search-preact/chunkless/polyfill.js"></script>
-<script>window.algoliaSearchOptions = {indexName: "docs",placeholder: "Search Documentation",template: "docs"}</script>
\ No newline at end of file
+<script>window.algoliaSearchOptions = {indexName: "docs",placeholder: "Search Documentation",template: "docs"}</script>
diff --git a/src/partials/head-styles.hbs b/src/partials/head-styles.hbs
index 33903c16..22016a2a 100644
--- a/src/partials/head-styles.hbs
+++ b/src/partials/head-styles.hbs
@@ -1,6 +1,11 @@
 <link rel="stylesheet" href="https://neo4j.com/wp-content/themes/neo4jweb/assets/neo4j-react-modules-assets/search-preact/chunkless/bundle.css" />
 <link rel="stylesheet" href="https://neo4j.com/wp-content/themes/neo4jweb/assets/neo4j-react-modules-assets/search-preact/chunkless/utilities.min.css" />
 
+
+{{#if page.attributes.chatbot}}
+<link rel="stylesheet" crossorigin href="{{{ page.attributes.chatbot }}}/index.css">
+{{/if}}
+
 {{#if page.attributes.cdn}}
     <link rel="preload" href="{{{page.attributes.cdn}}}/fonts/fontawesome-webfont.woff2?v=4.7.0" as="font">
     <link rel="stylesheet" href="{{{page.attributes.cdn}}}/css/site.css">
@@ -18,4 +23,3 @@
     <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
     <link rel="shortcut icon" href="https://neo4j.com/wp-content/themes/neo4jweb/favicon.ico" />
-