diff --git a/embark-ui/src/components/LoginLayout.css b/embark-ui/src/components/LoginLayout.css
new file mode 100644
index 00000000..21cac28d
--- /dev/null
+++ b/embark-ui/src/components/LoginLayout.css
@@ -0,0 +1,54 @@
+.login-layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-layout-container {
+  width: 80%;
+  max-width: 900px;
+  display: flex;
+  flex-direction: column;
+}
+
+.login-layout-container-section {
+  flex: 1;
+  padding: 0.8em;
+  background: #20a8d8;
+  align-items: center;
+  justify-content: center;
+  order: 1;
+}
+
+.login-layout-container-section:first-child {
+  background: white;
+  padding: 3em;
+  order: 2;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto;
+  max-height: 40px;
+}
+
+@media only screen and (min-width: 700px) {
+
+  .login-layout-container {
+    flex-direction: row;
+  }
+
+  .login-layout-container-section {
+    padding: 3em;
+  }
+
+  .login-layout-container-section:first-child {
+    order: 1;
+  }
+
+  .logo {
+    max-height: 180px;
+    margin-top: 3em;
+  }
+}
+
diff --git a/embark-ui/src/components/LoginLayout.js b/embark-ui/src/components/LoginLayout.js
new file mode 100644
index 00000000..e336abb7
--- /dev/null
+++ b/embark-ui/src/components/LoginLayout.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import logo from '../images/logo.png';
+import './LoginLayout.css';
+
+const LoginLayout = ({children}) => (
+  <div className="app login-layout">
+    <div className="login-layout-container">
+      <div className="login-layout-container-section">
+        {children}
+      </div>
+      <div className="login-layout-container-section">
+        <img src={logo} className="logo" alt="Embark Logo"/>
+      </div>
+    </div>
+  </div>
+);
+
+export default LoginLayout;