diff --git a/client/src/components/Intro/Intro.test.js b/client/src/components/Intro/Intro.test.js
index 1a5c9636de..2961eeeb0a 100644
--- a/client/src/components/Intro/Intro.test.js
+++ b/client/src/components/Intro/Intro.test.js
@@ -1,21 +1,28 @@
 /* global expect */
 import React from 'react';
 import renderer from 'react-test-renderer';
-// import ShallowRenderer from 'react-test-renderer/shallow';
+import { Provider } from 'react-redux';
+import { createStore } from '../../redux/createStore';
 
 import 'jest-dom/extend-expect';
 
 import Intro from './';
 
+function rendererCreateWithRedux(ui) {
+  return renderer.create(<Provider store={createStore()}>{ui}</Provider>);
+}
+
 describe('<Intro />', () => {
   it('has no blockquotes when loggedOut', () => {
-    const container = renderer.create(<Intro {...loggedOutProps} />).root;
+    const container = rendererCreateWithRedux(<Intro {...loggedOutProps} />)
+      .root;
     expect(container.findAllByType('blockquote').length === 0).toBeTruthy();
     expect(container.findAllByType('h1').length === 1).toBeTruthy();
   });
 
   it('has a blockquote when loggedIn', () => {
-    const container = renderer.create(<Intro {...loggedInProps} />).root;
+    const container = rendererCreateWithRedux(<Intro {...loggedInProps} />)
+      .root;
     expect(container.findAllByType('blockquote').length === 1).toBeTruthy();
     expect(container.findAllByType('h1').length === 1).toBeTruthy();
   });
diff --git a/client/src/components/Intro/index.js b/client/src/components/Intro/index.js
index d559c5f2d5..9b5cf80c3f 100644
--- a/client/src/components/Intro/index.js
+++ b/client/src/components/Intro/index.js
@@ -2,18 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
 import { Row, Col } from '@freecodecamp/react-bootstrap';
-import { apiLocation, forumLocation } from '../../../config/env.json';
+import { forumLocation } from '../../../config/env.json';
 import { randomQuote } from '../../utils/get-words';
 import CurrentChallengeLink from '../helpers/CurrentChallengeLink';
 
 import './intro.css';
+import Login from '../Header/components/Login';
 
 const propTypes = {
   complete: PropTypes.bool,
   completedChallengeCount: PropTypes.number,
   isSignedIn: PropTypes.bool,
   name: PropTypes.string,
-  navigate: PropTypes.func,
   pending: PropTypes.bool,
   slug: PropTypes.string,
   username: PropTypes.string
@@ -23,7 +23,6 @@ function Intro({
   isSignedIn,
   username,
   name,
-  navigate,
   pending,
   complete,
   completedChallengeCount,
@@ -163,14 +162,9 @@ function Intro({
           </Col>
 
           <Col sm={8} smOffset={2} xs={12}>
-            <button
-              className={'btn-cta-big signup-btn btn-cta center-block'}
-              onClick={() => {
-                navigate(`${apiLocation}/signin`);
-              }}
-            >
+            <Login block={true}>
               Sign in to save your progress (it's free)
-            </button>
+            </Login>
           </Col>
         </Row>
         <Spacer />