diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index c22d0f1..7171fa2 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="toast" :class="color && ('border-' + color)" role="alert" ref="toast" data-autohide="false">
-        <div class="toast-header">
+        <div class="toast-header" :class="[color && ('bg-' + color), color && 'text-light']">
             <strong class="mr-auto pr-3">{{ title }}</strong>
             <small>{{ displayTime }}</small>
             <button type="button" class="ml-2 mb-1 close" @click="close()">
diff --git a/src/store/index.js b/src/store/index.js
index 13afdd2..648bf7d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -22,13 +22,17 @@ axios.interceptors.response.use(response => response, error => {
   if (error.isAxiosError) {
     const message = `
       <h3>A HTTP ${error.config.method} request failed.</h3>
-      <p>url: ${error.config.url}</p>
-      <p>timeout: ${!!error.request.timeout}</p>
-      <p>response-body: ${error.response && error.response.body}</p>
+      <p>
+          url: ${error.config.url}
+          <br>
+          timeout: ${!!error.request.timeout}
+          <br>
+          response-body: ${error.response && error.response.body}
+      </p>
     `;
-    store.commit('createToast', {title: 'HTTP Error', message, color: 'danger'});
+    store.commit('createToast', {title: 'Error: HTTP', message, color: 'danger'});
   } else {
-    store.commit('createToast', {title: 'Unknown Error', message: error.toString(), color: 'danger'});
+    store.commit('createToast', {title: 'Error: Unknown', message: error.toString(), color: 'danger'});
   }
   return Promise.reject(error);
 });