diff --git a/src/css/custom.css b/src/css/custom.css
index 144c9eb..55e7ecc 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -49,6 +49,14 @@ SPDX-License-Identifier: MIT
   --ifm-footer-title-color: var(--ifm-color-white);
 }
 
+.hero__img {
+    max-height: 20rem;
+}
+
+.hero__title {
+    color: #FFFFFF;
+}
+
 /* Sidebar Method labels */
 .api-method>.menu__link {
   align-items: center;
diff --git a/src/pages/index.js b/src/pages/index.js
index 16e0b87..40c7589 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -13,18 +13,14 @@ import HomepageFeatures from "@site/src/components/HomepageFeatures";
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+    <header className={clsx("hero hero--secondary", styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/category/api"
-          >
-            API Documentation
-          </Link>
-        </div>
+        <img
+          className="hero__img"
+          src="/logos/rendered/logo-white-vertical.svg"
+          alt="Sidings Media Logo"
+        />
+        <h1 className="hero__title">Documentation Portal</h1>
       </div>
     </header>
   );