diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js
new file mode 100644
index 000000000..cbd0da1a1
--- /dev/null
+++ b/mascara/src/app/first-time/breadcrumbs.js
@@ -0,0 +1,24 @@
+import React, {Component, PropTypes} from 'react'
+
+export default class Breadcrumbs extends Component {
+
+ static propTypes = {
+ total: PropTypes.number,
+ currentIndex: PropTypes.number
+ };
+
+ render() {
+ const {total, currentIndex} = this.props
+ return (
+
+ {Array(total).fill().map((_, i) => (
+
+ ))}
+
+ );
+ }
+
+}
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 1313de561..4b4cea51d 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,4 +1,5 @@
import React, {Component, PropTypes} from 'react'
+import Breadcrumbs from './breadcrumbs'
export default class CreatePasswordScreen extends Component {
@@ -32,12 +33,12 @@ export default class CreatePasswordScreen extends Component {
e.preventDefault()}
>
Import an account
-
+
)
}
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 3d4f17dbb..dbcde5004 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -25,6 +25,10 @@
margin-top: 15px;
}
+.create-password__import-link {
+ margin-bottom: 54px;
+}
+
.first-time-flow__input {
width: 350px;
font-size: 18px;
@@ -62,4 +66,20 @@ button.first-time-flow__button:hover {
color: #1B344D;
font-size: 18px;
line-height: 23px;
+}
+
+.breadcrumbs {
+ display: flex;
+ flex-flow: row nowrap;
+}
+
+.breadcrumb {
+ height: 10px;
+ width: 10px;
+ border: 1px solid #979797;
+ border-radius: 50%;
+}
+
+.breadcrumb + .breadcrumb {
+ margin-left: 10px;
}
\ No newline at end of file