diff --git a/antora-playbook.yml b/antora-playbook.yml
index b021658c..07f52a95 100644
--- a/antora-playbook.yml
+++ b/antora-playbook.yml
@@ -14,4 +14,5 @@ output:
 ui:
   bundle:
     url: https://github.com/tigergraph/antora-ui/blob/main/build/ui-bundle.zip?raw=true
-    snapshot: true
\ No newline at end of file
+    snapshot: true
+  supplemental_files: ./supplemental-ui
\ No newline at end of file
diff --git a/supplemental-ui/partials/header-content.hbs b/supplemental-ui/partials/header-content.hbs
new file mode 100644
index 00000000..783d1b95
--- /dev/null
+++ b/supplemental-ui/partials/header-content.hbs
@@ -0,0 +1,118 @@
+<header class="header">
+  <nav class="navbar">
+    <div class="navbar-brand hide-for-print">
+      <a class="navbar-item" href="https://www.tigergraph.com/">
+        <img id="navbar-logo"
+             src="https://www.tigergraph.com/wp-content/uploads/2020/05/TG_LOGO.svg"
+             alt="TigerGraph Logo">
+      </a>
+      {{!-- <a class="navbar-item" href="{{{or site.url (or siteRootUrl siteRootPath)}}}">{{site.title}}</a> --}}
+      <a class="navbar-item" href="https://www.tigergraph.com/docs/home/">{{site.title}}</a>
+      <button class="navbar-burger" data-target="topbar-nav">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+    </div>
+    <div id="topbar-nav" class="navbar-menu">
+      <div class="navbar-end">
+        <!-- Language Picker Dropdown -->
+        <!--div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link" href="#">
+            English
+          </a>
+          <div class="navbar-dropdown">
+            <a class="navbar-item" href="https://www.tigergraph.com/docs/">English</a>
+            <a class="navbar-item" href="https://jp.docs.tigergraph.com/">日本語</a>
+          </div>
+        </div-->
+        <div class="navbar-item search hide-for-print">
+          {{#if (and page.component (ne page.component.name 'home') (ne page.component.name 'ROOT'))}}
+          <div id="search" class="field has-filter">
+            <input class="query" type="text" placeholder="Search the docs">
+            <label class="filter checkbox">
+              <!--input type="checkbox" data-facet-filter="component:{{page.component.name}},version:{{page.version}}"> <span>In this section</span-->
+              <!--input type="checkbox" data-facet-filter="component:{{page.component.name}}"> <span>In this section</span-->
+            </label>
+<!--             <label class="filter1 checkbox1">
+              <input type="checkbox" checked> <span>Latest</span>
+            </label> -->
+          </div>
+          {{else}}
+          <div id="search" class="field">
+            <input class="query" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}>
+          </div>
+          {{/if}}
+        </div>
+
+        <!--a class="navbar-item" href="/home">Home</a-->
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link" href="#">Products</a>
+          <div class="navbar-dropdown">
+            <div class="dropdown-label">TigerGraph Savanna</div>
+            <div class="dropdown-category">
+              <a class="category-item" href="{{relativize site.components.savanna.url}}">{{site.components.savanna.title}}</a>
+              <a class="category-item" href="{{relativize site.components.cloud.url}}">(<i>{{site.components.cloud.title}}</i>)</a>
+            </div>
+
+            <div class="dropdown-label">TigerGraph Server</div>
+            <div class="dropdown-category">
+              <a class="category-item" href="{{relativize site.components.tigergraph-server.url}}">{{site.components.tigergraph-server.title}}</a>
+            </div>
+
+            <div class="dropdown-label">TigerGraph Suite</div>
+            <div class="dropdown-category">
+              <a class="category-item" href="{{relativize site.components.gui.url}}">{{site.components.gui.title}}</a>
+              <a class="category-item" href="{{relativize site.components.insights.url}}">{{site.components.insights.title}}</a>
+              <a class="category-item" href="https://www.tigergraph.com/docs/tigergraph-server/current/gsql-shell/web">GSQL Web Shell</a>
+            </div>
+
+            <div class="dropdown-label">Query Languages</div>
+            <div class="dropdown-category">
+              <a class="category-item" href="{{relativize site.components.gsql-ref.url}}">{{site.components.gsql-ref.title}}</a>
+              <a class="category-item" href="https://www.tigergraph.com/docs/tigergraph-server/current/gsql-shell/web">GSQL Web Shell</a>
+              <a class="category-item" href="https://www.tigergraph.com/docs/gsql-ref/current/opencypher-in-gsql">OpenCypher</a>
+            </div>
+
+            <div class="dropdown-label">AI & Graph Intelligence</div>
+            <div class="dropdown-category">
+              <a class="category-item" href="{{relativize site.components.graph-ml.url}}">{{site.components.graph-ml.title}}</a>
+              <a class="category-item" href="https://www.tigergraph.com/docs/gsql-ref/current/vector/">Hybrid Graph+Vector Search</a>
+            </div>
+
+            <div class="dropdown-label">Connectors and APIs</div>
+            <div class="dropdown-category">
+              <a class="category-item" href="https://www.tigergraph.com/docs/tigergraph-server/current/data-loading">Data Connectors</a>
+              <a class="category-item" href="{{relativize site.components.pytigergraph.url}}">{{site.components.pytigergraph.title}}</a>
+              <a class="category-item" href="{{relativize site.components.graphql.url}}">{{site.components.graphql.title}}</a>
+              <a class="category-item" href="https://github.com/tigergraph/ecosys/tree/master/tools/etl/tg-jdbc-driver">JDBC Driver</a>
+            </div>
+
+          </div>
+        </div>
+
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link" href="#">Resources</a>
+          <div class="navbar-dropdown">
+            <a class="navbar-item" href="https://dev.tigergraph.com/">Developer Site</a>
+            <a class="navbar-item" href="https://community.tigergraph.com/">Community Forum</a>
+            <a class="navbar-item" href="https://tigergraph.freshdesk.com/support/solutions">Knowledge Base</a>
+          </div>
+        </div>
+
+
+
+        <div class="navbar-item">
+          <span class="control">
+            <a class="button is-primary" href="https://dl.tigergraph.com">Download</a>
+          </span>
+        </div>
+        <div class="navbar-item">
+          <span class="control">
+            <a class="button is-primary" href="https://savanna.tgcloud.io"> TG Savanna</a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>
diff --git a/supplemental-ui/partials/header-scripts.hbs b/supplemental-ui/partials/header-scripts.hbs
new file mode 100644
index 00000000..30ed1165
--- /dev/null
+++ b/supplemental-ui/partials/header-scripts.hbs
@@ -0,0 +1,9 @@
+<style>
+.navbar-brand {
+  align-items: center;
+}
+.navbar-brand > .navbar-item {
+  display: flex;
+  align-items: center;
+}
+</style>