diff --git a/docs/.vuepress/components/BmcToasts.vue b/docs/.vuepress/components/BmcToasts.vue
index 4c9d30f..6f90d1f 100644
--- a/docs/.vuepress/components/BmcToasts.vue
+++ b/docs/.vuepress/components/BmcToasts.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import BVToastMixin from '@/src/components/Mixins/BVToastMixin';
+import BVToastMixin from './app-imports/BVToastMixin';
 export default {
     name: 'BmcToasts',
     mixins: [BVToastMixin],
diff --git a/docs/.vuepress/components/app-imports/BVToastMixin.js b/docs/.vuepress/components/app-imports/BVToastMixin.js
new file mode 100644
index 0000000..1007565
--- /dev/null
+++ b/docs/.vuepress/components/app-imports/BVToastMixin.js
@@ -0,0 +1,58 @@
+import StatusIcon from './StatusIcon';
+const BVToastMixin = {
+  components: {
+    StatusIcon
+  },
+  methods: {
+    toastTitle(title, status) {
+      // Create title with icon
+      const titleWithIcon = this.$createElement(
+        'strong',
+        { class: 'toast-icon' },
+        [
+          this.$createElement('StatusIcon', { props: { status: status } }),
+          title
+        ]
+      );
+      return titleWithIcon;
+    },
+    successToast(message, title = 'Success') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'success'),
+        variant: 'success',
+        autoHideDelay: 10000, //auto hide in milliseconds
+        isStatus: true,
+        solid: true
+      });
+    },
+    errorToast(message, title = 'Error') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'danger'),
+        variant: 'danger',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
+    },
+    warningToast(message, title = 'Warning') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'warning'),
+        variant: 'warning',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
+    },
+    infoToast(message, title = 'Informational') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'info'),
+        variant: 'info',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
+    }
+  }
+};
+
+export default BVToastMixin;
diff --git a/docs/.vuepress/components/app-imports/StatusIcon.vue b/docs/.vuepress/components/app-imports/StatusIcon.vue
new file mode 100644
index 0000000..954e477
--- /dev/null
+++ b/docs/.vuepress/components/app-imports/StatusIcon.vue
@@ -0,0 +1,61 @@
+<template>
+  <span :class="['status-icon', status]">
+    <icon-info v-if="status === 'info'" />
+    <icon-success v-else-if="status === 'success'" />
+    <icon-warning v-else-if="status === 'warning'" />
+    <icon-danger v-else-if="status === 'danger'" />
+    <icon-secondary v-else />
+  </span>
+</template>
+
+<script>
+import IconInfo from '@carbon/icons-vue/es/information--filled/20';
+import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
+import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
+import IconError from '@carbon/icons-vue/es/error--filled/20';
+import IconMisuse from '@carbon/icons-vue/es/misuse/20';
+
+export default {
+  name: 'StatusIcon',
+  components: {
+    IconInfo: IconInfo,
+    iconSuccess: IconCheckmark,
+    iconDanger: IconMisuse,
+    iconSecondary: IconError,
+    iconWarning: IconWarning
+  },
+  props: {
+    status: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "src/assets/styles/bmc/helpers";
+@import "src/assets/styles/bootstrap/helpers";
+.status-icon {
+  vertical-align: text-bottom;
+  &.info {
+    fill: theme-color('info');
+  }
+  &.success {
+    fill: theme-color('success');
+  }
+  &.danger {
+    fill: theme-color('danger');
+  }
+  &.secondary {
+    fill: gray('600');
+
+    svg {
+      transform: rotate(-45deg);
+    }
+  }
+  &.warning {
+    fill: theme-color('warning');
+  }
+}
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index dd112e6..8b7be97 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
     base: "/webui-vue/",
     title: "OpenBMC Web UI Style Guide",
@@ -53,5 +55,12 @@
         ],
         "/themes/": ["", "customize"]
       },
+    },
+    configureWebpack: {
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '../../src')
+        }
+      }
     }
   };
\ No newline at end of file
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
index 9a3b2b6..c0f3dfb 100644
--- a/docs/.vuepress/enhanceApp.js
+++ b/docs/.vuepress/enhanceApp.js
@@ -1,7 +1,6 @@
 
 import "./styles/_index.scss";
 import Alert from "../../src/components/Global/Alert";
-import BVToastMixin from "../../src/components/Mixins/BVToastMixin";
 
 // Bootstrap-vue Plugin imports
 import {
@@ -18,5 +17,4 @@
 
       // BMC Components and Mixins
       Vue.component('Alert', Alert);
-      Vue.mixin('BVToastMixin', BVToastMixin);
 }
\ No newline at end of file