diff --git a/src/components/app/MainNav.vue b/src/components/app/MainNav.vue
index 55a12ea..517be0b 100644
--- a/src/components/app/MainNav.vue
+++ b/src/components/app/MainNav.vue
@@ -72,15 +72,30 @@
           security
         </div>
       </div>
-    </div>
-    <div
-      data-name="Settings"
-      class="item material-icons"
-      @click="openSettings"
-      @mouseleave="mouseLeaveEvent"
-      @mouseenter="localToolTipEvent('Settings', $event)"
-    >
-      settings
+      <!-- <div
+        data-name="profile"
+        class="item settings"
+        @click="openSettings"
+        @mouseleave="mouseLeaveEvent"
+        @mouseenter="localToolTipEvent(`${user.username}:${user.tag}`, $event)"
+      >
+        <div
+          class="status-avatar"
+          :style="`border: solid 3px ${getStatusColor}`"
+        >
+          <img class="avatar" :src="avatarDomain + '/' + user.avatar" />
+        </div>
+      </div> -->
+
+      <div
+        data-name="Settings"
+        class="item material-icons settings"
+        @click="openSettings"
+        @mouseleave="mouseLeaveEvent"
+        @mouseenter="localToolTipEvent('Settings', $event)"
+      >
+        settings
+      </div>
     </div>
   </div>
 </template>
@@ -90,6 +105,7 @@ import { bus } from "@/main.js";
 import config from "@/config.js";
 import settingsService from "@/services/settingsService";
 import { isMobile } from "@/utils/Mobile";
+import statuses from "@/utils/statuses";
 export default {
   data() {
     return {
@@ -176,6 +192,10 @@ export default {
     }
   },
   computed: {
+    getStatusColor() {
+      const status = this.$store.getters.user.status || 0;
+      return statuses[parseInt(status)].color;
+    },
     mobileSize() {
       return (
         this.$mq === "mobile" &&
@@ -208,7 +228,7 @@ export default {
             this.currentTab !== 2)
         );
       });
-      const mentioned = notifications.find(m => m.mentioned);
+      const mentioned = notificationsFiltered.find(m => m.mentioned);
       return {
         notification: !!notificationsFiltered.length,
         mentioned: !!mentioned
@@ -256,7 +276,7 @@ export default {
 }
 .mobile {
   background: rgba(0, 0, 0, 0.4);
-  padding-left: 10px;
+
   width: initial;
   .item {
     width: 40px;
@@ -265,16 +285,42 @@ export default {
     margin-right: 5px;
     font-size: 25px;
   }
-  .tool-tip { 
+  .tool-tip {
     top: -29px;
   }
 }
+
+.status-avatar {
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  .avatar {
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.settings {
+  margin-right: 14px;
+}
+
 .container {
   display: flex;
   flex-direction: row;
   height: 100%;
   width: 100%;
+  overflow: auto;
 }
+.container {
+  scrollbar-width: thin;
+}
+.container::-webkit-scrollbar {
+  height: 3px;
+}
+
 .navigation-items {
   display: flex;
   flex-direction: row;
@@ -282,7 +328,6 @@ export default {
   height: 100%;
   align-self: flex-start;
   align-content: center;
-  flex-shrink: 0;
 }
 .item {
   font-size: 24px;
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index ce861e8..53edcd0 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -12,7 +12,7 @@
     />
     <div class="information">
       <div class="username">{{ user.username }}</div>
-      <div class="tag">@{{ user.tag }}</div>
+      <div class="tag">:{{ user.tag }}</div>
     </div>
     <div
       class="status-button"
diff --git a/src/components/app/Popouts/Popouts/AddFriend.vue b/src/components/app/Popouts/Popouts/AddFriend.vue
index 1987c94..efb24c0 100644
--- a/src/components/app/Popouts/Popouts/AddFriend.vue
+++ b/src/components/app/Popouts/Popouts/AddFriend.vue
@@ -14,7 +14,7 @@
             class="tag"
             v-model="input"
             type="text"
-            placeholder="pancake@time"
+            placeholder="pancake:time"
           />
           <input
             class="button"
@@ -62,7 +62,7 @@ export default {
       this.success = null;
       this.requestSent = true;
 
-      const split = this.input.trim().split("@");
+      const split = this.input.trim().split(":");
       // validation
       if (
         split.length < 2 ||
diff --git a/src/components/app/Popouts/Popouts/ServerMemberContext.vue b/src/components/app/Popouts/Popouts/ServerMemberContext.vue
index df7e215..7dbc4ae 100644
--- a/src/components/app/Popouts/Popouts/ServerMemberContext.vue
+++ b/src/components/app/Popouts/Popouts/ServerMemberContext.vue
@@ -23,7 +23,7 @@
       </div>
       <div class="item" @click="copyUserTag">
         <div class="material-icons icon-cat">developer_board</div>
-        <div class="name">Copy User@Tag</div>
+        <div class="name">Copy User:Tag</div>
       </div>
       <div class="item" @click="copyID">
         <div class="material-icons icon-cat">developer_board</div>
@@ -79,7 +79,7 @@ export default {
       const user = this.$store.getters["members/members"][
         this.contextDetails.uniqueID
       ];
-      const userTag = user.username + "@" + user.tag;
+      const userTag = user.username + ":" + user.tag;
       this.closeMenu();
       this.$clipboard(userTag);
     },
@@ -109,9 +109,9 @@ export default {
         const mainMenuY = parseInt(mainMenu.style.top, 10);
         const mainMenuX = parseInt(mainMenu.style.left, 10);
 
-        rolesMenu.style.top =
-          mainMenuY + mainMenu.clientHeight - rolesMenu.clientHeight + "px";
-        rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 11 + "px";
+        rolesMenu.style.top = mainMenuY + 120 + "px";
+
+        rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 21 + "px";
       });
     },
     setPosition() {
diff --git a/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue b/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
index e6a5b5e..849afcc 100644
--- a/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
+++ b/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
@@ -59,7 +59,7 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 99;
+  z-index: 99999999;
   display: flex;
   color: white;
 }
@@ -73,21 +73,28 @@ export default {
   padding: 10px;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 .survay-icon .material-icons {
   color: white;
-  font-size: 120px;
+  font-size: 70px;
 }
 .survay-icon {
   margin: auto;
   margin-top: 5px;
+  margin-bottom: 10px;
 }
 
 .text {
   margin: auto;
   text-align: center;
+  margin-top: 10px;
 }
 .buttons {
   display: flex;
@@ -96,21 +103,22 @@ export default {
 .button {
   padding: 10px;
   margin: 3px;
-  background: #014656;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
   transition: 0.3s;
   user-select: none;
   cursor: pointer;
 }
 .valid {
-  background: #014656;
+  background: rgba(0, 0, 0, 0.2);
 }
 .valid:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.4);
 }
 .warning {
-  background: rgba(255, 27, 27, 0.589);
+  background: rgba(255, 67, 67, 0.7);
 }
 .warning:hover {
-  background: rgb(255, 27, 27);
+  background: rgba(255, 67, 67, 0.9);
 }
 </style>
diff --git a/src/components/app/Popouts/Popouts/userInformationPopout.vue b/src/components/app/Popouts/Popouts/userInformationPopout.vue
index 0cfbf0a..3a2f58e 100644
--- a/src/components/app/Popouts/Popouts/userInformationPopout.vue
+++ b/src/components/app/Popouts/Popouts/userInformationPopout.vue
@@ -14,7 +14,7 @@
           />
           <div class="uesrname-tag">
             <div class="username">{{ user.username }}</div>
-            <div class="tag">@{{ user.tag }}</div>
+            <div class="tag">:{{ user.tag }}</div>
           </div>
           <!-- <div class="details">
               Pancake • Male • 17-19 • United Kingdom
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index 5289c98..ac717e3 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -133,8 +133,8 @@ export default {
   font-size: 15px;
   position: absolute;
   z-index: 115651;
-  top: 5px;
-  right: 5px;
+  top: 10px;
+  right: 10px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
diff --git a/src/components/app/Tabs/Explore/themes.vue b/src/components/app/Tabs/Explore/themes.vue
index ed3c8a9..c8c39fe 100644
--- a/src/components/app/Tabs/Explore/themes.vue
+++ b/src/components/app/Tabs/Explore/themes.vue
@@ -8,6 +8,9 @@
           <theme-template
             v-for="theme in publicThemes"
             :key="theme.id"
+            :appliedTheme="appliedTheme"
+            @applyTheme="applyTheme"
+            @unapplyTheme="unapplyTheme"
             :theme="theme"
           />
         </div>
@@ -20,16 +23,48 @@
 import themeTemplate from "./themesTemplate";
 import exploreService from "@/services/exploreService";
 import Spinner from "@/components/Spinner";
+const cssZip = () => import("@/utils/cssZip");
 
 export default {
   components: { themeTemplate, Spinner },
   data() {
     return {
       publicThemes: null,
-      params: "?verified=true"
+      params: "?verified=true",
+      appliedTheme: null
     };
   },
   methods: {
+    async unapplyTheme() {
+      this.appliedTheme = null;
+      localStorage.removeItem("appliedThemeId");
+      document.getElementById("theme").outerHTML = "";
+    },
+    async applyTheme(id) {
+      // get css
+      const { ok, result } = await exploreService.applyTheme(id);
+      if (ok) {
+        const css = result.data.css;
+        const id = result.data.id;
+        // save to local storage.
+        localStorage.setItem("appliedThemeId", id);
+
+        const styleEl = document.createElement("style");
+        styleEl.classList.add("theme-" + id);
+        styleEl.id = "theme";
+        cssZip().then(utils => {
+          styleEl.innerHTML = utils.unzip(css) || css;
+
+          const currentStyle = document.getElementById("theme");
+          if (currentStyle) {
+            currentStyle.outerHTML = styleEl.outerHTML;
+          } else {
+            document.head.innerHTML += styleEl.outerHTML;
+          }
+          this.appliedTheme = id;
+        });
+      }
+    },
     async getThemesList() {
       this.publicThemes = null;
       const { ok, result } = await exploreService.getThemes();
@@ -39,6 +74,7 @@ export default {
     }
   },
   mounted() {
+    this.appliedTheme = localStorage.getItem("appliedThemeId");
     this.getThemesList();
   }
 };
diff --git a/src/components/app/Tabs/Explore/themesTemplate.vue b/src/components/app/Tabs/Explore/themesTemplate.vue
index 45cf5ef..3277bb3 100644
--- a/src/components/app/Tabs/Explore/themesTemplate.vue
+++ b/src/components/app/Tabs/Explore/themesTemplate.vue
@@ -39,45 +39,20 @@
 
 <script>
 import config from "@/config.js";
-import exploreService from "@/services/exploreService";
-
-const cssZip = () => import("@/utils/cssZip");
 
 export default {
-  props: ["theme"],
+  props: ["theme", "appliedTheme"],
   data() {
     return {
-      joinClicked: false,
-      bannerDomain: config.domain + "/media/",
-      appliedTheme: null
+      bannerDomain: config.domain + "/media/"
     };
   },
   methods: {
     async applyButton() {
-      // get css
-      const { ok, result } = await exploreService.applyTheme(this.theme.id);
-      if (ok) {
-        const css = result.data.css;
-        const id = result.data.id;
-        // save to local storage.
-        localStorage.setItem("appliedThemeId", id);
-
-        const styleEl = document.createElement("style");
-        styleEl.classList.add("theme-" + id);
-        styleEl.id = "theme";
-        cssZip().then(utils => {
-          styleEl.innerHTML = utils.unzip(css) || css;
-
-          const currentStyle = document.getElementById("theme");
-          if (currentStyle) {
-            currentStyle.outerHTML = styleEl.outerHTML;
-          } else {
-            document.head.innerHTML += styleEl.outerHTML;
-          }
-          this.appliedTheme = id;
-        });
-
-      }
+      this.$emit("applyTheme", this.theme.id)
+    },
+    unApplyButton() {
+      this.$emit("unapplyTheme", this.theme.id)
     },
     bannerImageClicked() {
       this.$store.dispatch(
@@ -85,16 +60,7 @@ export default {
         this.bannerDomain + this.theme.screenshot + "?type=webp"
       );
     },
-    unApplyButton() {
-      this.appliedTheme = null;
-      localStorage.removeItem("appliedThemeId");
-      document.getElementById("theme").outerHTML = "";
-    }
-  },
-  mounted() {
-    this.appliedTheme = localStorage.getItem("appliedThemeId");
-  },
-  computed: {}
+  }
 };
 </script>
 
diff --git a/src/components/homePage/ProfilePopout.vue b/src/components/homePage/ProfilePopout.vue
index 870ab9e..89ca9be 100644
--- a/src/components/homePage/ProfilePopout.vue
+++ b/src/components/homePage/ProfilePopout.vue
@@ -12,7 +12,7 @@
       />
       <div class="information">
         <div class="username">{{ user.username }}</div>
-        <div class="tag">@{{ user.tag }}</div>
+        <div class="tag">:{{ user.tag }}</div>
       </div>
       <div class="buttons">
         <i class="material-icons warn" @click="logOut">exit_to_app</i>
diff --git a/src/store/modules/messageModule.js b/src/store/modules/messageModule.js
index 13b225c..009b929 100644
--- a/src/store/modules/messageModule.js
+++ b/src/store/modules/messageModule.js
@@ -109,6 +109,7 @@ const actions = {
   },
   deleteMessage(context, { channelID, messageID }) {
     const messages = context.state.messages[channelID];
+    if (!messages) return;
     messages.find((obj, index) => {
       if (obj.messageID === messageID) {
         context.commit("deleteMessage", { channelID, index });