diff --git a/app/assets/images/FlowChart@1x.png b/app/assets/images/FlowChart@1x.png
new file mode 100644
index 0000000..094e443
Binary files /dev/null and b/app/assets/images/FlowChart@1x.png differ
diff --git a/app/assets/images/FlowChart@2x.png b/app/assets/images/FlowChart@2x.png
new file mode 100644
index 0000000..2fad44d
Binary files /dev/null and b/app/assets/images/FlowChart@2x.png differ
diff --git a/app/assets/images/FlowChart@3x.png b/app/assets/images/FlowChart@3x.png
new file mode 100644
index 0000000..186ed8b
Binary files /dev/null and b/app/assets/images/FlowChart@3x.png differ
diff --git a/app/assets/images/ScreenGrab@1.0x.png b/app/assets/images/ScreenGrab@1.0x.png
new file mode 100644
index 0000000..60d7b50
Binary files /dev/null and b/app/assets/images/ScreenGrab@1.0x.png differ
diff --git a/app/assets/images/ScreenGrab@1.5x.png b/app/assets/images/ScreenGrab@1.5x.png
new file mode 100644
index 0000000..65ef342
Binary files /dev/null and b/app/assets/images/ScreenGrab@1.5x.png differ
diff --git a/app/assets/images/ScreenGrab@2.0x.png b/app/assets/images/ScreenGrab@2.0x.png
new file mode 100644
index 0000000..be9cec6
Binary files /dev/null and b/app/assets/images/ScreenGrab@2.0x.png differ
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index e2f0d0e..f61cfe1 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -187,6 +187,22 @@ a	{
 	margin-bottom: 0em;
 }
 
+.row__hero-banner {
+  margin-top: 1em;
+  
+  h1 {
+    text-indent: -9999px;
+    width: 1px;
+    height: 1px;
+    background-image: '';
+    overflow: hidden;
+  }
+}
+
+.row__hero-flow {
+  text-align: center;
+}
+
 
 .row-sample {
   margin-top: 3.5em;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index dd7a636..c94814e 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,4 +1,3 @@
-<!doctype html>
 <html class="no-js" lang="">
 	<head>
 		<meta charset="utf-8">
@@ -24,21 +23,32 @@
     <%= render "layouts/nav" unless current_page?('/') %>
 
     <header class="container-fluid page-header page-header__hero" role="banner">
-      <div class="text-center page-header__content">
+      <div class="page-header__content">
         <!-- If the particular view has some markup for :page_header -->
         <% if content_for?(:page_header) %>
           <%= yield :page_header %>
 
         <!-- Otherwise, show the hero banner -->
         <% else %>
-          <h1 class="page-header__title"><%= t('brand') %></h1>
-          <div class="logo"><%= image_tag "FW_LG-Logo-Color@1.00x.png", alt: " Welcome to #{ t('brand') }. This is our logo." %></div>
-          <h2 class="page-header__subtitle">Plan your meals for the  week using your favorite recipes from your self-curated cookbook.</h2>
-          <h3 class="page-header__motto">We'll even build you a shopping list to take to the grocery store.</h3>
-          <div class="page-header__call-to-action"><%= link_to "Start buildling your cookbook <i class=\"glyphicon glyphicon-chevron-right \"></i>".html_safe, new_user_registration_path, class: "btn btn-primary btn-lg" %> </div>
-          <div class="page-header__login">
-            <p>Already have an account?</p>
-            <%= link_to "Log in to your account", new_user_session_path, class: "btn btn-default" %>
+          <div class="row__hero-banner">
+            <div class="col-sm-12 col-md-4 col-md-offset-1">
+              <h1 class="page-header__title"><%= t('brand') %></h1>
+              <div class="logo"><%= image_tag "FW_LG-Logo-Color@1.00x.png", alt: "Welcome to #{ t('brand') }. This is our logo." %></div>
+              <h2 class="page-header__subtitle">Plan your meals for the  week using your favorite recipes from your self-curated cookbook.</h2>
+              <h3 class="page-header__motto">We'll even build you a shopping list to take to the grocery store.</h3>
+              <div class="page-header__call-to-action"><%= link_to "Sign up to start buildling your cookbook <i class=\"glyphicon glyphicon-chevron-right \"></i>".html_safe, new_user_registration_path, class: "btn btn-primary btn-lg" %> </div>
+              <div class="page-header__login">
+                <p>Already have an account?</p>
+                <%= link_to "Log in to your account", new_user_session_path, class: "btn btn-default" %>
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-6">
+              <div class="row row__hero-flow">
+                <div class="col-sm-12 col-md-12"><%= image_tag "ScreenGrab@1.5x.png", alt: " Step 1: Enter recipes." %><p>Add recipes.</p></div>
+                <div class="col-sm-6 col-md-6"><%= image_tag "ScreenGrab@1.5x.png", alt: "Step 2: Plan your FoodWeek." %><p>Create a foodweek.</p></div>
+                <div class="col-sm-6 col-md-6"><%= image_tag "ScreenGrab@1.5x.png", alt: "Step 3: Generate your shopping list." %><p>Go shopping.</p></div>
+              </div>
+            </div>
           </div>
         <% end %>
       </div>
