diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss
index 27d1c4eb..710643ab 100644
--- a/styles/components/_global_layout.scss
+++ b/styles/components/_global_layout.scss
@@ -23,7 +23,6 @@ body {
 
   .global-panel-container {
     margin: $gap;
-    max-width: $site-max-width;
     flex-grow: 1;
     -ms-flex-negative: 1;
 
diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss
index 14057ac1..abaa3591 100644
--- a/styles/components/_sticky_cta.scss
+++ b/styles/components/_sticky_cta.scss
@@ -1,4 +1,6 @@
 .sticky-cta {
+  z-index: 100;
+
   @include media($small-screen) {
     margin-left: -$gap * 4;
   }
diff --git a/styles/elements/_typography.scss b/styles/elements/_typography.scss
index 6d413a39..f45197b6 100644
--- a/styles/elements/_typography.scss
+++ b/styles/elements/_typography.scss
@@ -12,8 +12,6 @@
 p {
   margin: 0 0 ($gap * 2) 0;
 
-  @include line-max;
-
   &.centered {
     margin-left: auto;
     margin-right: auto;
diff --git a/styles/sections/_home.scss b/styles/sections/_home.scss
index 8bf639d1..e7b023af 100644
--- a/styles/sections/_home.scss
+++ b/styles/sections/_home.scss
@@ -1,3 +1,54 @@
+.home {
+  .sticky-cta {
+    margin: -1.6rem -1.6rem 0 -1.6rem;
+  }
+}
+
+.about-cloud {
+  margin-top: 4rem;
+  margin-left: 2rem;
+
+  max-width: 900px;
+}
+
+.your-project {
+  margin-top: 3rem;
+  padding: 3rem;
+  background-color: $color-gray-lightest;
+
+  h2 {
+    margin-top: 0;
+  }
+
+  hr {
+    border: 0;
+    border-bottom: 1px solid $color-gray-light;
+    margin-top: $gap * 4;
+    margin-bottom: $gap * 4;
+  }
+
+  .links {
+    justify-content: normal;
+
+    .icon-link:first-child {
+      padding-left: 0;
+    }
+
+    .icon-link:hover {
+      background-color: transparent;
+      color: $color-gray-dark;
+
+      .svg * {
+        fill: $color-gray-dark;
+      }
+    }
+
+    .icon-link.active:hover {
+      color: $color-blue;
+    }
+  }
+}
+
 .home-layout {
   display: block;
   background-color: $color-white;
diff --git a/templates/base.html b/templates/base.html
index 89f56b4a..c06a05fb 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -21,9 +21,9 @@
     {% include 'navigation/topbar.html' %}
 
     <div class='global-layout'>
-      {% block global_sidenav %}
+      {% if portfolios %}
         {% include 'navigation/global_sidenav.html' %}
-      {% endblock %}
+      {% endif %}
 
       <div class='global-panel-container'>
         {% block sidenav %}{% endblock %}
diff --git a/templates/home.html b/templates/home.html
index d757dee6..f5b569da 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,13 +1,106 @@
 {% extends "base.html" %}
 
+{% from "components/sticky_cta.html" import StickyCTA %}
+{% from "components/icon.html" import Icon %}
+
 {% block content %}
 
-<main class="usa-section usa-content">
+<main class="home">
 
-  <a href="{{ url_for("portfolios.new_portfolio") }}" class="usa-button-primary">
-    {{ "home.add_portfolio_button_text" | translate }}
-  </a>
+  {% if portfolios %}
+     {% set sticky_header = "home.new_portfolio" | translate  %}
+  {% else %}
+     {% set sticky_header = "home.get_started" | translate  %}
+  {% endif %}
 
+  {% call StickyCTA(sticky_header) %}
+      <a href="{{ url_for("portfolios.new_portfolio") }}" class="usa-button-primary">
+        {{ "home.add_portfolio_button_text" | translate }}
+      </a>
+  {% endcall %}
+
+  <div class="about-cloud">
+    <h1>{{ "home.head" | translate }}</h1>
+
+    <semi-collapsible-text inline-template>
+      <div>
+        <p v-bind:class="{ 'semi-collapsed' : !open }">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <a v-on:click='toggle' v-show="!open" class="right more">More{{ Icon('caret_down') }}</a>
+        <a v-on:click='toggle' v-show="open" class="right more">Less{{ Icon('caret_up') }}</a>
+      </div>
+    </semi-collapsible-text>
+
+    <div class="your-project">
+      <h2 class="h3">{{ "home.your_project" | translate }}</h2>
+      <p>{{ "home.your_project_descrip" | translate }}</p>
+
+      <hr>
+
+      {% macro Link(icon, text, section, default=False) %}
+      {% if default %}
+        <div v-bind:class='{"icon-link": true, active: selectedSection === "{{ section }}" || selectedSection === null}' v-on:click="toggleSection('{{ section }}')">
+      {% else %}
+        <div v-bind:class='{"icon-link": true, active: selectedSection === "{{ section }}"}' v-on:click="toggleSection('{{ section }}')">
+      {% endif %}
+          <div class="col">
+            <div class='icon-link--icon'>{{ Icon(icon) }}</div>
+            <div class='icon-link--name'>{{ text }}</div>
+          </div>
+        </div>
+      {% endmacro %}
+
+      <toggler inline-template v-bind:initial-selected-section="'funding'">
+        <div>
+          <div class="portfolio-header">
+            <div class="links row">
+              {{ Link(
+              icon='funding',
+              section='funding',
+              text='navigation.portfolio_navigation.breadcrumbs.funding' | translate,
+              default=True
+              ) }}
+              {{ Link(
+              icon='applications',
+              section='applications',
+              text='navigation.portfolio_navigation.breadcrumbs.applications' | translate,
+              ) }}
+              {{ Link(
+              icon='chart-pie',
+              section='reports',
+              text='navigation.portfolio_navigation.breadcrumbs.reports' | translate,
+              ) }}
+              {{ Link(
+              icon='cog',
+              section='admin',
+              text='navigation.portfolio_navigation.breadcrumbs.admin' | translate,
+              ) }}
+            </div>
+          </div>
+          {% macro Description(section, default=False) %}
+          {% if default %}
+            <p v-show="selectedSection === '{{ section }}' || selectedSection === null">
+          {% else %}
+            <p v-show="selectedSection === '{{ section }}'">
+          {% endif %}
+              <strong>
+                {{ "navigation.portfolio_navigation.breadcrumbs.%s" | format(section) | translate }}
+              </strong>
+              {{ "home.%s_descrip" | format(section) | translate }}
+            </p>
+          {% endmacro %}
+          <div class="project-section-descriptions">
+            {{ Description('funding', default=True) }}
+            {{ Description('applications') }}
+            {{ Description('reports') }}
+            {{ Description('admin') }}
+          </div>
+        </div>
+      </toggler>
+
+    </div>
+  </div>
 </main>
 
 {% endblock %}
diff --git a/translations.yaml b/translations.yaml
index 27a7b7ac..548d54a5 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -19,6 +19,15 @@ base_public:
   title_tag: JEDI Cloud
 home:
   add_portfolio_button_text: Add New Portfolio
+  new_portfolio: New Portfolio
+  get_started: Get Started
+  head: About Cloud Services
+  your_project: Your Project
+  your_project_descrip: Your portfolio is where all task orders pertaining to a specific project or set of related projects live. In JEDI, every task order in your portfolio has four components.
+  funding_descrip: is information about all approved task orders associated to your portfolio.
+  applications_descrip: ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+  reports_descrip: enim ad minim veniam, quis nostrud exercitation ullamco
+  admin_descrip: aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
 common:
   back: Back
   cancel: Cancel