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/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue
new file mode 100644
index 0000000..2035e4d
--- /dev/null
+++ b/docs/.vuepress/components/BmcButtons.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <h3 class="h4">Enabled</h3>
+        <b-button variant="primary">Primary</b-button>
+        <b-button variant="primary">
+            <icon-add />
+            <span>Primary with icon</span>
+        </b-button>
+        <b-button variant="secondary">Secondary</b-button>
+        <b-button variant="danger">Danger</b-button>
+        <b-button variant="link">Link Button</b-button>
+        <b-button variant="link">
+            <icon-add />
+            <span>Link Button</span>
+        </b-button>
+
+        <h3 class="h4">Disabled</h3>
+        <b-button disabled variant="primary">Primary</b-button>
+        <b-button disabled variant="primary">
+            <icon-add />
+            <span>Primary with icon</span>
+        </b-button>
+        <b-button disabled variant="secondary">Secondary</b-button>
+        <b-button disabled variant="danger">Danger</b-button>
+        <b-button disabled variant="link">Link Button</b-button>
+        <b-button disabled variant="link">
+            <icon-add />
+            <span>Link Button</span>
+        </b-button>
+    </div>
+</template>
+
+<script>
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconArrowRight from '@carbon/icons-vue/es/arrow--right/16';
+export default {
+    name: 'BmcButtons',
+    components: { IconAdd, IconArrowRight }
+}
+</script>
+<style scoped>
+    button {
+        margin-bottom: 1rem;
+        margin-right: .5rem;
+    }
+
+    h3 {
+        margin: .5rem 0 1rem;
+    }
+</style>
\ No newline at end of file
diff --git a/docs/.vuepress/components/BmcToasts.vue b/docs/.vuepress/components/BmcToasts.vue
new file mode 100644
index 0000000..15a480f
--- /dev/null
+++ b/docs/.vuepress/components/BmcToasts.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <b-button variant="success" @click="makeSuccessToast()">Show Success</b-button>
+        <b-button variant="danger" @click="makeErrorToast()">Show Error</b-button>
+        <b-button variant="warning" @click="makeWarningToast()">Show Warning</b-button>
+        <b-button variant="info" @click="makeInfoToast()">Show Info</b-button>
+    </div>
+</template>
+
+<script>
+import BVToastMixin from '../../../src/components/Mixins/BVToastMixin';
+export default {
+    name: 'BmcToasts',
+    mixins: [BVToastMixin],
+    methods: {
+        makeSuccessToast() {
+            this.successToast('This is a success toast and will be dismissed after 10 seconds.');
+        },
+        makeErrorToast() {
+            this.errorToast('This is an error toast and must be dismissed by the user.');
+        },
+        makeWarningToast() {
+            this.warningToast('This is a warning toast and must be dismissed by the user.');
+        },
+        makeInfoToast() {
+            this.infoToast('This is an info toast and must be dismissed by the user.');
+        },
+    }
+}
+</script>
+<style scoped>
+    button {
+        margin-right: .5rem;
+        margin-bottom: 1rem;
+    }
+</style>
\ No newline at end of file
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 5a8e601..a07000e 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -42,7 +42,12 @@
           },
           {
             title: "Components",
-            children: ["/guide/components/", "/guide/components/page-section"]
+            children: [
+            "/guide/components/",
+            "/guide/components/alert",
+            "/guide/components/button",
+            "/guide/components/toast",
+          ]
           }
         ],
         "/themes/": [""]
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
new file mode 100644
index 0000000..72fd24d
--- /dev/null
+++ b/docs/.vuepress/enhanceApp.js
@@ -0,0 +1,22 @@
+
+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/coding-standards/accessibility.md b/docs/guide/coding-standards/accessibility.md
index efbc943..e9216b3 100644
--- a/docs/guide/coding-standards/accessibility.md
+++ b/docs/guide/coding-standards/accessibility.md
@@ -1 +1,43 @@
-# Accessibility Conventions and Standards
\ No newline at end of file
+# Accessibility Conventions and Standards
+
+It is important that the OpenBMC Web UI meet accessibility guidelines established by the [World Wide Web Consortium (W3C)](https://www.w3.org/). These guidelines are known as the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/). Making the Web UI accessible to as many users as possible is the right thing to do. In many countries, it is also legally required. Organizations providing interfaces that users with permanent or temporary disabilities can not use, may lose sales or be susceptible to discriminatory lawsuits.
+
+## Accessibility Principles
+These [principles](https://www.w3.org/WAI/fundamentals/accessibility-principles/) reference a set of international standards from the [W3C Web Accessibility Intitiative (WAI)](https://www.w3.org/WAI/).
+
+- [Perceiveable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#perceivable)
+- [Operable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#operable)
+- [Understandable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#understandable)
+- [Robust](https://www.w3.org/WAI/fundamentals/accessibility-principles/#robust)
+
+## Semantic HTML
+Coding the UI using semantic markup is the most important step in creating an inclusive interface. The use of [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) can help make an interface accessible to assistive technologies. However, there are two critical rules to follow:
+
+1. Always favor semantic markup over ARIA
+2. No ARIA is better than Bad ARIA
+
+## Testing
+Assuring the Web UI meets accessibility guidelines requires a combination of automated and manual testing. Automated tests will test the application against common problems such as color contrast and ARIA use. Automated testing can be built into the CI process, integrated with code editors, and run using browser extensions.
+
+The OpenBMC Web UI developers should test their development pages using one of the tools listed in the tools section below. If using Chrome, the Lighthouse application comes bundled with the browser and also includes testing for performance and best practices. If there is an issue that is created when using a Bootstrap-Vue component, we can [create an issue in the Bootstrap-vue repo](https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose). Contributing to the Bootstrap-Vue open-source library, when possible, is strongly encouraged.
+
+## Tools
+- [Deque Axe](https://www.deque.com/axe/)
+- [Firefox Accessibility Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
+- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
+
+## Screen Readers
+- [Voiceover (Mac only)](https://webaim.org/articles/voiceover/)
+- [NVDA (Windows only)](https://webaim.org/articles/nvda/)
+- [Jaws - (Windows only)](https://webaim.org/articles/jaws/)
+
+## Resources
+- [Mozilla Developer Network - Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
+- [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/)
+- [WAI-ARIA Basics](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [WebAIM Articles](https://webaim.org/articles/)
+- [A11Y Project](https://a11yproject.com/)
+- [IBM Accessibility Research](https://www.ibm.com/able/)
+- [Inclusive Components](https://inclusive-components.design/)
+
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/docs/guide/components/button.md b/docs/guide/components/button.md
new file mode 100644
index 0000000..aeb93ed
--- /dev/null
+++ b/docs/guide/components/button.md
@@ -0,0 +1,23 @@
+# Buttons
+
+Buttons are used to perform an action. The main buttons in the application are the `primary` and `secondary` buttons. Buttons, like all Boostrap-vue components can be themed by setting the `variant` prop on the component to one of the [theme-color map keys](/guide/guidelines/colors). To create a button that looks like a link, set the variant value to `link`.
+
+[Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button)
+
+<BmcButtons />
+
+```vue
+// Enabled Buttons
+<b-button variant="primary">Primary</b-button>
+<b-button variant="primary">
+  <icon-add />
+  <span>Primary with icon</span>
+</b-button>
+<b-button variant="secondary">Secondary</b-button>
+<b-button variant="danger">Danger</b-button>
+<b-button variant="link">Link Button</b-button>
+<b-button variant="link">
+  <icon-add />
+  <span>Link Button</span>
+</b-button>
+```
\ No newline at end of file
diff --git a/docs/guide/components/toast.md b/docs/guide/components/toast.md
new file mode 100644
index 0000000..5dc2e0e
--- /dev/null
+++ b/docs/guide/components/toast.md
@@ -0,0 +1,32 @@
+# Toasts
+Use a toast message to indicate the status of a user action. For example, a user saves a form successfully, a toast message with the `success` variant is displayed.  If the user action was not successful, a toast message with the `danger` variant is displayed.
+
+There are different transitions for the toast messages. The `success` toast message will auto-hide after 10 seconds. The user must manually dismiss the `informational`, `warning`, and `error` toast messages.  The `BVToastMixin` provides a simple API that generates a toast message that meets the transition guidelines.
+
+<BmcToasts />
+
+```js{5}
+// Sample method from Reboot BMC page
+rebootBmc() {
+  this.$store
+  .dispatch('controls/rebootBmc')
+  .then(message => this.successToast(message))
+  .catch(({ message }) => this.errorToast(message));
+}
+
+// Methods used in this example
+methods: {
+  makeSuccessToast() {
+    this.successToast('This is a success toast and will be dismissed after 10 seconds.');
+  },
+  makeErrorToast() {
+    this.errorToast('This is an error toast and must be dismissed by the user.');
+  },
+  makeWarningToast() {
+    this.warningToast('This is a warning toast and must be dismissed by the user.');
+  },
+  makeInfoToast() {
+    this.infoToast('This is an info toast and must be dismissed by the user.');
+  },
+}
+```
\ 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/_buttons.scss b/src/assets/styles/_buttons.scss
index 2f961e0..b9b8073 100644
--- a/src/assets/styles/_buttons.scss
+++ b/src/assets/styles/_buttons.scss
@@ -1,8 +1,14 @@
 .btn {
   font-weight: $headings-font-weight;
-  svg {
-    vertical-align: sub;
-    margin-left: $spacer / 2;
+  padding-top: $spacer / 2;
+  padding-right: $spacer;
+  padding-bottom: $spacer / 2;
+  padding-left: $spacer;
+
+  // Buttons with SVGs and text expect
+  // text to be wrapped in a span element
+  svg + span {
+    margin-left: $spacer / 4;
   }
 }
 
@@ -17,10 +23,21 @@
 .btn-link {
   fill: $primary;
   text-decoration: none !important;
+
   &:focus {
     box-shadow: $btn-focus-box-shadow;
   }
   &:hover {
     fill: darken($primary, 15%);
   }
+}
+
+.btn:disabled {
+  color: $gray-600;
+  fill: currentColor;
+
+  &:not(.btn-link) {
+    border-color: $gray-400;
+    background-color: $gray-400;
+  }
 }
\ 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/assets/styles/_toast.scss b/src/assets/styles/_toast.scss
index 538f996..9295b17 100644
--- a/src/assets/styles/_toast.scss
+++ b/src/assets/styles/_toast.scss
@@ -4,7 +4,7 @@
 
 .toast {
   padding: $spacer/2 $spacer/2 $spacer/2 $spacer;
-  border-width: 0 0 0 5px;
+  border-width: 0 0 0 3px;
   .close {
     font-weight: 300;
     opacity: 1;
@@ -25,12 +25,20 @@
 
 .b-toast-success .toast {
   border-left-color: $success!important;
+  background-color: $success-light;
+}
+
+.b-toast-info .toast {
+  border-left-color: $info!important;
+  background-color: $info-light;
 }
 
 .b-toast-danger .toast {
   border-left-color: $danger!important;
+  background-color: $danger-light;
 }
 
 .b-toast-warning .toast {
   border-left-color: $warning!important;
+  background-color: $warning-light;
 }
\ No newline at end of file
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/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 3199cab..40fb744 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -52,6 +52,7 @@
 
   svg {
     margin-left: 0;
+    vertical-align: sub;
   }
 }
 </style>
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/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js
index 4fedc9a..538bb93 100644
--- a/src/components/Mixins/BVToastMixin.js
+++ b/src/components/Mixins/BVToastMixin.js
@@ -28,6 +28,15 @@
         isStatus: true,
         solid: true
       });
+    },
+    infoToast(message, title = i18n.t('global.status.informational')) {
+      this.$root.$bvToast.toast(message, {
+        title,
+        variant: 'info',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
     }
   }
 };
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 0bf4051..63247da 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -28,7 +28,8 @@
       "off": "Off",
       "on": "On",
       "success": "Success",
-      "warning": "Warning"
+      "warning": "Warning",
+      "informational": "Informational"
     }
   },
   "appHeader": {
@@ -133,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/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
index 975f258..d64c730 100644
--- a/src/store/modules/Authentication/AuthenticanStore.js
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -17,8 +17,8 @@
       state.authError = false;
       state.cookie = Cookies.get('XSRF-TOKEN');
     },
-    authError(state) {
-      state.authError = true;
+    authError(state, authError = true) {
+      state.authError = authError;
     },
     logout() {
       Cookies.remove('XSRF-TOKEN');
@@ -26,6 +26,7 @@
   },
   actions: {
     login({ commit }, auth) {
+      commit('authError', false);
       return api
         .post('/login', { data: auth })
         .then(() => commit('authSuccess'))
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 2018720..c15e5f5 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -15,50 +15,53 @@
         </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>
-            <div class="login-form__section">
-              <label for="language">{{ $t('pageLogin.language') }}</label>
+            </alert>
+            <b-form-group
+              label-for="language"
+              :label="$t('pageLogin.language')"
+            >
               <b-form-select
                 id="language"
                 v-model="$i18n.locale"
                 :options="languages"
               ></b-form-select>
-            </div>
-            <div class="login-form__section">
-              <label for="username">{{ $t('pageLogin.username') }}</label>
+            </b-form-group>
+            <b-form-group
+              label-for="username"
+              :label="$t('pageLogin.username')"
+            >
               <b-form-input
                 id="username"
                 v-model="userInfo.username"
-                :aria-describedby="authError ? 'login-error-alert' : ''"
+                aria-describedby="login-error-alert username-required"
                 :state="getValidationState($v.userInfo.username)"
                 type="text"
                 autofocus="autofocus"
                 @input="$v.userInfo.username.$touch()"
               >
               </b-form-input>
-              <b-form-invalid-feedback role="alert">
+              <b-form-invalid-feedback id="username-required" role="alert">
                 <template v-if="!$v.userInfo.username.required">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
               </b-form-invalid-feedback>
-            </div>
+            </b-form-group>
             <div class="login-form__section">
               <label for="password">{{ $t('pageLogin.password') }}</label>
               <b-form-input
                 id="password"
                 v-model="userInfo.password"
-                :aria-describedby="authError ? 'login-error-alert' : ''"
+                aria-describedby="login-error-alert password-required"
                 :state="getValidationState($v.userInfo.password)"
                 type="password"
                 @input="$v.userInfo.password.$touch()"
               >
               </b-form-input>
-              <b-form-invalid-feedback role="alert">
+              <b-form-invalid-feedback id="password-required" role="alert">
                 <template v-if="!$v.userInfo.password.required">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
@@ -83,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 {
@@ -173,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 {
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 962d9a3..156667b 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -107,8 +107,8 @@
     serverManufacturer: state => state.overview.serverManufacturer,
     serverSerialNumber: state => state.overview.serverSerialNumber,
     hostName: state => state.global.hostName,
-    hostActiveVersion: state => state.firmware.hostActiveVersion,
-    bmcActiveVersion: state => state.firmware.bmcActiveVersion,
+    hostFirmwareVersion: state => state.firmware.hostFirmwareVersion,
+    bmcFirmwareVersion: state => state.firmware.bmcFirmwareVersion,
     powerCapValue: state => state.powerControl.powerCapValue,
     powerConsumptionValue: state => state.powerControl.powerConsumptionValue
   }),
@@ -119,7 +119,8 @@
     getOverviewInfo() {
       this.$store.dispatch('overview/getServerInfo');
       this.$store.dispatch('global/getHostName');
-      this.$store.dispatch('firmware/getFirmwareInfo');
+      this.$store.dispatch('firmware/getBmcFirmware');
+      this.$store.dispatch('firmware/getHostFirmware');
       this.$store.dispatch('powerControl/getPowerControl');
     }
   }