diff --git a/assets/landing.css b/assets/landing.css
index bd76d8e..d1d8aa2 100644
--- a/assets/landing.css
+++ b/assets/landing.css
@@ -36,14 +36,37 @@
 }
 .landing-row .headers div.header-box .main-header.bottom {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
+}
+.landing-row .headers div.header-box .main-header.bottom h2 {
+  margin-top: 20rem;
 }
 .landing-row .headers div.header-box .sub-header {
   margin-top: calc(var(--cbar-spacing) * 2);
 }
-.landing-row .color-stack {
+.landing-row .headers div.bottom-banner {
   display: flex;
   flex-direction: column;
+  background-color: var(--yellow0);
+  height: var(--cbar-spacing);
+}
+@media (width > 578px) {
+  .landing-row .headers div.bottom-banner {
+    display: none;
+  }
+}
+.landing-row .color-stack {
+  flex-direction: column;
+}
+@media (width > 578px) {
+  .landing-row .color-stack {
+    display: flex;
+  }
+}
+@media (width <= 578px) {
+  .landing-row .color-stack {
+    display: none;
+  }
 }
 .landing-row .color-stack > div {
   flex: 1 0 auto;
diff --git a/assets/landing.css.map b/assets/landing.css.map
index b0fba75..bed5209 100644
--- a/assets/landing.css.map
+++ b/assets/landing.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/landing.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EAEI;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EAEI;;AAOZ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAIR;EAEI;EAEA;;AAGA;EACI;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI","file":"landing.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/landing.scss"],"names":[],"mappings":"AAEA;EACI;;;AAGJ;EAEI;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AACA;EACI;;AAIR;EAEI;;AAIR;EAII;EACA;EACA;EACA;;AANA;EADJ;IAEQ;;;AAWZ;EASI;;AAPA;EAFJ;IAGQ;;;AAEJ;EALJ;IAMQ;;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAIR;EAEI;EAEA;;AAGA;EACI;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI","file":"landing.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index f8da662..586b5d7 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,7 @@
                 <div></div>
                 <div class="header-box" style="flex: 1 1 auto;">
                     <div class="main-header bottom">
+                        <div style="height: 2rem"></div>
                         <h2>Rhythms</h2>
                     </div>
                     <div class="sub-header">
@@ -44,6 +45,8 @@
                         <div style="flex: 1 1 auto"></div>
                     </div>
                 </div>
+                <div class="bottom-banner"></div>
+                <div style="flex: 1 1"></div>
             </div>
             <div class="color-stack" style="flex: 1 0 auto;">
 
diff --git a/scss/landing.scss b/scss/landing.scss
index 46f51db..db8154e 100644
--- a/scss/landing.scss
+++ b/scss/landing.scss
@@ -1,3 +1,5 @@
+
+
 :root {
     --cbar-spacing: 4rem;
 }
@@ -39,7 +41,10 @@
 
             .main-header.bottom {
                 display: flex;
-                flex-direction: column-reverse;
+                flex-direction: column;
+                h2 {
+                    margin-top: 20rem;
+                }
             }
 
             .sub-header {
@@ -48,11 +53,28 @@
             }
         }
 
+        div.bottom-banner {
+            @media (width > 578px) {
+                display: none;
+            }
+            display: flex;
+            flex-direction: column;
+            background-color: var(--yellow0);
+            height: var(--cbar-spacing);
+        }
+
 
     }
 
     .color-stack {
-        display: flex;
+
+        @media (width > 578px ) {
+            display: flex;            
+        }
+        @media (width <= 578px ) { 
+            display: none;            
+        }
+
         flex-direction: column;
 
         >div {