diff --git a/src/assets/imgs/background.png b/src/assets/imgs/background.png
new file mode 100644
index 00000000..2b6bc525
Binary files /dev/null and b/src/assets/imgs/background.png differ
diff --git a/src/pages/login/login.html b/src/pages/login/login.html
index 5fbf94dd..e9be6313 100644
--- a/src/pages/login/login.html
+++ b/src/pages/login/login.html
@@ -5,15 +5,80 @@
   Ionic pages and navigation.
 -->
 <ion-header>
-  <ion-navbar>
-    <button ion-button menuToggle>
-      <ion-icon name="menu"></ion-icon>
-    </button>
-    <ion-title>Login</ion-title>
-  </ion-navbar>
 </ion-header>
 
+<ion-content>
 
-<ion-content padding>
+  <div id="header">
+    <h1 id="title">INTRANSITION</h1>
+  </div>
 
-</ion-content>
+  <ion-grid fixed>
+
+    <br> 
+
+    <ion-row>
+      <ion-col col-1></ion-col>
+      <ion-col>
+        <h2 text-center>Transitioning from the military to civilian environment is more than just a job change.</h2>
+        <br>
+        <h2 id="lifechange" text-center>It's a life change.</h2>
+      </ion-col>
+      <ion-col col-1></ion-col>
+    </ion-row>
+
+    <br>
+
+    <ion-row>
+      <ion-col col-1></ion-col>
+      <ion-col>
+        <ion-label class="labels" style="font-size: 25px" stacked>EMAIL ADDRESS</ion-label>
+        <ion-input class="inputs" type="email"></ion-input>
+        <ion-icon class="icons" name="person"></ion-icon>
+      </ion-col>
+      <ion-col col-1></ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col col-1></ion-col>
+      <ion-col>
+        <ion-label class="labels" style="font-size: 25px" stacked>PASSWORD</ion-label>
+        <ion-input class="inputs" type="password"></ion-input>
+        <ion-icon class="icons" name="lock"></ion-icon>
+      </ion-col>
+      <ion-col col-1></ion-col>
+    </ion-row>
+
+    <br>
+    <br>
+
+    <ion-row>
+      <ion-col col-2></ion-col>
+      <ion-col>
+        <button id="loginbutton" ion-button block>LOGIN</button>
+      </ion-col>
+      <ion-col col-2></ion-col>
+    </ion-row>
+
+    <br>
+    <br>
+
+    <ion-row>
+      <ion-col col-1></ion-col>
+      <ion-col>
+        <h3 text-center>If you don't have an account yet, you can register now.</h3>
+      </ion-col>
+      <ion-col col-1></ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col col-2></ion-col>
+      <ion-col>
+        <button id="signupbutton" ion-button block>SIGN UP</button>
+      </ion-col>
+      <ion-col col-2></ion-col>
+    </ion-row>
+
+  </ion-grid>
+
+</ion-content>
\ No newline at end of file
diff --git a/src/pages/login/login.scss b/src/pages/login/login.scss
index 2b94c14b..650be043 100644
--- a/src/pages/login/login.scss
+++ b/src/pages/login/login.scss
@@ -1,3 +1,57 @@
 page-login {
+    
+    #header {
+        display: flex;
+        padding: 65px;
+        justify-content: center; 
+        align-items: center; 
+
+        background-position: 0px -250px; 
+        background-size: 100% 500%; 
+        background-image: url('../assets/imgs/background.png');
+    }
+
+    #title {
+        letter-spacing: 3px; 
+        font-weight: bold; 
+        font-family: proxima-nova; 
+        font-size: 70px; 
+        color: white;
+    }
+
+    #lifechange {
+        font-weight: bold;
+    }
+
+    .labels {
+        color: rgb(96,96,96); 
+        font-size: 25px;
+    }
+    
+    .inputs {
+        border: 1px solid rgb(229, 230, 230);
+        background-color: rgb(248, 248, 248); 
+        padding-left: 60px; 
+        font-size: 25px
+    }
+
+    .icons {
+        color: rgb(130,180,64); 
+        font-size: 35px; 
+        position: absolute; 
+        top: 60px; 
+        left: 20px
+    }
+
+    #loginbutton {
+        background-color: rgb(130,180,64); 
+        font-size: 25px
+    }
+
+    #signupbutton {
+        background-color: rgb(42,61,79); 
+        font-size: 25px
+    }
 
 }
+