diff --git a/docs/.vuepress/components/BmcAlerts.vue b/docs/.vuepress/components/BmcAlerts.vue
new file mode 100644
index 0000000..6044064
--- /dev/null
+++ b/docs/.vuepress/components/BmcAlerts.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <alert show variant="warning">This is a warning message</alert>
+        <alert show variant="danger">This is an error message</alert>
+        <alert show variant="info">This is an info message</alert>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'BmcAlerts',
+}
+</script>
\ No newline at end of file
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 680c98e..a07000e 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -44,6 +44,7 @@
             title: "Components",
             children: [
             "/guide/components/",
+            "/guide/components/alert",
             "/guide/components/button",
             "/guide/components/toast",
           ]
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
index 799cf20..72fd24d 100644
--- a/docs/.vuepress/enhanceApp.js
+++ b/docs/.vuepress/enhanceApp.js
@@ -1,19 +1,22 @@
 
-// OpenBMC Imports
 import "../../src/assets/styles/_obmc-custom.scss";
+import Alert from "../../src/components/Global/Alert";
 import BVToastMixin from "../../src/components/Mixins/BVToastMixin";
 
 // Bootstrap-vue Plugin imports
 import {
+    AlertPlugin,
     ButtonPlugin,
     ToastPlugin
   } from 'bootstrap-vue';
 
 
 export default ({ Vue }) => {
+      Vue.use(AlertPlugin);
       Vue.use(ButtonPlugin);
       Vue.use(ToastPlugin);
 
       // BMC Components and Mixins
+      Vue.component('Alert', Alert);
       Vue.mixin('BVToastMixin', BVToastMixin);
 }
\ No newline at end of file
diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md
new file mode 100644
index 0000000..768aa87
--- /dev/null
+++ b/docs/guide/components/alert.md
@@ -0,0 +1,12 @@
+# Alerts
+An alert is an inline message that contains a short description that a user cannot manually dismiss. With exception to the error message on the login page, alerts are not triggered by user action. Success and error notifications based on user actions are created using a toast component.
+
+[Learn more about Bootstrap-vue alert options](https://bootstrap-vue.js.org/docs/components/alert)
+
+<BmcAlerts />
+
+```vue
+<alert show variant="warning">This is a warning message</alert>
+<alert show variant="danger">This is an error message</alert>
+<alert show variant="info">This is an info message</alert>
+```
\ No newline at end of file
diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss
new file mode 100644
index 0000000..3f103b1
--- /dev/null
+++ b/src/assets/styles/_alerts.scss
@@ -0,0 +1,59 @@
+.alert {
+    display: flex;
+    padding: $spacer;
+    border-width: 0 0 0 3px;
+    color: $gray-800;
+    margin-bottom: $spacer;
+
+    .close {
+      font-weight: 300;
+      opacity: 1;
+    }
+
+    .alert-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-right: $spacer;
+      margin-bottom: $spacer;
+
+      @include media-breakpoint-up(sm) {
+        margin-bottom: 0;
+      }
+    }
+
+    .alert-content {
+      flex: 1 1 auto;
+    }
+
+    .alert-title {
+      margin-bottom: $spacer / 2;
+    }
+
+    .alert-msg {
+      p + p {
+        margin-bottom: $spacer;
+      }
+
+      p:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    &.alert-info {
+      border-left-color: $info;
+      background-color: $info-light;
+      fill: $info;
+    }
+
+    &.alert-danger {
+      border-left-color: $danger;
+      background-color: $danger-light;
+      fill: $danger;
+    }
+
+    &.alert-warning {
+      border-left-color: $warning;
+      background-color: $warning-light;
+      fill: $warning;
+    }
+  }
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 66cebda..2a8d896 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -39,6 +39,7 @@
 
 @import "~bootstrap-vue/src/index.scss";
 
+@import "./alerts";
 @import "./buttons";
 @import "./form-components";
 @import "./modal";
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
new file mode 100644
index 0000000..bc65b6e
--- /dev/null
+++ b/src/components/Global/Alert.vue
@@ -0,0 +1,33 @@
+<template>
+  <b-alert :show="show" :variant="variant">
+    <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon">
+      <status-icon :status="variant" />
+    </div>
+    <div class="alert-content">
+      <div class="alert-msg"><slot /></div>
+    </div>
+  </b-alert>
+</template>
+
+<script>
+import StatusIcon from '../Global/StatusIcon';
+import { BAlert } from 'bootstrap-vue';
+
+export default {
+  name: 'Alert',
+  components: {
+    BAlert: BAlert,
+    StatusIcon: StatusIcon
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    variant: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 96074ee..1114321 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -33,20 +33,20 @@
 .status-icon {
   vertical-align: text-bottom;
   &.success {
-    fill: $success;
+    fill: theme-color('success');
   }
   &.danger {
-    fill: $danger;
+    fill: theme-color('danger');
   }
   &.secondary {
-    fill: $gray-600;
+    fill: gray('600');
 
     svg {
       transform: rotate(-45deg);
     }
   }
   &.warning {
-    fill: $warning;
+    fill: theme-color('warning');
   }
 }
 </style>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 1e676ee..63247da 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -134,8 +134,7 @@
     "password": "Password",
     "username": "Username",
     "alert": {
-      "title": "Invalid username or password",
-      "action": "Try again after verifying your username and password are correct."
+      "message": "Invalid username or password"
     }
   },
   "pageOverview": {
diff --git a/src/locales/es.json b/src/locales/es.json
index 48ed774..a3e3ee0 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -16,8 +16,7 @@
     "password": "Contraseña",
     "username": "Nombre de usuario",
     "alert": {
-      "title": "Usuario o contraseña invalido.",
-      "action": "Inténtalo de nuevo."
+      "message": "Usuario o contraseña invalido"
     },
     "form": {
       "english": "Inglés",
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index da96844..c15e5f5 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -15,12 +15,11 @@
         </b-col>
         <b-col md="6">
           <b-form class="login-form" novalidate @submit.prevent="login">
-            <b-alert class="login-error" :show="authError" variant="danger">
+            <alert class="login-error" :show="authError" variant="danger">
               <p id="login-error-alert">
-                <strong>{{ $t('pageLogin.alert.title') }}</strong>
-                <span>{{ $t('pageLogin.alert.action') }}</span>
+                {{ $t('pageLogin.alert.message') }}
               </p>
-            </b-alert>
+            </alert>
             <b-form-group
               label-for="language"
               :label="$t('pageLogin.language')"
@@ -87,9 +86,11 @@
 import { required } from 'vuelidate/lib/validators';
 import VuelidateMixin from '../../components/Mixins/VuelidateMixin.js';
 import i18n from '../../i18n';
+import Alert from '../../components/Global/Alert';
 
 export default {
   name: 'Login',
+  components: { Alert },
   mixins: [VuelidateMixin],
   data() {
     return {
@@ -177,24 +178,8 @@
   margin-bottom: $spacer;
 }
 
-.login-error {
+.alert.login-error {
   margin-bottom: $spacer * 2;
-
-  p {
-    margin-bottom: 0;
-  }
-
-  strong {
-    display: block;
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: 0;
-  }
-
-  strong + span {
-    margin-top: $spacer / 2;
-    margin-bottom: 0;
-  }
 }
 
 .login-branding {