diff --git a/src/components/ProfilePictureTemplate.vue b/src/components/ProfilePictureTemplate.vue
index b148e44..2ba4812 100644
--- a/src/components/ProfilePictureTemplate.vue
+++ b/src/components/ProfilePictureTemplate.vue
@@ -1,20 +1,30 @@
 <template>
-  <div :class="`profile-picture ${adminType ? adminType.name : ''}`" :style="`padding: ${$props.animationPadding || '3px'}`">
-    <img v-if="adminType" class="emote" :src="adminType.emotePath" :style="`width: ${$props.emoteSize || '20px'}; height: ${$props.emoteSize ||'20px'}`">
+  <div class="outer-profile-picture">
     <div
-      :class="`inner-profile-picture ${$props.hover ? 'hoverable' : ''}`"
-      :style="`height: ${$props.size}; width: ${$props.size}; background-image: url(${$props.url})`"
-    ></div>
+      :class="`profile-picture ${adminType ? adminType.name : ''}`"
+      :style="`padding: ${$props.animationPadding || '3px'}`"
+    >
+      <img
+        v-if="adminType"
+        class="emote"
+        :src="adminType.emotePath"
+        :style="`width: ${$props.emoteSize || '20px'}; height: ${$props.emoteSize ||'20px'}`"
+      >
+      <div
+        :class="`inner-profile-picture ${$props.hover ? 'hoverable' : ''}`"
+        :style="`height: ${$props.size}; width: ${$props.size}; background-image: url(${$props.url})`"
+      ></div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["url", "size","emoteSize", "admin", "hover", 'animationPadding'],
+  props: ["url", "size", "emoteSize", "admin", "hover", "animationPadding"],
   data() {
     return {
       crown: require("twemoji/2/svg/1f451.svg"),
-      flower: require("twemoji/2/svg/1f33a.svg"),
+      flower: require("twemoji/2/svg/1f33a.svg")
     };
   },
   computed: {
@@ -36,6 +46,10 @@ export default {
 
 
 <style scoped>
+.outer-profile-picture{
+  z-index: 9999;
+  user-select: none;
+}
 .profile-picture {
   position: relative;
   border-radius: 50%;
@@ -49,8 +63,11 @@ export default {
   background-repeat: no-repeat;
   display: flex;
   transition: 0.2s;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: translateZ(0) scale(1, 1);
+  transform: translateZ(0);
 }
-.hoverable:hover{
+.hoverable:hover {
   filter: brightness(80%);
 }
 .creator {
diff --git a/src/components/app/EmojiPanels/emojiPanel.vue b/src/components/app/EmojiPanels/emojiPanel.vue
index 874d3c0..d244528 100644
--- a/src/components/app/EmojiPanels/emojiPanel.vue
+++ b/src/components/app/EmojiPanels/emojiPanel.vue
@@ -351,11 +351,9 @@ export default {
       const customEmoji = emojiParser.getCustomEmojisByShortCode(shortCode)
       return (customEmoji ? this.customEmojiPath + customEmoji.emojiID : undefined)
     },
-    closePanel() {
-      this.$store.dispatch("setPopoutVisibility", {
-        name: "emojiPanel",
-        visibility: false
-      });
+    closePanel(event) {
+      if (!event.target.closest('.emojis-button'))
+        this.$emit('close')
     },
     emojiByGroup(index) {
       index = parseInt(index);
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index d76138d..02c94f1 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -42,7 +42,7 @@
     <div class="chat-input-area" v-if="selectedChannelID">
       <div style="position: relative;">
         <emoji-suggestions v-if="emojiArray" :emojiArray="emojiArray"/>
-        <emoji-panel v-if="emojiPanelShow"/>
+        <emoji-panel v-if="showEmojiPanel" @close="showEmojiPanel = false"/>
       </div>
 
       <div class="message-area">
@@ -62,10 +62,7 @@
           v-model="message"
           @paste="onPaste"
         ></textarea>
-        <button
-          class="emojis-button"
-          @click="$store.dispatch('setPopoutVisibility', {name: 'emojiPanel', visibility: true})"
-        >
+        <button class="emojis-button" @click="showEmojiPanel = !showEmojiPanel">
           <i class="material-icons">face</i>
         </button>
         <button
@@ -103,7 +100,7 @@ import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue"
 import emojiParser from "@/utils/emojiParser.js";
 import statuses from "@/utils/statuses";
 
-const emojiPanel = () => import( '@/components/app/EmojiPanels/emojiPanel.vue' );
+const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue");
 
 export default {
   components: {
@@ -121,7 +118,8 @@ export default {
       postTimerID: null,
       getTimerID: null,
       typing: false,
-      whosTyping: ""
+      whosTyping: "",
+      showEmojiPanel: false
     };
   },
   methods: {
@@ -300,7 +298,13 @@ export default {
     enterEmojiPanel(shortcode) {
       const target = this.$refs["input-box"];
       target.focus();
-      document.execCommand("insertText", false, `:${shortcode}: `);
+
+      if (document.queryCommandSupported("insertText")) {
+        document.execCommand("insertText", false, `:${shortcode}: `);
+      } else {
+        document.execCommand("paste", false, `:${shortcode}: `);
+      }
+      target.blur();
       this.$store.dispatch("settingsModule/addRecentEmoji", shortcode);
     },
     keyDown(event) {
@@ -442,25 +446,24 @@ export default {
     emojiArray() {
       return this.$store.getters.emojiArray;
     },
-    emojiPanelShow() {
-      return this.$store.getters.popouts.emojiPanel;
-    },
     emojiIndex() {
       return this.$store.getters.getEmojiIndex;
     },
     userStatusColor() {
-
       const selectedChannel = this.$store.getters.selectedChannelID;
       const channel = this.$store.getters.channels[selectedChannel];
 
       let status = 0;
       if (!channel) {
         status = 0;
-      }else if (this.$store.getters.user.friends[channel.recipients[0].uniqueID]) {
-        status =  this.$store.getters.user.friends[channel.recipients[0].uniqueID].recipient.status || 0
+      } else if (
+        this.$store.getters.user.friends[channel.recipients[0].uniqueID]
+      ) {
+        status =
+          this.$store.getters.user.friends[channel.recipients[0].uniqueID]
+            .recipient.status || 0;
       }
-      return statuses[status].color
-
+      return statuses[status].color;
 
       // const allFriends = this.$store.getters.user.friends;
       // const selectedChannel = this.$store.getters.selectedChannelID;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 18ae4b5..7f32208 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -1,8 +1,6 @@
 <template>
   <div :class="{message: true,  ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} ">
-    <div class="outer-profile-picture">
-      <profile-picture :admin="$props.admin" :url="userAvatar" size="50px" :hover="true" @click.native="openUserInformation"/>
-    </div>
+    <profile-picture class="avatar" :admin="$props.admin" :url="userAvatar" size="50px" :hover="true" @click.native="openUserInformation"/>
     <div class="triangle">
       <div class="triangle-inner"></div>
     </div>
@@ -129,7 +127,7 @@ export default {
   border-left: 7px solid rgba(184, 184, 184, 0.219);
   border-right: none !important;
 }
-.ownMessageLeft .profile-picture { 
+.ownMessageLeft .avatar { 
     margin-right: 0px;
     margin-left: 5px;
 }
@@ -140,9 +138,6 @@ export default {
 
 
 
-.outer-profile-picture{
-  z-index:9999;
-}
 .message {
   margin: 10px;
   margin-top: 10px;
@@ -207,7 +202,7 @@ export default {
   }
 }
 
-.profile-picture {
+.avatar {
   margin: auto;
   margin-left: 0;
   margin-right: 5px;
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index 71606ee..a0bad37 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -54,7 +54,8 @@ export default {
     openUserInformation() {
       this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
     },
-    closeMenus() {
+    closeMenus(event) {
+      if (event.target.closest('.status')) return;
       this.status.isPoppedOut = false;
     },
     openSurvey() {
diff --git a/src/components/app/Popouts/Popouts.vue b/src/components/app/Popouts/Popouts.vue
index 9b36292..f54747b 100644
--- a/src/components/app/Popouts/Popouts.vue
+++ b/src/components/app/Popouts/Popouts.vue
@@ -8,6 +8,7 @@
       <drag-drop-file-upload-dialog key="ddfud" v-if="showUploadDrapDrop"/>
       <user-information-popout key="uip" v-if="popouts.userInformationPopoutID"/>
       <take-survey-popout key="tsp" v-if="popouts.surveyPopout"/>
+      <AddServer key="as" v-if="false"/>
     </transition-group>
   </div>
 </template>
@@ -16,6 +17,7 @@
 
 //popouts
   const userInformationPopout = () => import('./Popouts/userInformationPopout.vue');
+  const AddServer = () => import('./Popouts/AddServer.vue');
   const Settings = () => import('./Popouts/Settings.vue');
   const TakeSurveyPopout = () => import('./Popouts/TakeSurveyPopout.vue');
   const uploadDialog = () => import('./Popouts/uploadDialog.vue');
@@ -33,7 +35,8 @@ export default {
     userInformationPopout,
     DragDropFileUploadDialog,
     imageLargePreview,
-    TakeSurveyPopout
+    TakeSurveyPopout,
+    AddServer
   },
   data() {
     return {
diff --git a/src/components/app/Popouts/Popouts/AddServer.vue b/src/components/app/Popouts/Popouts/AddServer.vue
new file mode 100644
index 0000000..9b01ddf
--- /dev/null
+++ b/src/components/app/Popouts/Popouts/AddServer.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="dark-background" @click="backgroundClick">
+    <div class="inner">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+import { bus } from "@/main";
+import settingsService from "@/services/settingsService";
+
+export default {
+  methods: {
+    closeMenu() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "GDLinkMenu",
+        visibility: false
+      });
+    },
+    backgroundClick(e) {
+      if (e.target.classList.contains("dark-background")) {
+        this.closeMenu();
+      }
+    },
+  }
+};
+</script>
+
+
+<style scoped>
+.dark-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.781);
+  z-index: 111111;
+  display: flex;
+}
+.inner {
+  margin: auto;
+  height: 400px;
+  width: 400px;
+  background: rgb(32, 32, 32);
+  display: flex;
+  flex-direction: column;
+  color: white;
+  border-radius: 3px;
+}
+
+</style>
+
diff --git a/src/components/app/Popouts/Popouts/Settings.vue b/src/components/app/Popouts/Popouts/Settings.vue
index 6edf0d0..ddd48ac 100644
--- a/src/components/app/Popouts/Popouts/Settings.vue
+++ b/src/components/app/Popouts/Popouts/Settings.vue
@@ -2,7 +2,6 @@
   <div class="settings-darken-background">
     <div class="settings-box">
       <div class="tabs">
-
         <div
           v-for="(tab, index) in tabs"
           :key="index"
@@ -12,7 +11,6 @@
           <div class="material-icons">{{tab.icon}}</div>
           <div class="tab-name">{{tab.name}}</div>
         </div>
-
       </div>
       <div class="panel">
         <div class="title">
@@ -31,11 +29,9 @@
 <script>
 import { bus } from "@/main";
 
-
-const MyProfile = () => import( './SettingsPanels/MyProfile.vue' );
-const ManageEmojis = () => import( './SettingsPanels/ManageEmojis.vue' );
-const MessageDesign = () => import( './SettingsPanels/MessageDesign.vue' );
-  
+const MyProfile = () => import("./SettingsPanels/MyProfile.vue");
+const ManageEmojis = () => import("./SettingsPanels/ManageEmojis.vue");
+const MessageDesign = () => import("./SettingsPanels/MessageDesign.vue");
 
 export default {
   components: {
@@ -95,8 +91,10 @@ export default {
 .settings-box {
   height: 600px;
   display: flex;
+
   margin: auto;
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);
+  border-radius: 10px;
+  overflow: hidden;
 }
 .tabs {
   background: rgba(24, 24, 24, 0.938);
@@ -105,6 +103,7 @@ export default {
   min-width: 150px;
   overflow-y: auto;
   overflow-x: hidden;
+  flex-shrink: 0;
 }
 .panel {
   display: flex;
@@ -168,6 +167,27 @@ export default {
   font-size: 30px;
 }
 
+/* ------- SCROLL BAR -------*/
+/* width */
+.tabs::-webkit-scrollbar {
+  height: 3px;
+}
+
+/* Track */
+.tabs::-webkit-scrollbar-track {
+  background: #8080806b;
+}
+
+/* Handle */
+.tabs::-webkit-scrollbar-thumb {
+  background: #f5f5f559;
+}
+
+/* Handle on hover */
+.tabs::-webkit-scrollbar-thumb:hover {
+  background: #f5f5f59e;
+}
+
 @media (max-width: 815px) {
   .settings-box {
     width: 100%;
@@ -178,5 +198,24 @@ export default {
     height: 100%;
   }
 }
+@media (max-width: 550px) {
+  .settings-box {
+    flex-direction: column;
+  }
+  .tabs {
+    height: 50px;
+    width: 100%;
+    display: flex;
+    overflow: hidden;
+    overflow-x: auto;
+    flex-shrink: 0;
+  }
+  .tab {
+    flex-shrink: 0;
+  }
+  .panel {
+    width: 100%;
+  }
+}
 </style>
 
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue b/src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue
index f2bfb05..3c1b104 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue
@@ -2,8 +2,12 @@
   <div class="drop-down">
     <div class="main-name">{{name}}</div>
     <div class="box" @click="opened = !opened">
-      <div class="selected" >
-        <div class="emoji" v-if="selected !== null && updateItems[selected]" v-html="updateItems[selected].emoji || ''"></div>
+      <div class="selected">
+        <div
+          class="emoji"
+          v-if="selected !== null && updateItems[selected]"
+          v-html="updateItems[selected].emoji || ''"
+        ></div>
         {{selected === null ? 'Select One' : updateItems[selected].name}}
       </div>
       <i class="material-icons">expand_more</i>
@@ -26,7 +30,7 @@
 
 <script>
 import emojiParser from "@/utils/emojiParser.js";
-import { constants } from 'crypto';
+import { constants } from "crypto";
 export default {
   model: {
     prop: "itemSelected",
@@ -48,26 +52,26 @@ export default {
   },
   watch: {
     updateItems() {
-			this.selected = null;
+      this.selected = null;
     },
-    itemSelected(){
+    itemSelected() {
       this.selected = this.itemSelected;
     }
   },
   computed: {
     updateItems() {
-			this.$emit("change", null);
+      this.$emit("change", null);
       let newArr = [];
       for (let index = 0; index < this.items.length; index++) {
-				let element = this.items[index];
-				if (element.emoji) {
-					if (element.emoji.startsWith("<img")) return this.items
-					element.emoji = emojiParser.replaceEmojis(element.emoji);
-					newArr.push(element);
-				} else {
-					element.emoji = ""
-					newArr.push(element);
-				}
+        let element = this.items[index];
+        if (element.emoji) {
+          if (element.emoji.startsWith("<img")) return this.items;
+          element.emoji = emojiParser.replaceEmojis(element.emoji);
+          newArr.push(element);
+        } else {
+          element.emoji = "";
+          newArr.push(element);
+        }
       }
       return newArr;
     }
@@ -150,4 +154,4 @@ export default {
   width: 20px !important;
 }
 </style>
- 
+ 
\ No newline at end of file
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
index a5e2f64..e2dc91a 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="my-profile-panel">
     <div class="general-information">
-      <div class="profile-picture-outer">
-        <profile-picture
-          :url="avatar"
-          :admin="user.admin"
-          size="100px"
-          emoteSize="30px"
-          animationPadding="5px"
-        />
-      </div>
+      <profile-picture
+        class="avatar"
+        :url="avatar"
+        :admin="user.admin"
+        size="100px"
+        emoteSize="30px"
+        animationPadding="5px"
+      />
       <div class="information">
         <div class="username">
           <strong>Username:</strong>
@@ -147,13 +146,11 @@ export default {
   width: 100%;
   margin-top: 20px;
 }
-.profile-picture-outer {
+.avatar {
   display: flex;
-  z-index: 99999;
-}
-.profile-picture {
   margin-left: 20px;
 }
+
 .information {
   margin: auto;
   margin-left: 20px;
@@ -239,7 +236,7 @@ export default {
     display: block;
     flex-direction: column;
   }
-  .profile-picture {
+  .avatar{
     margin: auto;
     margin-bottom: 10px;
   }
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
index f016b1a..8c96916 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
@@ -64,7 +64,7 @@ export default {
   components: { DropDown },
   data() {
     return {
-      surveyItems: Object.assign({},surveyItems),
+      surveyItems: Object.assign({}, surveyItems),
       surveyErrorMessage: null,
       surveyValidMessage: null,
       previousLoaded: false,
@@ -91,25 +91,31 @@ export default {
         }
       }
       //checks if all values are not null
-      if ( this.selected.name.trim() === "" || this.selected.about_me.trim() === "") {
+      if (
+        this.selected.name.trim() === "" ||
+        this.selected.about_me.trim() === ""
+      ) {
         this.surveyErrorMessage = "Make sure you select / fill in all fields!";
         return;
       }
-      this.surveyValidMessage = "Saving..."
+      this.surveyValidMessage = "Saving...";
       //gets the country index after unfiltering.
       let countryIndex = undefined;
       if (this.filterCountry[this.selected.country]) {
-        const selectedCountryName = this.filterCountry[this.selected.country].name;
-        countryIndex = this.surveyItems.countries.findIndex(el => el.name == selectedCountryName);
+        const selectedCountryName = this.filterCountry[this.selected.country]
+          .name;
+        countryIndex = this.surveyItems.countries.findIndex(
+          el => el.name == selectedCountryName
+        );
       }
-      if (this.selected.name && this.selected.name.length >100) {
-        this.surveyErrorMessage = "Name must be less that 100 characters."
+      if (this.selected.name && this.selected.name.length > 100) {
+        this.surveyErrorMessage = "Name must be less that 100 characters.";
         this.surveyValidMessage = null;
         return;
       }
-      if (this.selected.about_me && this.selected.about_me.length >500) {
-        this.surveyErrorMessage = "About me must be less that 500 characters."
-        this.surveyValidMessage = null
+      if (this.selected.about_me && this.selected.about_me.length > 500) {
+        this.surveyErrorMessage = "About me must be less that 500 characters.";
+        this.surveyValidMessage = null;
         return;
       }
 
@@ -118,34 +124,38 @@ export default {
         gender: this.selected.gender,
         age: this.selected.age,
         continent: this.selected.continent,
-				country: countryIndex,
-				about_me: this.selected.about_me
-			});
-			if (ok) {
-        this.surveyValidMessage = "Saved!"
-			} else {
+        country: countryIndex,
+        about_me: this.selected.about_me
+      });
+      if (ok) {
+        this.surveyValidMessage = "Saved!";
+      } else {
         this.surveyValidMessage = null;
-				this.surveyErrorMessage = error.response.data.message
-			}
+        this.surveyErrorMessage = error.response.data.message;
+      }
     }
   },
-  async mounted(){
-    const {ok, error, result} = await userService.getSurvey();
+  async mounted() {
+    const { ok, error, result } = await userService.getSurvey();
     if (ok) {
-      this.selected.continent = result.data.result.continent
-        this.selected.age = result.data.result.age
-        this.selected.name = result.data.result.name
-        this.selected.about_me = result.data.result.about_me
-        this.selected.gender = result.data.result.gender
-        //filter the country
-        if(result.data.result.country) {
-          setTimeout(() => {
-            const continentCode = surveyItems.continents[this.selected.continent].code;
-            const filter = surveyItems.countries.filter(e => e.code === continentCode);
-            const countryName = surveyItems.countries[result.data.result.country].name;
-            this.selected.country = filter.findIndex(e => e.name === countryName);
-          }, 500);
-        }
+      this.selected.continent = result.data.result.continent;
+      this.selected.age = result.data.result.age;
+      this.selected.name = result.data.result.name;
+      this.selected.about_me = result.data.result.about_me;
+      this.selected.gender = result.data.result.gender;
+      //filter the country
+      if (result.data.result.country) {
+        setTimeout(() => {
+          const continentCode =
+            surveyItems.continents[this.selected.continent].code;
+          const filter = surveyItems.countries.filter(
+            e => e.code === continentCode
+          );
+          const countryName =
+            surveyItems.countries[result.data.result.country].name;
+          this.selected.country = filter.findIndex(e => e.name === countryName);
+        }, 500);
+      }
     }
     this.previousLoaded = true;
   },
@@ -156,7 +166,7 @@ export default {
         selectedContinentIndex
       ];
       const code = selectedContinent.code;
-      
+
       return this.surveyItems.countries.filter(element => {
         return element.code == code || !element.code;
       });
@@ -178,7 +188,8 @@ export default {
   margin-top: 10px;
   user-select: none;
 }
-.survey, .survey-inner {
+.survey,
+.survey-inner {
   display: flex;
   margin: auto;
   margin-top: 10px;
@@ -192,9 +203,9 @@ export default {
   color: red;
   margin-bottom: 10px;
 }
-.survey-valid{
+.survey-valid {
   color: green;
-  margin-bottom: 10px; 
+  margin-bottom: 10px;
 }
 .survey .button {
   color: white;
@@ -217,7 +228,7 @@ export default {
   background: rgba(61, 61, 61, 0.863);
   margin-top: 5px;
   border-radius: 5px;
-	transition: 0.3s;
+  transition: 0.3s;
 }
 .survey-input:hover {
   background: rgba(73, 73, 73, 0.863);
@@ -229,10 +240,9 @@ export default {
   border: none;
   width: 200px;
   height: 100px;
-	transition: 0.3s;
+  transition: 0.3s;
 }
 
-
 .title {
   margin-top: 30px;
   display: flex;
@@ -247,4 +257,4 @@ export default {
   margin-right: 10px;
   font-size: 30px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/app/Popouts/Popouts/userInformationPopout.vue b/src/components/app/Popouts/Popouts/userInformationPopout.vue
index c4750fe..490e44a 100644
--- a/src/components/app/Popouts/Popouts/userInformationPopout.vue
+++ b/src/components/app/Popouts/Popouts/userInformationPopout.vue
@@ -4,15 +4,16 @@
       <spinner v-if="!user"/>
       <div class="inner" v-else>
         <div class="top">
-          <div class="profile-picture-outer">
+
             <profile-picture
+              class="avatar"
               size="90px"
               emoteSize="28px"
               animationPadding="5px"
               :admin="user.admin"
               :url="`${avatarDomain}${user.avatar}`"
             />
-          </div>
+
           <div class="info">
             <div class="username">{{user.username}}</div>
             <div class="tag">@{{user.tag}}</div>
@@ -324,7 +325,7 @@ export default {
 .button.warn:hover {
   background: #ff0000ab;
 }
-.profile-picture-outer {
+.avatar{
   display: flex;
   z-index: 9999;
   margin: auto;
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index 423bc55..115d368 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -53,15 +53,16 @@ export default {
   margin: 5px;
   transition: 0.3s;
 }
-.add-server{
-  background: rgba(0, 255, 21, 0.277);
-}
+
 
 .server:hover {
   background: rgba(0, 0, 0, 0.288);
 }
-.add-server:hover{
-  background: rgba(0, 255, 21, 0.377);
+.material-icons {
+  transition: 0.3s;
+}
+.add-server:hover .material-icons{
+  color: rgba(20, 255, 39, 0.726);
 }
 
 .small-view {
@@ -89,7 +90,7 @@ export default {
   height: 56px;
   display: flex;
   align-items: center;
-  margin-right: 10px;
+  margin-right: 5px;
   margin-left: 5px;
 }
 
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 3e86960..c36c2a4 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -27,7 +27,7 @@ export default {
   methods: {
 
     async openChat(event) {
-      if (event.target.classList[0] === "profile-picture") return;
+      if (event.target.closest(".profile-picture")) return;
       bus.$emit('closeLeftMenu');
       // dismiss notification if exists 
       // TODO move this into openchat or something :/
diff --git a/src/components/homePage/Popout.vue b/src/components/homePage/Popout.vue
index 9b9e7d6..cd3fe7d 100644
--- a/src/components/homePage/Popout.vue
+++ b/src/components/homePage/Popout.vue
@@ -2,14 +2,7 @@
   <div class="profile-popout">
     <div class="triangle"></div>
     <div class="inner">
-      <div class="outer-profile-picture" v-if="user">
-        <profile-picture
-          :url="avatarDomain + user.avatar"
-          :admin="user.admin"
-          size="40px"
-          emoteSize="17px"
-        />
-      </div>
+      <profile-picture v-if="user" class="avatar" :url="avatarDomain + user.avatar" :admin="user.admin" size="40px" emoteSize="17px" />
       <div class="information">
         <div
           class="username"
@@ -76,8 +69,7 @@ export default {
   padding: 10px;
   align-items: center;
 }
-.outer-profile-picture {
-  z-index: 999999;
+.avatar {
   margin-left: 10px;
 }
 .information {
@@ -107,6 +99,7 @@ export default {
   transition: 0.3s;
   cursor: default;
   font-size: 27px;
+  user-select: none;
 }
 .buttons .material-icons:hover {
   color: white;
diff --git a/src/store/index.js b/src/store/index.js
index 98ba9e2..4b23379 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,7 +7,7 @@ import messageModule from './modules/messageModule';
 import notificationsModule from './modules/notificationsModule';
 import settingsModule from './modules/settingsModule';
 import uploadFilesModule from './modules/uploadFilesModule';
-import popoutsModule from './modules/popoutsModule';
+import popoutsModule from './modules/popoutsModule/popoutsModule.js';
 import emojiSuggestionModule from './modules/emojiSuggestionModule';
 import {
   router
diff --git a/src/store/modules/popoutsModule.js b/src/store/modules/popoutsModule/popoutsModule.js
similarity index 96%
rename from src/store/modules/popoutsModule.js
rename to src/store/modules/popoutsModule/popoutsModule.js
index 3eb395b..d06d407 100644
--- a/src/store/modules/popoutsModule.js
+++ b/src/store/modules/popoutsModule/popoutsModule.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 import Vue from 'vue'
 import {
   bus
-} from '../../main'
+} from '@/main'
 import VueRouter from 'vue-router';
 import NotificationSounds from '@/utils/notificationSound';
 
@@ -17,7 +17,6 @@ const state = {
   dragDropFileUploadDialog: false,
   settings: false,
   GDLinkMenu: false,
-  emojiPanel: false,
 }
 
 const getters = {
diff --git a/src/utils/surveyItems.js b/src/utils/surveyItems.js
index 06227c2..28dd43a 100644
--- a/src/utils/surveyItems.js
+++ b/src/utils/surveyItems.js
@@ -1,15 +1,15 @@
 export default {
   gender: [
-    { emoji: "👦🏻", name: "Male" },
-    { emoji: "👧🏼", name: "Female" },
-    { emoji: "😶", name: "Rather not say" }
+    { emoji: "👦🏻", name: "Male", code:"M" },
+    { emoji: "👧🏼", name: "Female", code:"F"},
+    { emoji: "😶", name: "Rather not say", code:"no"}
   ],
   age: [
-    { emoji: "", name: "13 or under" },
-    { emoji: "", name: "14-16" },
-    { emoji: "", name: "17-19" },
-    { emoji: "", name: "20 or above" },
-    { emoji: "😶", name: "Rather not say" }
+    { emoji: "", name: "13 or under", code: "-13"},
+    { emoji: "", name: "14-16", code:"1416"},
+    { emoji: "", name: "17-19", code:"1719"},
+    { emoji: "", name: "20 or above", code:"20+" },
+    { emoji: "😶", name: "Rather not say", code: "no" }
   ],
   continents: [
     { name: "Europe", emoji: "🍃", code: "EU" },
diff --git a/src/views/App.vue b/src/views/App.vue
index 1249ab8..3426808 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -32,8 +32,8 @@
         <div class="panel-layout">
           <news v-if="currentTab == 0"/>
           <direct-message v-if="currentTab == 1"/>
-          <servers v-if="currentTab == 2"/>
-          <div class="coming-soon" v-if="currentTab > 2">
+          <!-- <servers v-if="currentTab == 2"/> -->
+          <div class="coming-soon" v-if="currentTab > 1">
             <div class="icon">
               <i class="material-icons">cached</i>
             </div>
@@ -115,6 +115,11 @@ export default {
 
 
 <style scoped>
+#app {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
 .coming-soon {
   display: flex;
   align-items: center;
@@ -131,6 +136,7 @@ export default {
 }
 
 .direct-message-tab {
+  position: relative;
   display: flex;
   width: 100%;
   height: 100%;
@@ -239,12 +245,10 @@ textarea {
 }
 .background-image {
   background: url(./../assets/background.jpg);
-  position: absolute;
+  position: fixed;
   z-index: -1;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  width: 100%;
+  height: 100%;
   background-repeat: no-repeat;
   background-position: bottom;
   background-size: cover;
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index f069125..d93ed15 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -12,11 +12,9 @@
             <div class="link" @click="signupPage" v-if="!loggedIn">Sign up</div>
             <div class="link" @click="loginPage" v-if="!loggedIn">Login</div>
             <spinner class="spinner-profile" :size="50" v-if="loggedIn && !user" />
-            <div class="outer-profile-picture" v-if="loggedIn && user">
-              <profile-picture @click.native="showPopout = !showPopout" :hover='true' :url="avatarDomain + user.avatar" :admin="user.admin" size="40px" emoteSize="17px"/>
-            </div>
+            <profile-picture class="avatar" v-if="loggedIn && user" @click.native="showPopout = !showPopout" :hover='true' :url="avatarDomain + user.avatar" :admin="user.admin" size="40px" emoteSize="17px"/>
             <transition name="fall-down-fast">
-              <Popout v-if="user && loggedIn && showPopout" @logout="logOut" :user="user"/>
+              <Popout v-if="user && loggedIn && showPopout" @logout="logOut" :user="user" v-click-outside="closePopout"/>
             </transition>
           </div>
         </div>
@@ -73,6 +71,10 @@ export default {
     };
   },
   methods: {
+    closePopout(event) {
+      if (!event.target.closest('.avatar'))
+      this.showPopout = false;
+    },
     logOut() {
       localStorage.removeItem("hauthid");
       this.loggedIn = null;
@@ -251,14 +253,11 @@ body {
   margin-left: 10px;
   color: white;
 }
-.outer-profile-picture{
-  user-select: none;
-  z-index: 9999999;
-}
+
 
 .background-image {
-  position: fixed;
   z-index: -1;
+  position: fixed;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
@@ -268,6 +267,9 @@ body {
   transition: 0.5s;
 }
 .content {
+  position: fixed;
+  width: 100%;
+  height: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -290,17 +292,20 @@ body {
   margin-top: 10px;
   margin-bottom: 0;
   user-select: none;
+  flex-shrink: 0;
 }
 .title {
   font-size: 25px;
   color: white;
   text-align: center;
   padding: 10px;
+  flex-shrink: 0;
 }
 .buttons {
   display: flex;
   justify-content: center;
   margin-top: 30px;
+  flex-shrink: 0;
 }
 .button {
   padding: 15px;
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index 19c884a..21b49ca 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -147,6 +147,11 @@ export default {
 };
 </script>
 
+<style>
+html, body {
+  height: 100%;
+}
+</style>
 
 <style scoped>
 .fade-up-enter-active {
@@ -186,6 +191,7 @@ export default {
   flex-direction: column;
   transition: background 10s;
   color: white;
+    height: 100%;
 }
 .app-content {
   display: flex;
@@ -197,13 +203,10 @@ export default {
   padding-bottom: 100px;
 }
 .background {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
   transition: background 10s;
-
 }
 
 .night-background {
@@ -229,6 +232,7 @@ export default {
   display: flex;
   height: 100%;
   margin: 10px;
+  flex-shrink:0;
 }
 .box {
   width: 100%;
@@ -341,7 +345,7 @@ input {
 }
 
 .register-button {
-  background: #2ecc70ab;
+  background: rgba(46, 204, 112, 0.67);
   box-shadow: 3px 3px #0f7e3d;
 }
 .register-button.button:hover {
diff --git a/src/views/RegisterPage.vue b/src/views/RegisterPage.vue
index 3f3dfd5..38cb814 100644
--- a/src/views/RegisterPage.vue
+++ b/src/views/RegisterPage.vue
@@ -158,6 +158,11 @@ export default {
 };
 </script>
 
+<style>
+html, body {
+  height: 100%;
+}
+</style>
 
 <style scoped>
 .fade-up-enter-active {
@@ -205,16 +210,13 @@ export default {
   width: 100%;
   overflow: auto;
   z-index: 9999;
-  padding-bottom: 50px;
+  padding-bottom: 100px;
 }
 .background {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
   transition: background 10s;
-
 }
 
 .night-background {
@@ -240,6 +242,7 @@ export default {
   display: flex;
   height: 100%;
   margin: 10px;
+  flex-shrink: 0;
 }
 .box {
   width: 100%;
@@ -352,7 +355,7 @@ input {
 }
 
 .register-button {
-  background: #2ecc70ab;
+  background: rgba(46, 204, 112, 0.67);
   box-shadow: 3px 3px #0f7e3d;
 }
 .register-button.button:hover {