diff --git a/src/css/footer.css b/src/css/footer.css
index 9443df5..68e799c 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -4,6 +4,8 @@ footer.footer {
   font-size: calc(15 / var(--rem-base) * 1rem);
   line-height: var(--footer-line-height);
   padding: 1.5rem;
+  /* box-shadow: 0 -8px 10px 0 rgba(0, 0, 0, 0.1); */
+  /* border-top: 2px var(--panel-background); */
 }
 
 .footer p {
@@ -86,8 +88,8 @@ footer.footer {
 }
 
 .social-icon {
-  background-color: var(--footer-font-color);
-  color: var(--body-font-color);
+  color: var(--footer-font-color);
+  background-color: var(--footer-background);
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
@@ -100,8 +102,8 @@ footer.footer {
 }
 
 .social-icon:hover {
+  color: var(--footer-background);
   background-color: var(--color-brand-primary);
-  color: var(--footer-font-color);
   text-decoration: none;
 }
 
@@ -110,3 +112,7 @@ footer.footer {
   height: 1px;
   background-color: var(--footer-font-color);
 }
+
+.copyright-notice {
+  color: var(--footer-copyright-font-color);
+}
diff --git a/src/css/header.css b/src/css/header.css
index 86cd94a..5ea49cc 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -23,6 +23,7 @@ body {
   display: flex;
   justify-content: space-between;
   padding: 0 1rem;
+  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
 }
 
 .navbar a {
diff --git a/src/css/nav.css b/src/css/nav.css
index 81b72a6..f5ae6e9 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -31,6 +31,7 @@
     position: static;
     top: 0;
     visibility: visible;
+    border-right: solid 2px var(--panel-background);
   }
 }
 
@@ -96,6 +97,11 @@ html.is-clipped--nav {
   padding: 0.5rem 0.75rem;
   line-height: var(--nav-line-height);
   position: relative;
+  color: var(--nav-muted-color);
+}
+
+.nav-menu:hover {
+  color: var(--nav-font-color);
 }
 
 .nav-menu h3.title {
diff --git a/src/css/vars.css b/src/css/vars.css
index 70ddaf2..e256f0f 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -18,6 +18,9 @@
   --color-black: #000;
   --color-brand-primary: #1880bd;
   --color-brand-secondary: #b80069;
+  --color-light-text: rgb(175, 187, 200);
+  --color-text: #182c3d;
+  --color-background2: #f2f6fa;
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
   --body-font-size: 1.0625em; /* 17px */
@@ -31,23 +34,23 @@
   --monospace-font-weight-bold: 500;
   /* base */
   --body-background: var(--color-white);
-  --panel-background: var(--color-smoke-30);
+  --panel-background: var(--color-background2);
   --panel-border-color: var(--color-smoke-90);
   --scrollbar-thumb-color: var(--color-gray-10);
   /* navbar */
-  --navbar-background: var(--color-jet-70);
-  --navbar-font-color: var(--color-white);
-  --navbar_hover-background: var(--color-black);
+  --navbar-background: var(--color-white);
+  --navbar-font-color: var(--color-black);
+  --navbar_hover-background: var(--color-white);
   --navbar-button-background: var(--color-brand-secondary);
   --navbar-button-border-color: var(--color-brand-secondary);
-  --navbar-button-font-color: var(--color-wite);
+  --navbar-button-font-color: var(--color-white);
   --navbar-menu-border-color: var(--panel-border-color);
   --navbar-menu-background: var(--color-white);
-  --navbar-menu-font-color: var(--color-white);
+  --navbar-menu-font-color: var(--color-black);
   --navbar-menu_hover-background: var(--color-smoke-50);
   /* nav */
-  --nav-background: var(--panel-background);
-  --nav-border-color: var(--color-gray-10);
+  --nav-background: var(--color-white);
+  --nav-border-color: var(--panel-background);
   --nav-line-height: 1.35;
   --nav-heading-font-color: var(--color-jet-30);
   --nav-muted-color: var(--color-gray-70);
@@ -116,8 +119,9 @@
   --toc-line-height: 1.2;
   /* footer */
   --footer-line-height: var(--doc-line-height);
-  --footer-background: var(--color-jet-70);
-  --footer-font-color: var(--color-white);
+  --footer-background: var(--color-white);
+  --footer-font-color: var(--color-text);
+  --footer-copyright-font-color: var(--color-light-text);
   --footer-link-font-color: var(--color-smoke-70);
   /* dimensions and positioning */
   --navbar-height: calc(73 / var(--rem-base) * 1rem);
diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs
index e34edd8..e16ab6f 100644
--- a/src/partials/footer-content.hbs
+++ b/src/partials/footer-content.hbs
@@ -68,8 +68,7 @@
           </a>
         </div>
       </div>
-      <!-- copyright notice -->
-      <p>
+      <p class="copyright-notice">
         Apache, Apache Kafka®, Kafka, and the Kafka logo, Apache Druid, Druid, and the Druid logo,
         Apache ZooKeeper™, ZooKeeper, and the Druid logo, Apache Hive™, Hive, and the Hive logo,
         Apache Spark™, Spark, and the Spark logo, Apache Airflow, Airflow, and the Airflow logo,