diff --git a/assets/js/components/Progress.js b/assets/js/components/Progress.js
new file mode 100644
index 0000000..8a9efff
--- /dev/null
+++ b/assets/js/components/Progress.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Progress = props => (
+  <div className="progress">
+    <div className="indeterminate"></div>
+  </div>
+)
+
+export default Progress
diff --git a/assets/js/containers/Carousel.js b/assets/js/containers/Carousel.js
new file mode 100644
index 0000000..6bbf352
--- /dev/null
+++ b/assets/js/containers/Carousel.js
@@ -0,0 +1,22 @@
+import React from 'react'
+
+class Carousel extends React.Component {
+  render () {
+    return (
+      <section className="carousel-container">
+        <div className="carousel">
+          {this.props.children}
+        </div>
+      </section>
+    )
+  }
+}
+
+const CarouselItem = props => (
+  <div className="carousel-item">{props.children}</div>
+)
+
+export default Carousel
+export {
+  CarouselItem
+}
\ No newline at end of file
diff --git a/assets/js/login.js b/assets/js/login.js
index ac8b1ca..77e79c6 100644
--- a/assets/js/login.js
+++ b/assets/js/login.js
@@ -1,11 +1,74 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-const App = () => {
-  return (
-    <div>
-      login.js
-    </div>
-  );
-};
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Progress from './components/Progress'
+import Carousel, {CarouselItem} from './containers/Carousel'
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const App = () => {
+  // I will tidy this later
+  return (
+    <div className="root-container flex-container flex-center">
+      <section className="login-window">
+        <Progress />
+        <Carousel className="modal">
+          <CarouselItem>
+            <header className="modal-header">
+              <h1>Sign in</h1>
+            </header>
+            <div className="underlined-input">
+              <input type="email" name="email" id="email-input" />
+              <div className="reacts-to">
+                <label className="input-placeholder">Email</label>
+                <div className="input-underline">
+                  <div className="input-underline-fill"></div>
+                </div>
+              </div>
+            </div>
+            <span className="carousel-input-error" id="email-error">&emsp;</span>
+            <div className="button-row">
+              <a href="signup">Create account</a>
+              <button className="btn btn-primary" id="btn-next">
+                Next
+                <link className="rippleJS" />
+              </button>
+            </div>
+            <div className="footer-row">
+              <a href="#">Sign in with your Google account</a>
+            </div>
+          </CarouselItem>
+          <CarouselItem>
+            <header className="modal-header">
+              <h1>Welcome</h1>
+              <section className="account-banner">
+                <img src="https://placehold.it/50x50" alt="user profile image" id="card-image" />
+                <div className="info-stack">
+                  <span className="name" id="card-name">firstname lastname</span>
+                  <span className="email" id="card-email">x@y.z</span>
+                </div>
+                <a href="#" id="btn-reset">Not you?</a>
+              </section>
+            </header>
+            <div className="underlined-input">
+              <input type="password" name="password" id="password-input" autoComplete="new-password" />
+              <div className="reacts-to">
+                <label className="input-placeholder">Password</label>
+                <div className="input-underline">
+                  <div className="input-underline-fill"></div>
+                </div>
+              </div>
+            </div>
+            <span className="carousel-input-error" id="password-error">&emsp;</span>
+            <div className="button-row">
+              <a href="forgot">Forgot password?</a>
+              <button className="btn btn-primary" id="btn-finish">
+                Sign in
+                <link className="rippleJS" />
+              </button>
+            </div>
+          </CarouselItem>
+        </Carousel>
+      </section>
+    </div>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/assets/styles/importer.less b/assets/styles/importer.less
deleted file mode 100644
index cfe8203..0000000
--- a/assets/styles/importer.less
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * importer.less
- *
- * By default, new Sails projects are configured to compile this file
- * from LESS to CSS.  Unlike CSS files, LESS files are not compiled and
- * included automatically unless they are imported below.
- *
- * For more information see:
- *   https://sailsjs.com/anatomy/assets/styles/importer-less
- */
-
-
-// For example:
-//
-// @import 'variables/colors.less';
-// @import 'mixins/foo.less';
-// @import 'mixins/bar.less';
-// @import 'mixins/baz.less';
-//
-// @import 'styleguide.less';
-// @import 'pages/login.less';
-// @import 'pages/signup.less';
-//
-// etc.
diff --git a/assets/styles/lib/colors.scss b/assets/styles/lib/colors.scss
new file mode 100644
index 0000000..9cb7c5f
--- /dev/null
+++ b/assets/styles/lib/colors.scss
@@ -0,0 +1,2 @@
+$text: rgba(0,0,0,.87);
+
diff --git a/assets/styles/lib/default.scss b/assets/styles/lib/default.scss
new file mode 100644
index 0000000..da45d93
--- /dev/null
+++ b/assets/styles/lib/default.scss
@@ -0,0 +1,7 @@
+html,
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
diff --git a/assets/styles/login.scss b/assets/styles/login.scss
new file mode 100644
index 0000000..d8f3ddf
--- /dev/null
+++ b/assets/styles/login.scss
@@ -0,0 +1,2 @@
+@import 'lib/default';
+@import 'lib/colors';
diff --git a/assets/templates/login.html b/assets/templates/login.html
index 356ad22..94568bd 100644
--- a/assets/templates/login.html
+++ b/assets/templates/login.html
@@ -1,8 +1,14 @@
+<% var key, item %>
+<% htmlWebpackPlugin.options.links = htmlWebpackPlugin.options.links || [] %>
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
-    <title>Sails React</title>
+    <title>RoE - Login</title>
+    <% for (item of htmlWebpackPlugin.options.links) {
+      if (typeof item === 'string' || item instanceof String) { item = { href: item, rel: 'stylesheet' } } %>
+      <link<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %> /><%
+    } %>
   </head>
   <body>
     <div id="root"></div>