diff --git a/public/images/bg.jpg b/public/images/bg.jpg
new file mode 100644
index 00000000..f0d2e47f
Binary files /dev/null and b/public/images/bg.jpg differ
diff --git a/public/images/favicon.png b/public/images/favicon.png
index 77cd79e0..5cc12813 100644
Binary files a/public/images/favicon.png and b/public/images/favicon.png differ
diff --git a/public/images/loader.gif b/public/images/loader.gif
new file mode 100644
index 00000000..6d888790
Binary files /dev/null and b/public/images/loader.gif differ
diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js
index a5366676..955f14ae 100644
--- a/src/components/LoginPage.js
+++ b/src/components/LoginPage.js
@@ -4,8 +4,12 @@ import { connect } from 'react-redux'
 import { startLogin } from '../actions/auth'
 
 export const LoginPage = ({ startLogin }) => (
-  <div>
-    <button onClick={startLogin}>Login</button>
+  <div className="box-layout">
+  <div className="box-layout__box">
+    <h1 className="box-layout__title">Expensify</h1>
+    <p>It's time to get your expenses under control.</p>
+    <button className="button" onClick={startLogin}>Login with Google</button>
+  </div>
   </div>
 )
 
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 2c56f096..64eea40f 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -3,8 +3,18 @@ html {
 }
 
 body {
+  color: $dark-grey;
   font-family: Helvetica, Arial, sans-serif;
   font-size: $m-size;
+  line-height: 1.6;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: default;
 }
 
 .is-active {
diff --git a/src/styles/base/_settings.scss b/src/styles/base/_settings.scss
index e7e73750..b6afa7c7 100644
--- a/src/styles/base/_settings.scss
+++ b/src/styles/base/_settings.scss
@@ -1,5 +1,12 @@
 //Colors
 $dark-blue: #333745;
+$dark-grey: #333333;
+$blue: #1c88bf;
+
+// Font Size
+$font-size-large: 1.8rem;
 
 //Spacing
-$m-size: 1.6rem;
\ No newline at end of file
+$s-size: 1.2rem;
+$m-size: 1.6rem;
+$l-size: 3.2rem;
\ No newline at end of file
diff --git a/src/styles/components/_box-layout.scss b/src/styles/components/_box-layout.scss
new file mode 100644
index 00000000..f08cf1b9
--- /dev/null
+++ b/src/styles/components/_box-layout.scss
@@ -0,0 +1,22 @@
+.box-layout {
+  align-items: center;
+  background: url('/images/bg.jpg');
+  background-size: cover;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  width: 100vw;
+}
+
+.box-layout__box {
+  background: fade-out(white, .15);
+  border-radius: 3px;
+  padding: $l-size $m-size;
+  text-align: center;
+  width: 25rem;
+}
+
+.box-layout__title {
+  margin: 0 0 $m-size 0;
+  line-height: 1;
+}
\ No newline at end of file
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
new file mode 100644
index 00000000..a5779118
--- /dev/null
+++ b/src/styles/components/_button.scss
@@ -0,0 +1,8 @@
+.button {
+  background: $blue;
+  border: none;
+  color: white;
+  font-size: $font-size-large;
+  font-weight: 300;
+  padding: $s-size;
+}
\ No newline at end of file
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 18905c7a..1ed95603 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,3 +1,5 @@
 @import '/base/normalize';
 @import '/base/settings';
-@import '/base/base';
\ No newline at end of file
+@import '/base/base';
+@import './components/box-layout';
+@import './components/button';
\ No newline at end of file
diff --git a/src/tests/components/__snapshots__/LoginPage.test.js.snap b/src/tests/components/__snapshots__/LoginPage.test.js.snap
index f1735c3e..84fa6e2a 100644
--- a/src/tests/components/__snapshots__/LoginPage.test.js.snap
+++ b/src/tests/components/__snapshots__/LoginPage.test.js.snap
@@ -1,11 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LoginPage #Snapshots Should render LoginPage correctly 1`] = `
-<div>
-  <button
-    onClick={[Function]}
+<div
+  className="box-layout"
+>
+  <div
+    className="box-layout__box"
   >
-    Login
-  </button>
+    <h1
+      className="box-layout__title"
+    >
+      Expensify
+    </h1>
+    <p>
+      It's time to get your expenses under control.
+    </p>
+    <button
+      className="button"
+      onClick={[Function]}
+    >
+      Login with Google
+    </button>
+  </div>
 </div>
 `;