diff --git a/layouts/css/base.styl b/layouts/css/base.styl
index b9f827e9cf4ce..02181de07a371 100644
--- a/layouts/css/base.styl
+++ b/layouts/css/base.styl
@@ -80,6 +80,7 @@ pre
 @import 'layout/_main'
 @import 'layout/_lists'
 @import 'page-modules/_linuxfoundation'
+@import 'page-modules/_interactive-banner'
 @import 'page-modules/_header'
 @import 'page-modules/_footer'
 @import 'page-modules/_home'
diff --git a/layouts/css/page-modules/_interactive-banner.styl b/layouts/css/page-modules/_interactive-banner.styl
new file mode 100644
index 0000000000000..8e16fbebb9ea5
--- /dev/null
+++ b/layouts/css/page-modules/_interactive-banner.styl
@@ -0,0 +1,17 @@
+#interactive-wrapper
+  flex none
+
+#interactive
+  background-image url("/static/images/interactive/background.jpg")
+  display flex
+  align-items center
+  justify-content space-around
+
+#interactive
+  > *
+    border 20px solid transparent
+    min-width 1px
+
+@media (max-width: 480px)
+  #interactive
+    flex-wrap wrap
diff --git a/layouts/index.hbs b/layouts/index.hbs
index 9f21c48090cda..b48eb26f9cd4e 100644
--- a/layouts/index.hbs
+++ b/layouts/index.hbs
@@ -5,6 +5,18 @@
 <body>
   {{> header }}
 
+  <div id="interactive-wrapper">
+    <div id="interactive">
+      <span>
+        <img src="/static/images/interactive/nodejs-interactive-logo-center.png" />
+      </span>
+      <a href="http://events.linuxfoundation.org/events/node-interactive">
+        <img src="/static/images/interactive/nodejs-interactive-hero-banner-right-na.png"
+          alt="Node.js Interactive North America, Austin, Texas, November 29 - Dec 2, 2016" />
+      </a>
+    </div>
+  </div>
+
   <div id="main">
     <div class="container">
 
@@ -71,42 +83,6 @@
     </div>
   </div>
 
-  <style>
-  #interactive-wrapper {
-    flex: none;
-  }
-
-  #interactive {
-    background-image: url("/static/images/interactive/background.jpg");
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-  }
-
-  #interactive > * {
-    border: 20px solid transparent;
-    min-width: 1px;
-  }
-
-  @media (max-width: 480px) {
-    #interactive {
-      flex-wrap: wrap;
-    }
-  }
-  </style>
-
-  <div id="interactive-wrapper">
-    <div id="interactive">
-      <span>
-        <img src="/static/images/interactive/nodejs-interactive-logo-center.png" />
-      </span>
-      <a href="http://events.linuxfoundation.org/events/node-interactive">
-        <img src="/static/images/interactive/nodejs-interactive-hero-banner-right-na.png"
-          alt="Node.js Interactive North America, Austin, Texas, November 29 - Dec 2, 2016" />
-      </a>
-    </div>
-  </div>
-
   {{> footer className="no-margin-top" }}
   <script src="/static/js/download.js" async defer></script>
   <script src="/static/js/dnt_helper.js"></script>
diff --git a/static/images/interactive/background.jpg b/static/images/interactive/background.jpg
index a367da571ee4c..6ad39e31389fb 100644
Binary files a/static/images/interactive/background.jpg and b/static/images/interactive/background.jpg differ
