diff --git a/ui-supplemental/css/custom.css b/ui-supplemental/css/custom.css
index af0e3c0c..4157e24e 100644
--- a/ui-supplemental/css/custom.css
+++ b/ui-supplemental/css/custom.css
@@ -1,3 +1,46 @@
+:root {
+  --white: #fff;
+  --primary-color: #d0245e;
+  --secondary-color: #888;
+  --button-gradient: linear-gradient(82.8deg, #d0245e 5%, #df487b 95%);
+  --main-gradient: linear-gradient(135deg, #0b365b, #6b1011);
+  --black-10: rgba(0, 0, 0, .1);
+  --black-20: rgba(0, 0, 0, .2);
+  --black-30: rgba(0, 0, 0, .3);
+  --black-40: rgba(0, 0, 0, .4);
+  --black-50: rgba(0, 0, 0, .5);
+  --black-60: rgba(0, 0, 0, .6);
+  --black-70: rgba(0, 0, 0, .7);
+  --black-80: rgba(0, 0, 0, .8);
+  --black-90: rgba(0, 0, 0, .9);
+  --black-100: #000;
+  --bg-grad-1: #f3f3f3;
+  --bg-grad-2: #f8f3f3;
+  --dialog-bg: #f6f6f6;
+  --border-primary: #eaeaea;
+  --light-grey: #999;
+  --medium-grey: #666;
+  --dark-grey: #333;
+}
+
+body {
+  background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
+  padding-top: 4rem;
+}
+
+.toolbar {
+  top: 4rem;
+}
+
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.doc {
+  width: 100%;
+  max-width: 100%;
+}
 
 .doc .prompt {
   color: blue;
@@ -108,3 +151,153 @@ kbd {
 img.medium-zoom-image {
   z-index: 1000;
 }
+
+.navbar-burger span {
+  background: var(--medium-grey);
+  border-radius: 2px;
+  width: 18px;
+}
+
+.navbar {
+  background: transparent;
+  height: 4rem;
+  background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.navbar .navbar-item,
+.navbar .navbar-link {
+  font-size: 16px;
+  color: var(--medium-grey);
+}
+
+.navbar-end .navbar-item.has-dropdown:hover .navbar-link,
+.navbar-end .navbar-link:hover,
+.navbar-end>a.navbar-item:hover {
+  background: transparent !important;
+  color: var(--medium-grey) !important;
+}
+
+.nav-toggle {
+  display: none;
+}
+
+footer {
+  background-color: var(--white);
+  padding: 60px 0
+}
+
+footer .footer-link-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border-primary);
+  padding: 0 36px 12px;
+  margin: 0 24px 36px
+}
+
+@media only screen and (max-width:768px) {
+  footer .footer-link-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr
+  }
+}
+
+footer .footer-link-section .footer-logo {
+  display: flex;
+  margin: 0 auto
+}
+
+@media only screen and (max-width:768px) {
+  footer .footer-link-section .footer-logo {
+    order: -1;
+    grid-column: 1/3;
+    margin-bottom: 12px
+  }
+}
+
+footer .footer-link-section ul {
+  display: flex;
+  margin: 0;
+  padding: 0
+}
+
+@media only screen and (max-width:768px) {
+  footer .footer-link-section ul {
+    flex-direction: column
+  }
+}
+
+footer .footer-link-section ul li {
+  list-style: none;
+  margin-right: 60px;
+}
+
+
+footer .footer-link-section ul li a {
+  color: var(--dark-grey);
+  font-size: 16px;
+}
+
+footer .footer-link-section ul li a:hover {
+  text-decoration: none;
+}
+
+@media only screen and (max-width:768px) {
+  footer .footer-link-section ul li {
+    margin: 0 0 12px
+  }
+}
+
+footer .footer-link-section ul li:last-child {
+  margin-right: 0;
+  margin-bottom: 0
+}
+
+footer .footer-social {
+  display: flex;
+  margin: 0 auto 12px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content
+}
+
+footer .footer-social a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--medium-grey);
+  border-radius: 1000px;
+  height: 36px;
+  width: 36px;
+  margin-right: 24px
+}
+
+footer .footer-social a:last-child {
+  margin-right: 0
+}
+
+footer .footer-practices {
+  display: flex;
+  margin: 0 auto 36px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content
+}
+
+footer .footer-copyright {
+  padding: 0 36px;
+  text-align: center;
+  margin: auto
+}
+
+footer .footer-copyright h2 {
+  font-size: 16px;
+  color: var(--dark-grey)
+}
+
+footer .footer-copyright p {
+  font-size: 14px;
+  color: var(--light-grey)
+}
diff --git a/ui-supplemental/img/facebook.svg b/ui-supplemental/img/facebook.svg
new file mode 100644
index 00000000..d5f5cf73
--- /dev/null
+++ b/ui-supplemental/img/facebook.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 310" height="36" width="36" fill="#666">
+  <path
+    d="M81.703 165.106h33.981V305a5 5 0 0 0 5 5H178.3a5 5 0 0 0 5-5V165.765h39.064a5 5 0 0 0 4.967-4.429l5.933-51.502a5 5 0 0 0-4.966-5.572h-44.996V71.978c0-9.732 5.24-14.667 15.576-14.667h29.42a5 5 0 0 0 5-5V5.037a5 5 0 0 0-5-5h-40.545A39.746 39.746 0 0 0 185.896 0c-7.035 0-31.488 1.381-50.804 19.151-21.402 19.692-18.427 43.27-17.716 47.358v37.752H81.703a5 5 0 0 0-5 5v50.844a5 5 0 0 0 5 5.001z">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/ui-supplemental/img/icon/favicon.ico b/ui-supplemental/img/icon/favicon.ico
index 80d7af22..3feee153 100644
Binary files a/ui-supplemental/img/icon/favicon.ico and b/ui-supplemental/img/icon/favicon.ico differ
diff --git a/ui-supplemental/img/linkedin.svg b/ui-supplemental/img/linkedin.svg
new file mode 100644
index 00000000..4d4066c9
--- /dev/null
+++ b/ui-supplemental/img/linkedin.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 310" height="36" width="36" fill="#666">
+  <path
+    d="M72.16 99.73H9.927a5 5 0 0 0-5 5v199.928a5 5 0 0 0 5 5H72.16a5 5 0 0 0 5-5V104.73a5 5 0 0 0-5-5zM41.066.341C18.422.341 0 18.743 0 41.362 0 63.991 18.422 82.4 41.066 82.4c22.626 0 41.033-18.41 41.033-41.038C82.1 18.743 63.692.341 41.066.341zM230.454 94.761c-24.995 0-43.472 10.745-54.679 22.954V104.73a5 5 0 0 0-5-5h-59.599a5 5 0 0 0-5 5v199.928a5 5 0 0 0 5 5h62.097a5 5 0 0 0 5-5V205.74c0-33.333 9.054-46.319 32.29-46.319 25.306 0 27.317 20.818 27.317 48.034v97.204a5 5 0 0 0 5 5H305a5 5 0 0 0 5-5V194.995c0-49.565-9.451-100.234-79.546-100.234z">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/ui-supplemental/img/logo/brlcad.png b/ui-supplemental/img/logo/brlcad.png
index f9f93660..e56e41c3 100644
Binary files a/ui-supplemental/img/logo/brlcad.png and b/ui-supplemental/img/logo/brlcad.png differ
diff --git a/ui-supplemental/img/twitter.svg b/ui-supplemental/img/twitter.svg
new file mode 100644
index 00000000..96db043e
--- /dev/null
+++ b/ui-supplemental/img/twitter.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 310" height="36" width="36" fill="#666">
+  <path
+    d="M302.973 57.388a117.512 117.512 0 0 1-14.993 5.463 66.276 66.276 0 0 0 13.494-23.73 5 5 0 0 0-7.313-5.824 117.994 117.994 0 0 1-34.878 13.783c-12.381-12.098-29.197-18.983-46.581-18.983-36.695 0-66.549 29.853-66.549 66.547 0 2.89.183 5.764.545 8.598C101.163 99.244 58.83 76.863 29.76 41.204a5.001 5.001 0 0 0-8.196.642c-5.896 10.117-9.013 21.688-9.013 33.461 0 16.035 5.725 31.249 15.838 43.137a56.37 56.37 0 0 1-8.907-3.977 5 5 0 0 0-7.427 4.257c-.007.295-.007.59-.007.889 0 23.935 12.882 45.484 32.577 57.229a57.372 57.372 0 0 1-5.063-.735 4.998 4.998 0 0 0-5.699 6.437c7.29 22.76 26.059 39.501 48.749 44.605-18.819 11.787-40.34 17.961-62.932 17.961a120.4 120.4 0 0 1-14.095-.826 5 5 0 0 0-3.286 9.174c29.023 18.609 62.582 28.445 97.047 28.445 67.754 0 110.139-31.95 133.764-58.753 29.46-33.421 46.356-77.658 46.356-121.367 0-1.826-.028-3.67-.084-5.508 11.623-8.757 21.63-19.355 29.773-31.536a5 5 0 0 0-6.182-7.351z">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/ui-supplemental/img/youtube.svg b/ui-supplemental/img/youtube.svg
new file mode 100644
index 00000000..1ac00037
--- /dev/null
+++ b/ui-supplemental/img/youtube.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 310" height="36" width="36" fill="#666">
+  <path
+    d="M297.917 64.645c-11.19-13.302-31.85-18.728-71.306-18.728H83.386c-40.359 0-61.369 5.776-72.517 19.938C0 79.663 0 100.008 0 128.166v53.669c0 54.551 12.896 82.248 83.386 82.248h143.226c34.216 0 53.176-4.788 65.442-16.527C304.633 235.518 310 215.863 310 181.835v-53.669c0-29.695-.841-50.16-12.083-63.521zm-98.896 97.765-65.038 33.991a9.997 9.997 0 0 1-14.632-8.863v-67.764a10 10 0 0 1 14.609-8.874l65.038 33.772a10 10 0 0 1 .023 17.738z">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/ui-supplemental/partials/footer-content.hbs b/ui-supplemental/partials/footer-content.hbs
index cb55ccd2..597ed4c5 100644
--- a/ui-supplemental/partials/footer-content.hbs
+++ b/ui-supplemental/partials/footer-content.hbs
@@ -1,6 +1,85 @@
-{{!-- we don't need any footer for the time being
-<footer class="footer">
-  <p>This page was built using the Antora default UI.</p>
-  <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
+<footer>
+  <div class="footer-link-section">
+    <ul>
+      <li>
+        <a href="https://github.com/BRL-CAD/brlcad">Download</a>
+      </li>
+      <li>
+        <a href="https://www.facebook.com/BRL-CAD-387112738872/">News</a>
+      </li>
+      <li>
+        <a href="https://en.wikipedia.org/wiki/BRL-CAD">About</a>
+      </li>
+    </ul>
+    <a class="footer-logo" href="/">
+      <img
+        alt="BRL-CAD"
+        src="{{@root.uiRootPath}}/img/logo/brlcad.png"
+        height="64"
+        width="64"
+      />
+    </a>
+    <ul>
+      <li>
+        <a href="https://brlcad.org/wiki/">Docs</a>
+      </li>
+      <li>
+        <a href="https://github.com/BRL-CAD/brlcad/issues">Support</a>
+      </li>
+      <li>
+        <a href="https://brlcad.org/gallery/">Gallery</a>
+      </li>
+    </ul>
+  </div>
+  <div class="footer-social">
+    <a href="https://www.facebook.com/pages/BRL-CAD/387112738872">
+    <img
+        alt="Facebook"
+        src="{{@root.uiRootPath}}/img/facebook.svg"
+        height="18"
+        width="18"
+      />
+    </a>
+    <a href="https://twitter.com/brl_cad">
+       <img
+        alt="Twitter"
+        src="{{@root.uiRootPath}}/img/twitter.svg"
+        height="18"
+        width="18"
+      />
+    </a>
+    <a href="https://www.linkedin.com/in/brlcad">
+       <img
+        alt="LinkedIn"
+        src="{{@root.uiRootPath}}/img/linkedin.svg"
+        height="18"
+        width="18"
+      />
+    </a>
+    <a href="https://www.youtube.com/results?search_query=brl+-+cad">
+      <img
+        alt="Youtube"
+        src="{{@root.uiRootPath}}/img/youtube.svg"
+        height="18"
+        width="18"
+      />
+    </a>
+  </div>
+  <a
+    class="footer-practices"
+    href="https://bestpractices.coreinfrastructure.org/projects/66"
+  >
+    <img
+      alt="best practices"
+      src="https://bestpractices.coreinfrastructure.org/projects/66/badge"
+      height="20"
+      width="184"
+    />
+  </a>
+  <div class="footer-copyright">
+    <h2>BRL-CAD © 2021</h2>
+    <p>All trademarks referenced herein are the properties of their respective
+      owners. This site is not sponsored, endorsed, or run by the U.S.
+      Government.</p>
+  </div>
 </footer>
---}}
diff --git a/ui-supplemental/partials/header-content.hbs b/ui-supplemental/partials/header-content.hbs
index 132ac8cf..268d85ab 100644
--- a/ui-supplemental/partials/header-content.hbs
+++ b/ui-supplemental/partials/header-content.hbs
@@ -20,7 +20,7 @@
     </div>
     <div id="topbar-nav" class="navbar-menu">
       <div class="navbar-end">
-        <!-- <a class="navbar-item" href="{{site.url}}">Home</a> -->
+        <a class="navbar-item" href="https://brlcad.org">Home</a>
         <a class="navbar-item" href="{{site.url}}/intro/">Introduction</a>
         <a class="navbar-item" href="https://brl-cad.github.io/gallery/" target="_blank">Gallery</a>
         <a class="navbar-item" href="https://brl-cad.github.io/wiki/" target="_blank">Wiki</a>
@@ -35,8 +35,7 @@
           </div>
         </div>
 
-{{!-- the header menu needs to be customized
-        <div class="navbar-item has-dropdown is-hoverable">
+        {{!-- <div class="navbar-item has-dropdown is-hoverable">
           <a class="navbar-link" href="#">Products</a>
           <div class="navbar-dropdown">
             <a class="navbar-item" href="#">Product A</a>
@@ -56,8 +55,7 @@
           <span class="control">
             <a class="button is-primary" href="#">Download</a>
           </span>
-        </div>
---}}
+        </div> --}}
       </div>
     </div>
   </nav>
diff --git a/ui-supplemental/partials/nav.hbs b/ui-supplemental/partials/nav.hbs
index 4f9bf9db..868fc7c9 100644
--- a/ui-supplemental/partials/nav.hbs
+++ b/ui-supplemental/partials/nav.hbs
@@ -1,4 +1,4 @@
-<div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
+<div class="nav-container" style="display: none;" {{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="nav">
     <div class="panels">
 {{> nav-menu}}
@@ -8,7 +8,7 @@
     But if we just remove nav-explore, the right menu (toc) disappears as well.
     So, we enclose it in another div, and make it invisible.
 --}}
-<div style="display: none;">
+<div>
 {{> nav-explore}}
 </div>
     </div>