diff --git a/app/assets/css/styles.css b/app/assets/css/styles.css
index 10a79e54..a0869f6a 100644
--- a/app/assets/css/styles.css
+++ b/app/assets/css/styles.css
@@ -33,6 +33,20 @@ html {
     background-size: cover;
 }
 
+button {
+    background-color: #a02d2a;
+    color: #ffffff;
+    border: none;
+    padding: 7px 10px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 14px;
+}
+
+button:hover {
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+}
+
 /*******************************************************************************
  *                                                                             *
  * Header                                                                      *
@@ -151,6 +165,52 @@ html {
     width: 30%;
 }
 
+#welcome_text {
+    font-family: 'ringbearer';
+    font-size: 16px;
+    display: block;
+    text-align: center;
+    padding-top: 10px;
+}
+
+#login_container {
+    display: inline-flex;
+    width: 100%;
+}
+
+#login_image {
+    height: 85px;
+    width: auto;
+    display: block;
+    border: 3px solid #000000;
+}
+
+#login_container_right input,
+#login_container_right label {
+    display: flex;
+    width: 100%;
+}
+
+#login_container_left {
+    padding: 10px 0 10px 10px;
+}
+
+#login_container_right {
+    padding: 10px;
+    width: 100%;
+}
+
+.login_field {
+    font-size: 12px;
+    font-family: 'Segoe UI';
+    font-weight: 500;
+}
+
+#button_login {
+    float: right;
+    margin-right: 10px;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Right Body Container                                                        *
diff --git a/app/index.html b/app/index.html
index e0b44407..d4023d20 100644
--- a/app/index.html
+++ b/app/index.html
@@ -38,7 +38,21 @@
 
     <div id="main_content">
         <div id="left_pane">
-
+            <span id="welcome_text">Welcome to WesterosCraft!</span>
+            <div id="login_container">
+                <div id="login_container_left">
+                    <img src="https://minotar.net/avatar/TheAventine.png" id="login_image" />
+                </div>
+                <div id="login_container_right">
+                    <label class="login_field">Username</label>
+                    <input type="text" name="username"></input>
+                    <label class="login_field">Password</label>
+                    <input type="password" name="password"></input>
+                </div>
+            </div>
+            <div id="login_button_dock">
+                <button id="button_login">Login</button>
+            </div>
         </div>
         <div id="right_pane">
             <div class="toggle-btn-grp">