diff --git a/cypress/integration/router.spec.js b/cypress/integration/router.spec.js
index 216bad7..f677016 100644
--- a/cypress/integration/router.spec.js
+++ b/cypress/integration/router.spec.js
@@ -5,6 +5,7 @@ describe('App Router', () => {
     cy.visit(ROUTES.LANDING);
     cy.get('section');
   });
+
   it('contains SignUp page', () => {
     cy.visit(ROUTES.SIGN_UP);
     cy.get('section');
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index d1f0028..79925e5 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -4,3 +4,4 @@
  */
 export const LANDING: string = '/';
 export const SIGN_UP: string = '/signup';
+export const SIGN_IN: string = '/signin';
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
new file mode 100644
index 0000000..5a64452
--- /dev/null
+++ b/src/pages/SignIn.tsx
@@ -0,0 +1,26 @@
+import React, {FC} from 'react';
+
+const SignUp: FC = () => (
+  <section className="container">
+    <div className="alert alert-danger">Invalid credentials</div>
+    <h1 className="large text-primary">Sign In</h1>
+    <p className="lead">
+      <i className="fa fa-user"></i> Sign into your account
+    </p>
+    <form action="dashboard.html" className="form">
+      <div className="form-group">
+        <input type="email" placeholder="Email Address" />
+      </div>
+      <div className="form-group">
+        <input type="password" placeholder="Password" minLength={6} />
+      </div>
+
+      <input type="submit" value="Login" className="btn btn-primary" />
+    </form>
+    <p className="my-1">
+      Don't have an account? <a href="register.html">Sign in</a>
+    </p>
+  </section>
+);
+
+export default SignUp;
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 3a05994..8d80d67 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -1,10 +1,12 @@
 import React, {FC} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faUser} from '@fortawesome/free-solid-svg-icons';
 
 const SignUp: FC = () => (
   <section className="container">
     <h1 className="large text-primary">Sign Up</h1>
     <p className="lead">
-      <i className="fa fa-user"></i> Create your account
+      <FontAwesomeIcon icon={faUser} /> Create your account
     </p>
     <form action="dashboard.html" className="form">
       <div className="form-group">
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index 3d68093..8112531 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -2,11 +2,14 @@ import React, {FC} from 'react';
 import {Switch, Route} from 'react-router-dom';
 import Landing from '../pages/Landing';
 import SignUp from '../pages/SignUp';
+import SignIn from '../pages/SignIn';
+import * as ROUTES from '../constants/routes';
 
 const Router: FC = () => (
   <Switch>
-    <Route exact path={'/'} component={Landing} />
-    <Route exact path={'/signup'} component={SignUp} />
+    <Route exact path={ROUTES.LANDING} component={Landing} />
+    <Route exact path={ROUTES.SIGN_UP} component={SignUp} />
+    <Route exact path={ROUTES.SIGN_IN} component={SignIn} />
   </Switch>
 );