diff --git a/client/src/modules/ui/vue/components/BdSettings.vue b/client/src/modules/ui/vue/components/BdSettings.vue
index 2367a46f..6608c7e1 100644
--- a/client/src/modules/ui/vue/components/BdSettings.vue
+++ b/client/src/modules/ui/vue/components/BdSettings.vue
@@ -3,8 +3,8 @@
 <script>
     /*Imports*/
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
-    import { CoreSettings } from './bd';
-    const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings };
+    import { CoreSettings, UISettings, EmoteSettings } from './bd';
+    const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings };
 
     /*Constants*/
     const sidebarItems = [
diff --git a/client/src/modules/ui/vue/components/bd/CoreSettings.vue b/client/src/modules/ui/vue/components/bd/CoreSettings.vue
index 1a66431d..33511a7c 100644
--- a/client/src/modules/ui/vue/components/bd/CoreSettings.vue
+++ b/client/src/modules/ui/vue/components/bd/CoreSettings.vue
@@ -1,6 +1,5 @@
 <template>
     <SettingsWrapper headertext="Core Settings">
-        Hello Core Settings!
     </SettingsWrapper>
 </template>
 
diff --git a/client/src/modules/ui/vue/components/bd/EmoteSettings.vue b/client/src/modules/ui/vue/components/bd/EmoteSettings.vue
new file mode 100644
index 00000000..e5fa57fe
--- /dev/null
+++ b/client/src/modules/ui/vue/components/bd/EmoteSettings.vue
@@ -0,0 +1,14 @@
+<template>
+    <SettingsWrapper headertext="Emote Settings">
+    </SettingsWrapper>
+</template>
+
+<script>
+    /*Imports*/
+    import { SettingsWrapper } from './';
+    const components = { SettingsWrapper };
+
+    export default {
+        components
+    }
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/bd/UISettings.vue b/client/src/modules/ui/vue/components/bd/UISettings.vue
new file mode 100644
index 00000000..2ca0cf4d
--- /dev/null
+++ b/client/src/modules/ui/vue/components/bd/UISettings.vue
@@ -0,0 +1,14 @@
+<template>
+    <SettingsWrapper headertext="UI Settings">
+    </SettingsWrapper>
+</template>
+
+<script>
+    /*Imports*/
+    import { SettingsWrapper } from './';
+    const components = { SettingsWrapper };
+
+    export default {
+        components
+    }
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/bd/index.js b/client/src/modules/ui/vue/components/bd/index.js
index b966a3c2..9871e437 100644
--- a/client/src/modules/ui/vue/components/bd/index.js
+++ b/client/src/modules/ui/vue/components/bd/index.js
@@ -1,2 +1,4 @@
 export { default as SettingsWrapper } from './SettingsWrapper.vue';
-export { default as CoreSettings } from './CoreSettings.vue';
\ No newline at end of file
+export { default as CoreSettings } from './CoreSettings.vue';
+export { default as UISettings } from './UISettings.vue';
+export { default as EmoteSettings } from './EmoteSettings.vue';
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/bd/templates/SettingsWrapper.html b/client/src/modules/ui/vue/components/bd/templates/SettingsWrapper.html
index f813a9e4..25cfd193 100644
--- a/client/src/modules/ui/vue/components/bd/templates/SettingsWrapper.html
+++ b/client/src/modules/ui/vue/components/bd/templates/SettingsWrapper.html
@@ -1,6 +1,8 @@
 <div class="bd-settingsWrap">
     <div class="bd-settingsWrap-header">{{headertext}}</div>
     <ScrollerWrap>
-        <div class="bd-scroller"></div>
+        <div class="bd-scroller">
+            <slot/>
+        </div>
     </ScrollerWrap>
 </div>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/templates/BdSettings.html b/client/src/modules/ui/vue/components/templates/BdSettings.html
index 532fb6af..56ee29be 100644
--- a/client/src/modules/ui/vue/components/templates/BdSettings.html
+++ b/client/src/modules/ui/vue/components/templates/BdSettings.html
@@ -11,6 +11,12 @@
             <div :class="{active: activeContent('core'), animating: animatingContent('core')}">
                 <CoreSettings />
             </div>
+            <div :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
+                <UISettings />
+            </div>
+            <div :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
+                <EmoteSettings />
+            </div>
         </ContentColumn>
 
     </SidebarView>
diff --git a/client/src/styles/partials/discordoverrides.scss b/client/src/styles/partials/discordoverrides.scss
index 54021c68..ea4012c0 100644
--- a/client/src/styles/partials/discordoverrides.scss
+++ b/client/src/styles/partials/discordoverrides.scss
@@ -5,3 +5,7 @@
 [class*="guilds-wrapper"] + [class*="flex"] {
     border-radius: 0 0 0 5px;
 }
+
+.unread-mentions-indicator-top {
+    top: 45px;
+}
diff --git a/client/src/styles/partials/sidebarview.scss b/client/src/styles/partials/sidebarview.scss
index eb6bc47d..fb19a84b 100644
--- a/client/src/styles/partials/sidebarview.scss
+++ b/client/src/styles/partials/sidebarview.scss
@@ -104,6 +104,11 @@
                 flex-direction: column;
                 flex-grow: 1;
 
+                .bd-scroller-wrap {
+                    flex-grow: 1;
+                    height: 100%;
+                }
+
                 .bd-settingsWrap-header {
                     color: $colbdblue;
                     text-transform: uppercase;
@@ -119,8 +124,12 @@
         }
     }
 
-    .bd-content > div:not(.active) {
+    .bd-content-column > div:not(.active) {
         opacity: 0;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
     }
 
     .bd-content {