diff --git a/src/webextension/images/intro-step-1.png b/src/webextension/images/intro-step-1.png
new file mode 100644
index 00000000..7654052b
Binary files /dev/null and b/src/webextension/images/intro-step-1.png differ
diff --git a/src/webextension/images/intro-step-2.png b/src/webextension/images/intro-step-2.png
new file mode 100644
index 00000000..d2f84829
Binary files /dev/null and b/src/webextension/images/intro-step-2.png differ
diff --git a/src/webextension/images/intro-step-3.png b/src/webextension/images/intro-step-3.png
new file mode 100644
index 00000000..48d45e18
Binary files /dev/null and b/src/webextension/images/intro-step-3.png differ
diff --git a/src/webextension/list/manage/components/intro-page.css b/src/webextension/list/manage/components/intro-page.css
new file mode 100644
index 00000000..1d7eb66a
--- /dev/null
+++ b/src/webextension/list/manage/components/intro-page.css
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.intro-images {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto auto auto;
+  grid-column-gap: 4em;
+  margin: 4em auto;
+  padding: 0 4em;
+  max-width: 800px;
+}
+
+.intro-image {
+  display: contents;
+  text-align: center;
+}
+
+.intro-image > h1,
+.intro-image > p {
+  overflow: hidden;
+}
+
+.intro-image > img {
+  width: 100%;
+  border: 1px solid rgba(12, 12, 13, 0.3);
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(12, 12, 13, 0.3);
+}
+
+.intro-image > h1 {
+  font-size: 17px;
+  margin-bottom: 0;
+}
+
+.intro-image > p {
+  font-size: 15px;
+}
diff --git a/src/webextension/list/manage/components/intro-page.js b/src/webextension/list/manage/components/intro-page.js
new file mode 100644
index 00000000..0d45f04e
--- /dev/null
+++ b/src/webextension/list/manage/components/intro-page.js
@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
+import React from "react";
+
+import AccountDetails from "../containers/account-details";
+
+import styles from "./intro-page.css";
+
+function IntroImage({src, title, children}) {
+  return (
+    <div className={styles.introImage}>
+      <img src={src} alt=""/>
+      <h1>{title}</h1>
+      <p>{children}</p>
+    </div>
+  );
+}
+
+IntroImage.propTypes = {
+  src: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
+export default function IntroPage() {
+  return (
+    <article className={styles.introPage}>
+      <section className={styles.introImages}>
+        <Localized id="intro-page-step-1">
+          <IntroImage src={browser.extension.getURL("/images/intro-step-1.png")}
+                      title="aDd lOGIn iNFo to lOCKBOx">
+            sAVe uSERNAMe aNd pASSWORd...
+          </IntroImage>
+        </Localized>
+        <Localized id="intro-page-step-2">
+          <IntroImage src={browser.extension.getURL("/images/intro-step-2.png")}
+                      title="go sTRAIGHt to yOUr lOGINs">
+            cLICk tHe lOCKBOx iCOn...
+          </IntroImage>
+        </Localized>
+        <Localized id="intro-page-step-3">
+          <IntroImage src={browser.extension.getURL("/images/intro-step-3.png")}
+                      title="sIGn in fROm lOCKBOx">
+            cOPy an eNTRY&apos;s iNFo...
+          </IntroImage>
+        </Localized>
+      </section>
+      <AccountDetails/>
+    </article>
+  );
+}
diff --git a/src/webextension/list/manage/containers/current-selection.js b/src/webextension/list/manage/containers/current-selection.js
index eed34df2..3c765e9a 100644
--- a/src/webextension/list/manage/containers/current-selection.js
+++ b/src/webextension/list/manage/containers/current-selection.js
@@ -14,6 +14,7 @@ import {
 import EditItemDetails from "../components/edit-item-details";
 import ItemDetails from "../components/item-details";
 import Homepage from "../components/homepage";
+import IntroPage from "../components/intro-page";
 
 const ConnectedEditItemDetails = connect(
   (state, ownProps) => ({
@@ -51,7 +52,7 @@ const ConnectedItemDetails = connect(
   })
 )(ItemDetails);
 
-function CurrentSelection({editing, item, hideHome}) {
+function CurrentSelection({editing, item, hideHome, numItems}) {
   let inner;
   if (editing) {
     inner = <ConnectedEditItemDetails item={item}/>;
@@ -60,8 +61,10 @@ function CurrentSelection({editing, item, hideHome}) {
   } else if (hideHome) {
     // Don't show anything since we're still loading the item details.
     inner = null;
-  } else {
+  } else if (numItems !== 0) {
     inner = <Homepage/>;
+  } else {
+    inner = <IntroPage/>;
   }
   return <div>{inner}</div>;
 }
@@ -70,6 +73,7 @@ CurrentSelection.propTypes = {
   editing: PropTypes.bool.isRequired,
   item: PropTypes.object,
   hideHome: PropTypes.bool.isRequired,
+  numItems: PropTypes.number.isRequired,
 };
 
 export default connect(
@@ -77,5 +81,6 @@ export default connect(
     editing: state.editor.editing,
     hideHome: state.editor.hideHome,
     item: state.cache.currentItem,
+    numItems: state.cache.items.length,
   })
 )(CurrentSelection);
diff --git a/src/webextension/locales/en-US/list.ftl b/src/webextension/locales/en-US/list.ftl
index c975ab28..1985d40a 100644
--- a/src/webextension/locales/en-US/list.ftl
+++ b/src/webextension/locales/en-US/list.ftl
@@ -45,6 +45,21 @@ all-items-empty =
 
 all-items-filtered = No results
 
+intro-page-step-1 =
+  Save username and password info to create a { product-title } entry.
+
+  .title = Add Login Info to { product-title }
+
+intro-page-step-2 =
+  Click the { product-title } icon to see all the entries you've saved.
+
+  .title = Go Straight to Your Logins
+
+intro-page-step-3 =
+  Copy an entry's info to sign in right from Firefox.
+
+  .title = Sign in From { product-title }
+
 homepage-title = { product-tagline }
 
 homepage-linkaccount-title = Add Serious Security & Convenience
diff --git a/test/integration/pages/home.py b/test/integration/pages/home.py
index 4d3c93cd..49e3858f 100644
--- a/test/integration/pages/home.py
+++ b/test/integration/pages/home.py
@@ -11,11 +11,10 @@
 class Home(Base):
     """Contain the locators and actions relating to the home page."""
 
+    _modal_portal_locator = (By.CLASS_NAME, 'ReactModalPortal')
     _entries_locator = (By.CSS_SELECTOR,
                         'ul li div.{}'.format(
                             munged_class_name('item-summary')))
-    _homepage_section_locator = (By.CSS_SELECTOR, '.{} h1'.format(
-                                 munged_class_name('homepage')))
     _delete_entry_locator = (By.CSS_SELECTOR,
                              'article div menu '
                              'button.{}'.format(munged_class_name('normal')))
@@ -42,7 +41,7 @@ def door_hanger(self):
     def wait_for_page_to_load(self):
         """Wait for page to load."""
         self.wait.until(
-            lambda s: s.find_element(*self._homepage_section_locator))
+            lambda s: s.find_element(*self._modal_portal_locator))
         return self
 
     @property