diff --git a/docusaurus.config.js b/docusaurus.config.js
index 43513407..53ea60dd 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -1,6 +1,6 @@
 module.exports = {
-  title: "Home Assistant Developer Documentation",
-  tagline: "All you need to start developing for Home Assistant",
+  title: "Home Assistant Developer Docs",
+  tagline: "All you need to start developing",
   url: "https://developers.home-assistant.io",
   baseUrl: "/",
   favicon: "img/favicon.png",
diff --git a/src/css/custom.css b/src/css/custom.css
index d82bb7d8..8f9a9221 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -23,10 +23,6 @@
   padding: 0 var(--ifm-pre-padding);
 }
 
-a.hero__text{
-  color: var(--ifm-heading-color);
-}
-
 .videoSection {
   padding: 20px 0;
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index ab91347c..2aa6b003 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -120,13 +120,20 @@ function Home() {
     >
       <header className={classnames("hero hero--primary", styles.heroBanner)}>
         <div className="container">
-          <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
-          <p className={styles.heroTagline}>{siteConfig.tagline}</p>
-          <p>
-            <a className="hero__text" href="https://www.home-assistant.io">
-              Not a developer? Go to the normal website
-            </a>
-          </p>
+          <div className="row">
+            <div className={classnames('col col--5')}>
+              <img className={styles.heroLogo} alt="Home Assistant Logo" src="/img/logo-white.svg" />
+            </div>
+            <div className={classnames('col col--5')}>
+              <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
+              <p className={styles.heroTagline}>{siteConfig.tagline}</p>
+              <p>
+                <a className={styles.heroText} href="https://www.home-assistant.io">
+                  Not a developer? Go to the normal website
+                </a>
+              </p>
+            </div>
+          </div>
         </div>
       </header>
       <main>
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index 5f8ea4b1..1e2335ed 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -12,10 +12,20 @@
 
 .heroTitle {
   font-size: 3rem;
+  color: #ffffff;
 }
 
 .heroTagline {
   font-size: 1.4rem;
+  color: #ffffff;
+}
+
+.heroLogo {
+  max-height: 16em;
+}
+
+a.heroText{
+  color: #ffffff;
 }
 
 @media screen and (max-width: 966px) {