diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index 338476e3..5f7cbfbb 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -306,7 +306,7 @@ export default class PluginApi {
     }
 
 
-	/**
+    /**
      * Toasts
      */
     showToast(message, options = {}) {
@@ -324,6 +324,15 @@ export default class PluginApi {
     showWarningToast(message, options = {}) {
         return Toasts.warning(message, options);
     }
+    get Toasts() {
+        return {
+            push: this.showToast.bind(this),
+            success: this.showSuccessToast.bind(this),
+            error: this.showErrorToast.bind(this),
+            info: this.showInfoToast.bind(this),
+            warning: this.showWarningToast.bind(this)
+        };
+    }
 
 
     /**
diff --git a/client/src/modules/settings.js b/client/src/modules/settings.js
index 95fc055e..403df8cc 100644
--- a/client/src/modules/settings.js
+++ b/client/src/modules/settings.js
@@ -29,7 +29,7 @@ export default new class Settings {
                 Logger.log('Settings', [`${set.id}/${category.id}/${setting.id} was changed from`, old_value, 'to', value]);
                 Events.emit('setting-updated', event);
                 Events.emit(`setting-updated-${set.id}_${category.id}_${setting.id}`, event);
-				Toasts.success(`${set.id}/${category.id}/${setting.id} was changed from ${old_value} to ${value}`); // Just for debugging purposes remove in prod
+                Toasts.success(`${set.id}/${category.id}/${setting.id} was changed from ${old_value} to ${value}`); // Just for debugging purposes remove in prod
             });
 
             set.on('settings-updated', async event => {
diff --git a/client/src/styles/partials/toasts.scss b/client/src/styles/partials/toasts.scss
index 99391ad6..0281240b 100644
--- a/client/src/styles/partials/toasts.scss
+++ b/client/src/styles/partials/toasts.scss
@@ -1,5 +1,5 @@
-bd-toasts {
-	display: flex;
+.bd-toasts {
+    display: flex;
     position: fixed;
     top: 0;
     width: 700px;
@@ -11,45 +11,44 @@ bd-toasts {
     justify-content: flex-end;
     pointer-events: none;
     z-index: 4000;
-    
+
     .bd-toast {
         position: relative;
         animation: bd-toast-up 300ms ease;
-		background: #36393F;
-		padding: 10px;
-		border-radius: 5px;
-		box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2);
-		font-weight: 500;
-		color: #fff;
-		user-select: text;
-		font-size: 14px;
-		margin-top: 10px;
+        background: #36393F;
+        padding: 10px;
+        border-radius: 5px;
+        box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2);
+        font-weight: 500;
+        color: #fff;
+        user-select: text;
+        font-size: 14px;
+        margin-top: 10px;
 
-        
         &.bd-toast-error {
             background: #f04747;
         }
-        
+
         &.bd-toast-info {
             background: #4a90e2;
         }
-        
+
         &.bd-toast-warning {
             background: #FFA600;
         }
-        
+
         &.bd-toast-success {
             background: #43b581;
         }
-        
+
         &.bd-toast-has-icon {
             padding-left: 30px;
         }
     }
-    
+
     .bd-toast-icon {
         position: absolute;
-    	left: 5px;
+        left: 5px;
         top: 50%;
         transform: translateY(-50%);
         bottom: 0;
@@ -57,13 +56,13 @@ bd-toasts {
         width: 20px;
         border-radius: 50%;
         overflow: hidden;
-        
+
         svg {
             fill: white;
         }
     }
-    
+
     .bd-toast.bd-toast-closing {
-		animation: bd-toast-down 300ms ease;
-	}
-}
\ No newline at end of file
+        animation: bd-toast-down 300ms ease;
+    }
+}
diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js
index 6f6df97d..4cf25833 100644
--- a/client/src/ui/bdui.js
+++ b/client/src/ui/bdui.js
@@ -43,13 +43,13 @@ export default class {
     static injectUi() {
         DOM.createElement('div', null, 'bd-settings').appendTo(DOM.bdBody);
         DOM.createElement('div', null, 'bd-modals').appendTo(DOM.bdModals);
+        DOM.createElement('div', null, 'bd-toasts').appendTo(DOM.bdToasts);
         DOM.createElement('bd-tooltips').appendTo(DOM.bdBody);
-        DOM.createElement('bd-toasts').appendTo(DOM.bdBody);
 
-        const toasts = new Vue({
-            el: 'bd-toasts',
+        this.toasts = new Vue({
+            el: '#bd-toasts',
             components: { BdToasts },
-            template: '<BdToasts/>'
+            template: '<BdToasts />'
         });
 
         this.modals = new Vue({
diff --git a/client/src/ui/components/BdToasts.vue b/client/src/ui/components/BdToasts.vue
index 29e65c42..e66e4ba7 100644
--- a/client/src/ui/components/BdToasts.vue
+++ b/client/src/ui/components/BdToasts.vue
@@ -1,5 +1,5 @@
 /**
- * BetterDiscord Modals Component
+ * BetterDiscord Toasts Component
  * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
  * All rights reserved.
  * https://betterdiscord.net
@@ -9,9 +9,9 @@
 */
 
 <template>
-    <bd-toasts>
+    <div class="bd-toasts">
         <Toast v-for="(toast, index) in toasts" :message="toast.message" :type="toast.type" :icon="toast.icon" :closing="toast.closing" :key="`${toast.id}`"></Toast>
-    </bd-toasts>
+    </div>
 </template>
 <script>
     // Imports
diff --git a/client/src/ui/components/common/Toast.vue b/client/src/ui/components/common/Toast.vue
index 97abf0f8..5c877d5a 100644
--- a/client/src/ui/components/common/Toast.vue
+++ b/client/src/ui/components/common/Toast.vue
@@ -1,5 +1,5 @@
 /**
- * BetterDiscord Modal Component
+ * BetterDiscord Toast Component
  * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
  * All rights reserved.
  * https://betterdiscord.net
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div :class="['bd-toast', {'bd-toast-has-icon': type != 'basic' || icon}, 'bd-toast-' + type, {'bd-toast-closing': closing}]">
+    <div :class="['bd-toast', 'bd-toast-' + type, {'bd-toast-has-icon': type != 'basic' || icon, 'bd-toast-closing': closing}]">
         <div class="bd-toast-icon" v-if="type != 'basic' || icon">
             <img v-if="icon" :src="icon" width="20" height="20" />
             <MiSuccess v-else-if="type == 'success'" size="20" />
@@ -32,7 +32,7 @@
             message: String,
             icon: String,
             type: {
-                default: "basic",
+                default: 'basic',
                 validator: function (value) {
                     return ['success', 'warning', 'error', 'info', 'basic'].indexOf(value) !== -1
                 }
diff --git a/client/src/ui/toasts.js b/client/src/ui/toasts.js
index 9145c663..19b825e7 100644
--- a/client/src/ui/toasts.js
+++ b/client/src/ui/toasts.js
@@ -1,5 +1,5 @@
 /**
- * BetterDiscord Modals
+ * BetterDiscord Toasts
  * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
  * All rights reserved.
  * https://betterdiscord.net
@@ -12,7 +12,7 @@ export default class Toasts {
 
     /**
      * This shows a popup message at the bottom of the screen similar to Android Toasts. This is useful for small user feedback.
-     * 
+     *
      * @param {string} message The message to be displayed in the toast
      * @param {Object} options Options object. Optional parameter.
      * @param {string} options.type Changes the type of the toast stylistically and semantically. Choices: "basic", "info", "success", "error", "warning". Default: "basic"
@@ -21,7 +21,7 @@ export default class Toasts {
      * @returns {Promise} This promise resolves when the toast is removed from the DOM.
      */
     static async push(message, options = {}) {
-        const {type = "basic", icon, timeout = 3000} = options;
+        const {type = 'basic', icon, timeout = 3000} = options;
         const toast = {id: Math.random(), message, type, icon, closing: false};
         this.stack.push(toast);
         await new Promise(resolve => setTimeout(resolve, timeout));
@@ -34,7 +34,7 @@ export default class Toasts {
      * This is a shortcut for `type = "success"` in {@link Toasts#push}. The parameters and options are the same.
      */
     static async success(message, options = {}) {
-        options.type = "success";
+        options.type = 'success';
         return this.push(message, options);
     }
 
@@ -42,7 +42,7 @@ export default class Toasts {
      * This is a shortcut for `type = "error"` in {@link Toasts#push}. The parameters and options are the same.
      */
     static async error(message, options = {}) {
-        options.type = "error";
+        options.type = 'error';
         return this.push(message, options);
     }
 
@@ -50,7 +50,7 @@ export default class Toasts {
      * This is a shortcut for `type = "info"` in {@link Toasts#push}. The parameters and options are the same.
      */
     static async info(message, options = {}) {
-        options.type = "info";
+        options.type = 'info';
         return this.push(message, options);
     }
 
@@ -58,7 +58,7 @@ export default class Toasts {
      * This is a shortcut for `type = "warning"` in {@link Toasts#push}. The parameters and options are the same.
      */
     static async warning(message, options = {}) {
-        options.type = "warning";
+        options.type = 'warning';
         return this.push(message, options);
     }