diff --git a/client/src/index.js b/client/src/index.js
index dc397565..69a2bba0 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -8,12 +8,18 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { DOM } from './ui';
+import { DOM, BdUI } from './ui';
 import BdCss from './styles/index.scss';
+import { Events } from './modules';
 
 class BetterDiscord {
     constructor() {
         DOM.injectStyle(BdCss, 'bdmain');
+        Events.on('global-ready', this.globalReady.bind(this));
+    }
+
+    globalReady() {
+        BdUI.injectUi();
     }
 }
 
diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js
new file mode 100644
index 00000000..2b653680
--- /dev/null
+++ b/client/src/ui/bdui.js
@@ -0,0 +1,26 @@
+/**
+ * BetterDiscord Client UI Module
+ * Copyright (c) 2015-present JsSucks - https://github.com/JsSucks
+ * All rights reserved.
+ * https://github.com/JsSucks - https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+import Dom from './dom';
+import Vue from 'vue';
+import { BdSettingsWrapper } from './components';
+
+export default class {
+    static injectUi() {
+
+        Dom.createElement('div', null, 'bd-settings').appendTo(Dom.bdBody);
+
+        const vueInstance = new Vue({
+            el: '#bd-settings',
+            components: { BdSettingsWrapper },
+            template: '<BdSettingsWrapper/>'
+        });
+    }
+}
\ No newline at end of file
diff --git a/client/src/ui/components/BdSettingsWrapper.vue b/client/src/ui/components/BdSettingsWrapper.vue
new file mode 100644
index 00000000..94597892
--- /dev/null
+++ b/client/src/ui/components/BdSettingsWrapper.vue
@@ -0,0 +1,6 @@
+<template>
+    <div>Hi!</div>
+</template>
+<script>
+    export default {}
+</script>
\ No newline at end of file
diff --git a/client/src/ui/components/index.js b/client/src/ui/components/index.js
new file mode 100644
index 00000000..c6eb6488
--- /dev/null
+++ b/client/src/ui/components/index.js
@@ -0,0 +1 @@
+export { default as BdSettingsWrapper } from './BdSettingsWrapper.vue';
\ No newline at end of file
diff --git a/client/src/ui/dom.js b/client/src/ui/dom.js
index ea1e923f..0a8034b1 100644
--- a/client/src/ui/dom.js
+++ b/client/src/ui/dom.js
@@ -9,9 +9,10 @@
 */
 
 class BdNode {
-    constructor(tag, className) {
+    constructor(tag, className, id) {
         this.element = document.createElement(tag);
         if (className) this.element.className = className;
+        if (id) this.element.id = id;
     }
 
     appendTo(e) {
@@ -54,8 +55,8 @@ class DOM {
         return document.querySelector(e);
     }
 
-    static createElement(tag = 'div', className = null) {
-        return new BdNode(tag, className);
+    static createElement(tag = 'div', className = null, id = null) {
+        return new BdNode(tag, className, id);
     }
 
     static deleteStyle(id) {
diff --git a/client/src/ui/index.js b/client/src/ui/index.js
index c7ba0cfa..71e97f96 100644
--- a/client/src/ui/index.js
+++ b/client/src/ui/index.js
@@ -1 +1,2 @@
-export { default as DOM } from './dom';
\ No newline at end of file
+export { default as DOM } from './dom';
+export { default as BdUI } from './bdui';
\ No newline at end of file