diff --git a/src/components/login/login.vue b/src/components/login/login.vue
index 31d14aa..979d0fe 100644
--- a/src/components/login/login.vue
+++ b/src/components/login/login.vue
@@ -3,9 +3,20 @@
         <div class="login-vertical-center">
             <div class="login-panel">
                 <img alt="Vue logo" src="../../assets/logo.png">
+
                 <h1>Veracross Analyzer</h1>
-                <el-input v-model="username" placeholder="School Username"></el-input>
-                <el-input v-model="password" placeholder="Veracross Password" show-password=""></el-input>
+
+                <el-input v-model="username"
+                          placeholder="School Username"
+                          :class="{'input-error': error !== ''}">
+                </el-input>
+
+                <el-input v-model="password"
+                          placeholder="Veracross Password"
+                          show-password=""
+                          :class="{'input-error': error !== ''}">
+                </el-input>
+
                 <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
             </div>
         </div>