diff --git a/src/Main.vue b/src/Main.vue
index 163dff5..8a8e8d4 100644
--- a/src/Main.vue
+++ b/src/Main.vue
@@ -8,7 +8,6 @@
 
 
 <style>
-
 html {
   height: 100%;
 }
@@ -35,18 +34,15 @@ body {
 /* Track */
 ::-webkit-scrollbar-track {
   background: #8080806b;
-  border-radius: 10px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: #f5f5f559;
-  border-radius: 10px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #f5f5f59e;
-  border-radius: 10px;
 }
 </style>
diff --git a/src/assets/graphics/HomeGraphics.png b/src/assets/graphics/HomeGraphics.png
index 2da8c2c..3c69a79 100644
Binary files a/src/assets/graphics/HomeGraphics.png and b/src/assets/graphics/HomeGraphics.png differ
diff --git a/src/assets/graphics/HomeGraphics2.png b/src/assets/graphics/HomeGraphics2.png
deleted file mode 100644
index 2f4a027..0000000
Binary files a/src/assets/graphics/HomeGraphics2.png and /dev/null differ
diff --git a/src/assets/halloween_background.jpg b/src/assets/halloween_background.jpg
deleted file mode 100644
index 263e42e..0000000
Binary files a/src/assets/halloween_background.jpg and /dev/null differ
diff --git a/src/assets/leftPanelBackground.jpg b/src/assets/leftPanelBackground.jpg
new file mode 100644
index 0000000..c5656aa
Binary files /dev/null and b/src/assets/leftPanelBackground.jpg differ
diff --git a/src/components/app/FriendsList.vue b/src/components/app/FriendsList.vue
index d1eed61..8f3749e 100644
--- a/src/components/app/FriendsList.vue
+++ b/src/components/app/FriendsList.vue
@@ -3,13 +3,16 @@
     <navigation />
     <div class="content">
       <div class="tabs">
-        <div :class="{selector: true, right: currentTab === 1}" />
         <div
           class="tab"
-          :class="{notifyAnimation: friendRequestExists}"
+          :class="{notifyAnimation: friendRequestExists, selected: currentTab === 0}"
           @click="currentTab = 0"
         >Friends</div>
-        <div class="tab" :class="{notifyAnimation: DMNotification}" @click="currentTab = 1">Recents</div>
+        <div
+          class="tab"
+          :class="{notifyAnimation: DMNotification, selected: currentTab === 1 }"
+          @click="currentTab = 1"
+        >Recents</div>
       </div>
       <div v-if="currentTab === 0" class="list">
         <pending-friends />
@@ -19,6 +22,7 @@
       <div v-else class="list">
         <recent-friends />
       </div>
+      <div class="seperater" />
       <MyMiniInformation />
     </div>
   </div>
@@ -89,12 +93,15 @@ export default {
 <style scoped>
 .left-panel {
   height: 100%;
-  background: rgba(0, 0, 0, 0.6);
   width: 300px;
   flex-shrink: 0;
   display: flex;
   flex-direction: row;
   z-index: 1;
+  background-image: url("../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .content {
   display: flex;
@@ -102,8 +109,6 @@ export default {
   flex-shrink: 0;
   flex: 1;
   overflow: hidden;
-
-
 }
 .list {
   flex: 1;
@@ -128,29 +133,17 @@ export default {
   user-select: none;
   cursor: default;
   height: 50px;
-  background: rgba(0, 0, 0, 0.171);
-  margin-left: 1px;
-  margin-right: 1px;
-  transition: 0.3s;
+  transition: 0.2s;
   cursor: pointer;
 }
+
 .tab:hover {
-  background: rgba(255, 255, 255, 0.096);
-}
-.selector {
-  background: rgba(255, 255, 255, 0.322);
-  width: 118px;
-  height: 50px;
-  top: 0;
-  left: 1px;
-  position: absolute;
-  z-index: -1;
-  transition: 0.3s;
-}
-.right {
-  transform: translateX(120px);
+  background: #097279;
 }
 
+.tab.selected {
+  background: #075e64;
+}
 /* ------- SCROLL BAR -------*/
 /* width */
 .list::-webkit-scrollbar {
@@ -172,6 +165,14 @@ export default {
   background: #f5f5f59e;
 }
 
+.seperater {
+  height: 1px;
+  width: calc(100% - 10px);
+  align-self: center;
+  background-color: #a0c8d5;
+  flex-shrink: 0;
+}
+
 .notifyAnimation {
   animation: notifyAnime;
   animation-duration: 1s;
diff --git a/src/components/app/MemberTemplate.vue b/src/components/app/MemberTemplate.vue
index 2c012d1..71f7bb5 100644
--- a/src/components/app/MemberTemplate.vue
+++ b/src/components/app/MemberTemplate.vue
@@ -2,10 +2,11 @@
   <div
     class="member"
     @click="openUserInformation()"
-    @mouseover="hover = true" @mouseleave="hover = false"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
     @contextmenu.prevent="rightClickEvent"
   >
-    <Profile-picture 
+    <Profile-picture
       class="avatar"
       :url="`${userAvatar}${hover ? '' : '?type=png'}`"
       size="30px"
@@ -13,57 +14,54 @@
       :status="presense"
     />
     <div class="information">
-      <div class="username">
-        {{ user.username }}
-      </div>
-    </div>
-    <div
-      v-if="type === 'OWNER'"
-      class="type-box"
-    >
-      Owner
+      <div class="username">{{ user.username }}</div>
     </div>
+    <div v-if="type === 'OWNER'" class="type-box">Owner</div>
   </div>
 </template>
 
 
 <script>
-import ProfilePicture from '@/components/ProfilePictureTemplate';
-import config from '@/config';
+import ProfilePicture from "@/components/ProfilePictureTemplate";
+import config from "@/config";
 export default {
   components: { ProfilePicture },
-  props: ['user', 'avatar', 'type'],
+  props: ["user", "avatar", "type"],
   data() {
     return {
       hover: false
-    }
+    };
   },
   computed: {
     userAvatar() {
-      return config.domain + "/avatars/" + this.avatar  
+      return config.domain + "/avatars/" + this.avatar;
     },
-    presense(){
+    presense() {
       //attach presense
       if (this.user.uniqueID === this.$store.getters.user.uniqueID) {
-        return this.$store.getters.user.status || 0
+        return this.$store.getters.user.status || 0;
       }
-      const presences = this.$store.getters['members/presences'];
+      const presences = this.$store.getters["members/presences"];
       const userPresense = presences[this.user.uniqueID];
-      return userPresense || 0
+      return userPresense || 0;
     }
   },
   methods: {
     openUserInformation() {
-      this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
+      this.$store.dispatch("setUserInformationPopout", this.user.uniqueID);
     },
     rightClickEvent(event) {
       const x = event.clientX;
       const y = event.clientY;
-      this.$store.dispatch('setServerMemberContext', {serverID: this.$store.getters['servers/selectedServerID'], uniqueID: this.user.uniqueID, x, y});
+      this.$store.dispatch("setServerMemberContext", {
+        serverID: this.$store.getters["servers/selectedServerID"],
+        uniqueID: this.user.uniqueID,
+        x,
+        y
+      });
     }
   }
-  
-}
+};
 </script>
 
 
@@ -73,14 +71,14 @@ export default {
   padding: 3px;
   align-items: center;
   align-content: center;
-  transition: 0.3s;
+  transition: 0.2s;
   cursor: pointer;
   user-select: none;
   overflow: hidden;
 }
 
 .member:hover {
-  background: rgba(255, 255, 255, 0.07);
+  background: #064d55;
 }
 
 .information {
@@ -88,13 +86,13 @@ export default {
   overflow: hidden;
   flex: 1;
 }
-.username { 
-  white-space: nowrap; 
+.username {
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.type-box{
+.type-box {
   padding: 3px;
   border-radius: 5px;
   height: 100%;
@@ -102,7 +100,5 @@ export default {
 }
 
 .avatar {
-
 }
-
 </style>
diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index 3ad7510..6bdef5f 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -1,19 +1,17 @@
 <template>
   <div class="members-list">
     <div class="header">
-      <div class="title">
-        Members ({{ members.length }})
-      </div>
+      <div class="title">Members ({{ members.length }})</div>
     </div>
     <div class="members">
       <div class="tab" v-if="onlineMembers.length">Online ({{onlineMembers.length}})</div>
-        <member-template
-          v-for="member in onlineMembers"
-          :key="member.member.uniqueID"
-          :type="member.type"
-          :avatar="member.member.avatar"
-          :user="member.member"
-        />
+      <member-template
+        v-for="member in onlineMembers"
+        :key="member.member.uniqueID"
+        :type="member.type"
+        :avatar="member.member.avatar"
+        :user="member.member"
+      />
       <div class="tab" v-if="offlineMembers.length">Offline ({{offlineMembers.length}})</div>
 
       <member-template
@@ -28,29 +26,31 @@
 </template>
 
 <script>
-import MemberTemplate from '@/components/app/MemberTemplate';
+import MemberTemplate from "@/components/app/MemberTemplate";
 export default {
   components: { MemberTemplate },
   computed: {
     members() {
-      const members = this.$store.getters['members/members'];
-      const serverMembers = this.$store.getters['servers/serverMembers']
-      const selectedServerID = this.$store.getters['servers/selectedServerID'];
-      const presences = this.$store.getters['members/presences'];
+      const members = this.$store.getters["members/members"];
+      const serverMembers = this.$store.getters["servers/serverMembers"];
+      const selectedServerID = this.$store.getters["servers/selectedServerID"];
+      const presences = this.$store.getters["members/presences"];
 
-      let filteredSM = serverMembers.filter(sm => sm.server_id === selectedServerID);
+      let filteredSM = serverMembers.filter(
+        sm => sm.server_id === selectedServerID
+      );
 
       let getMember = filteredSM.map(sm => {
         sm.member = members[sm.uniqueID];
 
         // attach presense
         if (sm.uniqueID === this.$store.getters.user.uniqueID) {
-          sm.presense =  this.$store.getters.user.status || 0
+          sm.presense = this.$store.getters.user.status || 0;
         } else {
-          sm.presense =  presences[sm.uniqueID] || 0
+          sm.presense = presences[sm.uniqueID] || 0;
         }
         return sm;
-      })
+      });
       const sort = getMember.sort((a, b) => {
         var nameA = a.member.username.toUpperCase();
         var nameB = b.member.username.toUpperCase();
@@ -61,53 +61,53 @@ export default {
           return 1;
         }
         return 0;
-      })
+      });
       return sort;
-
     },
     onlineMembers() {
-      return this.members.filter(sm => sm.presense >= 1)
+      return this.members.filter(sm => sm.presense >= 1);
     },
     offlineMembers() {
-      return this.members.filter(sm => sm.presense == 0)
+      return this.members.filter(sm => sm.presense == 0);
     }
   }
-}
+};
 </script>
 
 
 <style scoped>
-
 .members-list {
   color: white;
   display: flex;
-	flex-direction: column;
-  background: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
   width: 300px;
   height: 100%;
+  background-image: url("../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .header {
-	height: 50px;
-	width: 100%;
-	background: rgba(0, 0, 0, 0.438);
-	display: flex;
+  height: 50px;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.438);
+  display: flex;
   flex-shrink: 0;
 }
 .header .title {
   user-select: none;
-	font-size: 19px;
-	margin: auto;
+  font-size: 19px;
+  margin: auto;
 }
-.members{
-  padding-top: 10px;
+.members {
   overflow: auto;
 }
 .tab {
-  background: rgba(255, 255, 255, 0.13);
+  background: #095a5c;
   padding: 5px;
   user-select: none;
   cursor: default;
-  color: rgb(200, 200, 200);
+  color: #cce4e3;
   font-size: 15px;
 }
 </style>
diff --git a/src/components/app/MessageLogs.vue b/src/components/app/MessageLogs.vue
index 3a2b6b4..0f6755e 100644
--- a/src/components/app/MessageLogs.vue
+++ b/src/components/app/MessageLogs.vue
@@ -1,36 +1,59 @@
 <template>
-
-    <div  ref="msg-logs" class="message-logs" @scroll.passive="scrollEvent" @resize="onResize">
-      <div class="load-more-button" v-if="loadMoreTop.show && selectedChannelMessages.length >= 50">
-        <spinner :size="30" v-if="loadMoreTop.loading" />
-        <div class="text" v-if="!loadMoreTop.loading" @click="loadMoreMessages">Load more</div>
-      </div>
-        <message
-          class="message-container"
-          v-for="(msg, index) in selectedChannelMessages"
-          :class="{'show-message-animation': index === selectedChannelMessages.length - 1}"
-          :key="msg.tempID || msg.messageID"
-          :date="msg.created"
-          :admin="msg.creator.admin"
-          :username="msg.creator.username"
-          :uniqueID="msg.creator.uniqueID"
-          :avatar="msg.creator.avatar"
-          :message="msg.message"
-          :embed="msg.embed"
-          :files="msg.files"
-          :status="msg.status"
-          :messageID="msg.messageID"
-          :channelID="msg.channelID"
-          :type="msg.type"
-          :timeEdited="msg.timeEdited"
-        />
-      <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue"/>
-        <div class="load-more-button" v-if="loadMoreBottom.show && selectedChannelMessages.length >= 50">
-          <spinner :size="30" v-if="loadMoreBottom.loading" />
-        <div class="text" v-if="!loadMoreBottom.loading" @click="loadBottomMessages">Load more</div>
-      </div>
+  <div ref="msg-logs" class="message-logs" @scroll.passive="scrollEvent" @resize="onResize">
+    <div class="load-more-button" v-if="loadMoreTop.show && selectedChannelMessages.length >= 50">
+      <spinner :size="30" v-if="loadMoreTop.loading" />
+      <div class="text" v-if="!loadMoreTop.loading" @click="loadMoreMessages">Load more</div>
     </div>
-
+    <message
+      class="message-container"
+      v-for="(msg, index) in selectedChannelMessages"
+      :class="{'show-message-animation': index === selectedChannelMessages.length - 1}"
+      :key="msg.tempID || msg.messageID"
+      :date="msg.created"
+      :admin="msg.creator.admin"
+      :username="msg.creator.username"
+      :uniqueID="msg.creator.uniqueID"
+      :avatar="msg.creator.avatar"
+      :message="msg.message"
+      :embed="msg.embed"
+      :files="msg.files"
+      :status="msg.status"
+      :messageID="msg.messageID"
+      :channelID="msg.channelID"
+      :type="msg.type"
+      :timeEdited="msg.timeEdited"
+    />
+    <!-- <div class="typing-list">
+      <message-typing
+        class="message-container"
+        :username="user.username"
+        :uniqueID="user.uniqueID"
+        :avatar="user.avatar"
+        :channelID="'5865686142508030876'"
+      />
+      <message-typing
+        class="message-container"
+        :username="user.username"
+        :uniqueID="user.uniqueID"
+        :avatar="user.avatar"
+        :channelID="'5865686142508030876'"
+      />
+    </div>-->
+    <div class="typing-outer">
+      <typing-status
+        v-if="typingRecipients[selectedChannelID]"
+        :recipients="typingRecipients[selectedChannelID]"
+      />
+    </div>
+    <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" />
+    <div
+      class="load-more-button"
+      v-if="loadMoreBottom.show && selectedChannelMessages.length >= 50"
+    >
+      <spinner :size="30" v-if="loadMoreBottom.loading" />
+      <div class="text" v-if="!loadMoreBottom.loading" @click="loadBottomMessages">Load more</div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -40,15 +63,17 @@ import Message from "../../components/app/MessageTemplate.vue";
 import Spinner from "@/components/Spinner.vue";
 import uploadsQueue from "@/components/app/uploadsQueue.vue";
 import debounce from "lodash/debounce";
+import TypingStatus from "@/components/app/TypingStatus.vue";
 
-import windowProperties from '@/utils/windowProperties';
-
+import windowProperties from "@/utils/windowProperties";
 
 export default {
+  props: ["typingRecipients"],
   components: {
     Message,
     Spinner,
     uploadsQueue,
+    TypingStatus
   },
   data() {
     return {
@@ -61,36 +86,52 @@ export default {
       },
       loadMoreBottom: {
         show: false,
-        loading: false,
+        loading: false
       },
       selectedChannelID: null,
       currentScrollTopPos: null,
-      backToBottomLoading: false,
+      backToBottomLoading: false
     };
   },
   methods: {
     scrollEvent: debounce(function(event) {
-      const { target: { scrollTop, clientHeight, scrollHeight} } = event;
-      this.scrolledDown = Math.abs(scrollHeight - scrollTop - clientHeight) <= 3.0;
+      const {
+        target: { scrollTop, clientHeight, scrollHeight }
+      } = event;
+      this.scrolledDown =
+        Math.abs(scrollHeight - scrollTop - clientHeight) <= 3.0;
       this.scrolledTop = scrollTop === 0;
       this.currentScrollTopPos = scrollTop;
     }, 20),
     scrollDown(data) {
-      const element = this.$refs['msg-logs']
+      const element = this.$refs["msg-logs"];
       const force = data && data.force ? data.force : false;
       const pos = data && data.pos ? data.pos : undefined;
       if (!force && !this.scrolledDown) return;
       if (!element) return;
       element.scrollTop = pos || element.scrollHeight;
     },
-    unloadTopMessages(){
-      if (this.selectedChannelMessages && this.selectedChannelMessages.length >= 100)
-        this.$store.dispatch('unloadTopMessages', {channelID: this.selectedChannelID});
+    unloadTopMessages() {
+      if (
+        this.selectedChannelMessages &&
+        this.selectedChannelMessages.length >= 100
+      )
+        this.$store.dispatch("unloadTopMessages", {
+          channelID: this.selectedChannelID
+        });
     },
-    unloadBottomMessages(){
-      if (this.selectedChannelMessages && this.selectedChannelMessages.length >= 100){
-        this.$store.dispatch('setBottomUnloadStatus', {channelID: this.selectedChannelID, status: true})
-        this.$store.dispatch('unloadBottomMessages', {channelID: this.selectedChannelID});
+    unloadBottomMessages() {
+      if (
+        this.selectedChannelMessages &&
+        this.selectedChannelMessages.length >= 100
+      ) {
+        this.$store.dispatch("setBottomUnloadStatus", {
+          channelID: this.selectedChannelID,
+          status: true
+        });
+        this.$store.dispatch("unloadBottomMessages", {
+          channelID: this.selectedChannelID
+        });
       }
     },
     onResize(dimentions) {
@@ -98,152 +139,163 @@ export default {
     },
     async loadMoreMessages() {
       if (this.loadMoreTop.loading) return;
-      const msgLogs = this.$refs['msg-logs'];
+      const msgLogs = this.$refs["msg-logs"];
       const scrollTop = msgLogs.scrollTop;
       const scrollHeight = msgLogs.scrollHeight;
 
       const continueMessageID = this.selectedChannelMessages[0].messageID;
-      this.$set(this.loadMoreTop, 'loading', true);
-      const {ok, result, error} = await messagesService.get(this.selectedChannelID, continueMessageID)
+      this.$set(this.loadMoreTop, "loading", true);
+      const { ok, result, error } = await messagesService.get(
+        this.selectedChannelID,
+        continueMessageID
+      );
       if (ok) {
         if (!result.data.messages.length) {
-          this.$set(this.loadMoreTop, 'loading', false);
-          this.$set(this.loadMoreTop, 'show', false);
+          this.$set(this.loadMoreTop, "loading", false);
+          this.$set(this.loadMoreTop, "show", false);
           return;
         }
-        this.$store.dispatch('addMessages', result.data.messages)
+        this.$store.dispatch("addMessages", result.data.messages);
         this.$nextTick(_ => {
-          this.$set(this.loadMoreTop, 'loading', false);
+          this.$set(this.loadMoreTop, "loading", false);
           msgLogs.scrollTop = msgLogs.scrollHeight - scrollHeight;
-        })
+        });
       }
     },
     async loadBottomMessages() {
       if (this.loadMoreBottom.loading) return;
-      const msgLogs = this.$refs['msg-logs'];
+      const msgLogs = this.$refs["msg-logs"];
       const scrollTop = msgLogs.scrollTop;
       const scrollHeight = msgLogs.scrollHeight;
       const channelID = this.selectedChannelID;
 
-
-      const beforeMessageID = this.selectedChannelMessages[this.selectedChannelMessages.length - 1].messageID;
-      this.$set(this.loadMoreBottom, 'loading', true);
-      const {ok, result, error} = await messagesService.get(channelID, null, beforeMessageID)
+      const beforeMessageID = this.selectedChannelMessages[
+        this.selectedChannelMessages.length - 1
+      ].messageID;
+      this.$set(this.loadMoreBottom, "loading", true);
+      const { ok, result, error } = await messagesService.get(
+        channelID,
+        null,
+        beforeMessageID
+      );
       if (ok) {
         if (!result.data.messages.length) {
-          this.$store.dispatch('setBottomUnloadStatus', {channelID, status: false})
-          this.$set(this.loadMoreBottom, 'loading', false);
-          this.$set(this.loadMoreBottom, 'show', false);
+          this.$store.dispatch("setBottomUnloadStatus", {
+            channelID,
+            status: false
+          });
+          this.$set(this.loadMoreBottom, "loading", false);
+          this.$set(this.loadMoreBottom, "show", false);
           return;
         }
-        this.$store.dispatch('addMessagesBefore', result.data.messages)
+        this.$store.dispatch("addMessagesBefore", result.data.messages);
 
         this.$nextTick(_ => {
-
-          this.$set(this.loadMoreBottom, 'loading', false);
+          this.$set(this.loadMoreBottom, "loading", false);
           this.scrolledDown = false;
-          msgLogs.scrollTop = scrollTop
-          this.$set(this.loadMoreBottom, 'show', true);
-        })
+          msgLogs.scrollTop = scrollTop;
+          this.$set(this.loadMoreBottom, "show", true);
+        });
       }
     },
     scrolledUpEvent() {
       this.unloadBottomMessages();
-      const msgLogs = this.$refs['msg-logs'];
+      const msgLogs = this.$refs["msg-logs"];
       const scrollTop = msgLogs.scrollTop;
       const scrollHeight = msgLogs.scrollHeight;
 
-      this.$set(this.loadMoreBottom, 'show', true);
-      
+      this.$set(this.loadMoreBottom, "show", true);
+
       this.$nextTick(_ => {
         msgLogs.scrollTop = 0;
-        if (this.loadMoreTop.show)
-          this.loadMoreMessages();
-      })
+        if (this.loadMoreTop.show) this.loadMoreMessages();
+      });
     },
-    scrolledDownEvent(){
-      this.unloadTopMessages()
-        this.$set(this.loadMoreTop, 'show', true);
-      this.$nextTick(_ => {     
-        if (this.loadMoreBottom.show)
-          this.loadBottomMessages();
-      })
+    scrolledDownEvent() {
+      this.unloadTopMessages();
+      this.$set(this.loadMoreTop, "show", true);
+      this.$nextTick(_ => {
+        if (this.loadMoreBottom.show) this.loadBottomMessages();
+      });
     },
     async backToBottomEvent() {
       if (this.backToBottomLoading) return;
       const channelID = this.selectedChannelID;
       const bottomUnloaded = this.bottomUnloaded;
       if (!bottomUnloaded) {
-        this.scrollDown({force: true});
+        this.scrollDown({ force: true });
         this.unloadTopMessages();
         return;
       }
       this.backToBottomLoading = true;
-      const {ok, result, error} = await messagesService.get(this.selectedChannelID)
+      const { ok, result, error } = await messagesService.get(
+        this.selectedChannelID
+      );
       if (ok) {
-        this.$store.dispatch('messages', {messages: result.data.messages.reverse(), channelID});
-        this.$set(this.loadMoreBottom, 'show', false);
-        this.$store.dispatch('setBottomUnloadStatus', {channelID, status: false})
-        this.$nextTick(_ => {this.scrollDown({force: true});})
-
+        this.$store.dispatch("messages", {
+          messages: result.data.messages.reverse(),
+          channelID
+        });
+        this.$set(this.loadMoreBottom, "show", false);
+        this.$store.dispatch("setBottomUnloadStatus", {
+          channelID,
+          status: false
+        });
+        this.$nextTick(_ => {
+          this.scrollDown({ force: true });
+        });
       }
       this.backToBottomLoading = false;
-    },
-    
+    }
   },
-  
+
   mounted() {
-    
     this.selectedChannelID = this.$store.getters.selectedChannelID;
     const pos = this.$store.getters.scrollPosition[this.selectedChannelID];
-    bus.$on('backToBottom', this.backToBottomEvent)
-    bus.$on('scrollDown', this.scrollDown)
-    bus.$emit('scrolledDown',this.scrolledDown);
+    bus.$on("backToBottom", this.backToBottomEvent);
+    bus.$on("scrollDown", this.scrollDown);
+    bus.$emit("scrolledDown", this.scrolledDown);
 
     if (this.bottomUnloaded) {
-      this.$set(this.loadMoreBottom, 'show', true);
+      this.$set(this.loadMoreBottom, "show", true);
     }
-    this.$nextTick( _ => {
-      this.scrollDown({force: pos, pos: pos});
-    })
-    
-
+    this.$nextTick(_ => {
+      this.scrollDown({ force: pos, pos: pos });
+    });
   },
 
   beforeDestroy() {
     this.$store.dispatch("setEditMessage", null);
-    this.$store.dispatch('changeScrollPosition',{
+    this.$store.dispatch("changeScrollPosition", {
       channelID: this.selectedChannelID,
       pos: !this.scrolledDown ? this.currentScrollTopPos : null
     });
-    bus.$off('backToBottom', this.backToBottomEvent);
-    bus.$off('scrollDown', this.scrollDown)
+    bus.$off("backToBottom", this.backToBottomEvent);
+    bus.$off("scrollDown", this.scrollDown);
   },
- 
+
   watch: {
-    selectedChannelMessages(newMessages, oldMessages){
-      this.$set(this.loadMoreTop, 'show', true);
-      const msgLogs = this.$refs['msg-logs'];
-      this.$nextTick(function () {
+    selectedChannelMessages(newMessages, oldMessages) {
+      this.$set(this.loadMoreTop, "show", true);
+      const msgLogs = this.$refs["msg-logs"];
+      this.$nextTick(function() {
         this.scrollDown();
-      })
+      });
     },
     uploadQueue() {
-      this.$nextTick(function () {
-        this.scrollDown({force: true});
-      })
+      this.$nextTick(function() {
+        this.scrollDown({ force: true });
+      });
     },
     getWindowWidth(dimentions) {
       this.onResize();
     },
     scrolledTop(scrolledTop) {
-      if (scrolledTop)
-        this.scrolledUpEvent();
+      if (scrolledTop) this.scrolledUpEvent();
     },
     scrolledDown(scrolledDown) {
-      bus.$emit('scrolledDown',scrolledDown);
-      if (scrolledDown)
-        this.scrolledDownEvent();
+      bus.$emit("scrolledDown", scrolledDown);
+      if (scrolledDown) this.scrolledDownEvent();
     }
   },
   computed: {
@@ -277,24 +329,34 @@ export default {
       return editMessage;
     },
     getWindowWidth() {
-      return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
+      return {
+        width: windowProperties.resizeWidth,
+        height: windowProperties.resizeHeight
+      };
     },
     scrollPosition() {
       return this.$store.getters.scrollPosition;
     },
     bottomUnloaded() {
-      return this.$store.getters.bottomUnloaded[this.selectedChannelID] || false;
+      return (
+        this.$store.getters.bottomUnloaded[this.selectedChannelID] || false
+      );
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-
+.typing-outer {
+  display: flex;
+  flex: 1;
+  height: 20px;
+  margin-bottom: 5px;
+  margin-left: 10px;
+}
 .message-logs {
   overflow: auto;
   flex: 1;
-  margin-right: 1px;
   position: relative;
 }
 
@@ -317,7 +379,7 @@ export default {
 }
 .back-to-bottom-button {
   &:hover {
-    background: rgb(23, 124, 255);  
+    background: rgb(23, 124, 255);
     box-shadow: 0px 0px 15px 0px #0000008a;
   }
   transition: 0.2s;
@@ -345,7 +407,6 @@ export default {
   }
 }
 
-
 .show-message-animation {
   animation: showMessage 0.3s ease-in-out;
 }
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index 0076184..ca6f40f 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -8,15 +8,26 @@
     <div class="loading" v-if="selectedChannelID && !selectedChannelMessages">
       <spinner />
     </div>
-    <message-logs v-else-if="selectedChannelID && selectedChannelMessages" :key="selectedChannelID" />
+    <message-logs
+      :typingRecipients="typingRecipients"
+      v-else-if="selectedChannelID && selectedChannelMessages"
+      :key="selectedChannelID"
+    />
     <div class="no-channel-selected" v-if="!selectedChannelID">
       <div class="material-icons">{{type === 0 ? 'chat' : type === 1 ? 'forum' : 'question'}}</div>
-      <div class="message">{{type === 0 ? 'Select a person to message!' : type === 1 ?'Select a server!' : "wot"}}</div>
+      <div
+        class="message"
+      >{{type === 0 ? 'Select a person to message!' : type === 1 ?'Select a server!' : "wot"}}</div>
     </div>
+
     <div class="chat-input-area" v-if="selectedChannelID">
       <div style="position: relative;">
         <transition name="show-up">
-          <div class="back-to-bottom-button" @click="backToTopButton" v-if="!scrolledDown && selectedChannelMessages">
+          <div
+            class="back-to-bottom-button"
+            @click="backToTopButton"
+            v-if="!scrolledDown && selectedChannelMessages"
+          >
             Back to bottom
             <i class="material-icons">keyboard_arrow_down</i>
           </div>
@@ -26,6 +37,14 @@
       </div>
 
       <edit-panel v-if="editMessage" :data="editMessage" />
+      <div class="seperater" />
+      <!-- <div class="info">
+
+        <div
+          v-if=" messageLength >= 4500 && (sendMessagePermission === true || editMessage)"
+          :class="{'message-count': true, 'error-info': messageLength > 5000 }"
+        >{{messageLength}}/5000</div>
+      </div>-->
       <div class="message-area" v-if="sendMessagePermission === true || editMessage">
         <input type="file" ref="sendFileBrowse" @change="attachmentChange" class="hidden" />
         <div class="attachment-button" @click="attachmentButton">
@@ -52,21 +71,17 @@
           @click="editMessage ? updateMessage() : sendMessage()"
         >
           <i class="material-icons">{{editMessage ? 'edit' : 'send'}}</i>
+          <div
+            v-if=" messageLength >= 4500 && (sendMessagePermission === true || editMessage)"
+            :class="{'message-count': true, 'error-info': messageLength > 5000 }"
+          >{{messageLength}} / 5000</div>
         </button>
       </div>
-      <div class="info">
-        <div class="typing-outer">
-          <typing-status
-            v-if="typingRecipients[selectedChannelID]"
-            :recipients="typingRecipients[selectedChannelID]"
-          />
-        </div>
-        <div v-if=" messageLength >= 4500 && (sendMessagePermission === true || editMessage)"
-          :class="{'message-count': true, 'error-info': messageLength > 5000 }"
-        >{{messageLength}}/5000</div>
-      </div>
     </div>
-    <div class="no-message-permission" v-if="sendMessagePermission === false">You don't have permission to send messages in this channel.</div>
+    <div
+      class="no-message-permission"
+      v-if="sendMessagePermission === false"
+    >You don't have permission to send messages in this channel.</div>
   </div>
 </template>
 
@@ -76,21 +91,19 @@ import typingService from "@/services/TypingService";
 import { bus } from "../../main";
 import JQuery from "jquery";
 import Spinner from "@/components/Spinner.vue";
-import TypingStatus from "@/components/app/TypingStatus.vue";
 import heading from "@/components/app/MessagePanel/Heading.vue";
 import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue";
 import MessageLogs from "@/components/app/MessageLogs.vue";
-import emojiParser from "@/utils/emojiParser.js"; 
+import emojiParser from "@/utils/emojiParser.js";
 import windowProperties from "@/utils/windowProperties";
 
 const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue");
 const EditPanel = () => import("@/components/app/EditPanel.vue");
 
 export default {
-  props: ['type'], // type 0: dm; type 1: server
+  props: ["type"], // type 0: dm; type 1: server
   components: {
     Spinner,
-    TypingStatus,
     emojiSuggestions,
     emojiPanel,
     heading,
@@ -243,7 +256,7 @@ export default {
         input.style.height = "auto";
         input.style.height = `calc(${input.scrollHeight}px - 1em)`;
       }
-      bus.$emit('scrollDown');  
+      bus.$emit("scrollDown");
     },
     emojiSwitchKey(event) {
       if (!this.emojiArray) return;
@@ -449,10 +462,12 @@ export default {
       }
     },
     backToTopButton() {
-      bus.$emit('backToBottom');
+      bus.$emit("backToBottom");
     },
     editMessageEvent(editMessage) {
-      this.message = editMessage ? emojiParser.emojiToShortcode(editMessage.message) : ''; 
+      this.message = editMessage
+        ? emojiParser.emojiToShortcode(editMessage.message)
+        : "";
     },
     onBlur() {
       clearTimeout(this.postTimerID);
@@ -469,7 +484,6 @@ export default {
         user.unique_id === this.user.uniqueID
       )
         return;
-
       if (typingRecipients === undefined) {
         this.$set(this.typingRecipients, channel_id, {
           [user.unique_id]: { username: user.username }
@@ -494,11 +508,11 @@ export default {
     bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion);
     bus.$on("emojiPanel:Selected", this.enterEmojiPanel);
 
-    bus.$on('scrolledDown', (scrolledDown) => {
+    bus.$on("scrolledDown", scrolledDown => {
       this.scrolledDown = scrolledDown;
-    })
+    });
 
-    window.addEventListener('blur', this.onBlur)
+    window.addEventListener("blur", this.onBlur);
     window.addEventListener("focus", this.onFocus);
   },
 
@@ -520,7 +534,7 @@ export default {
     },
     message(message) {
       this.messageLength = message.length;
-      this.$nextTick(this.resize)
+      this.$nextTick(this.resize);
     }
   },
   computed: {
@@ -544,16 +558,19 @@ export default {
     channel() {
       return this.$store.getters.channels[this.selectedChannelID];
     },
-    server () {
+    server() {
       if (!this.channel) return false;
       if (!this.channel.server_id) return false;
-      return this.$store.getters["servers/servers"][this.channel.server_id] || undefined;
+      return (
+        this.$store.getters["servers/servers"][this.channel.server_id] ||
+        undefined
+      );
     },
     sendMessagePermission() {
       if (this.type !== 1) return true;
-      if (!this.channel) return null
+      if (!this.channel) return null;
 
-      if (!this.server)  return false;
+      if (!this.server) return false;
 
       if (this.server.creator.uniqueID === this.user.uniqueID) return true;
       if (!this.channel.permissions) return true;
@@ -591,7 +608,7 @@ export default {
         width: windowProperties.resizeWidth,
         height: windowProperties.resizeHeight
       };
-    },
+    }
   }
 };
 </script>
@@ -636,7 +653,6 @@ export default {
 .right-panel {
   height: 100%;
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.650);
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -646,7 +662,6 @@ export default {
 .message-logs {
   overflow: auto;
   flex: 1;
-  margin-right: 2px;
   position: relative;
 }
 
@@ -657,8 +672,7 @@ export default {
 .chat-input-area {
   display: flex;
   flex-direction: column;
-  padding-top: 5px;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
   position: relative;
 }
 
@@ -682,23 +696,24 @@ export default {
   }
 }
 
+.seperater {
+  height: 1px;
+  width: calc(100% - 10px);
+  align-self: center;
+  background-color: #a0c8d5;
+  flex-shrink: 0;
+  margin-bottom: 10px;
+}
 .chat-input-area .info {
   color: rgba(255, 255, 255, 0.466);
   font-size: 12px;
-  margin-left: 25px;
+  margin-left: 13px;
   margin-top: 5px;
   display: flex;
 }
 
-.typing-outer {
-  flex: 1;
-  height: 20px;
-}
-
 .message-count {
-  float: right;
-  margin-right: 20px;
-  margin-top: 3px;
+  font-size: 15px;
 }
 
 .message-area {
@@ -724,7 +739,7 @@ export default {
   max-height: 30vh;
   overflow-y: auto;
   &:hover {
-    background: rgba(255, 255, 255, 0.10);
+    background: rgba(255, 255, 255, 0.1);
   }
 
   &:focus {
@@ -744,9 +759,12 @@ export default {
   width: 50px;
   transition: 0.3s;
   display: flex;
+  flex-direction: column;
   flex-shrink: 0;
   user-select: none;
+  overflow: hidden;
   cursor: pointer;
+  align-items: center;
   .material-icons {
     margin: auto;
   }
@@ -780,7 +798,7 @@ export default {
     margin: auto;
   }
   &:hover {
-  background: rgba(255, 255, 255, 0.13);
+    background: rgba(255, 255, 255, 0.13);
   }
 }
 
diff --git a/src/components/app/MessagePanel/Heading.vue b/src/components/app/MessagePanel/Heading.vue
index c298e2e..ddd57b2 100644
--- a/src/components/app/MessagePanel/Heading.vue
+++ b/src/components/app/MessagePanel/Heading.vue
@@ -61,7 +61,7 @@ export default {
 
 <style scoped>
 .heading {
-  background: rgba(0, 0, 0, 0.185);
+  background: #112c30;
   margin-bottom: 0;
   height: 50px;
   display: flex;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 39c11f1..cff6b00 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -18,10 +18,7 @@
       </div>
       <div class="content" @dblclick="contentDoubleClickEvent">
         <div class="user-info">
-          <div
-            class="username"
-            @click="openUserInformation"
-          >{{ this.$props.username }}</div>
+          <div class="username" @click="openUserInformation">{{ this.$props.username }}</div>
           <div class="date">{{ getDate }}</div>
         </div>
         <div class="content-message" v-html="formatMessage" />
@@ -135,7 +132,8 @@ export default {
         channelID: this.channelID,
         messageID: this.messageID,
         message: this.message,
-        uniqueID: this.uniqueID
+        uniqueID: this.uniqueID,
+        type: this.type
       });
     },
     openUserInformation() {
@@ -285,7 +283,7 @@ export default {
 }
 .presence-message {
   margin: 10px;
-  display: flex; 
+  display: flex;
   color: white;
   overflow: hidden;
 }
@@ -296,10 +294,9 @@ export default {
   color: white;
   overflow: hidden;
   border-radius: 5px;
-  background: rgba(0, 0, 0, 0.356);
+  background: #0a1a1c;
 }
 
-
 .presence-message .text {
   margin-left: 5px;
   font-size: 15px;
@@ -330,7 +327,6 @@ export default {
   border-right: none !important;
 }
 
-
 .ownMessageLeft .avatar {
   margin-right: 0px;
   margin-left: 5px;
@@ -352,14 +348,13 @@ export default {
   background: rgba(184, 184, 184, 0.219);
 }
 
-
 .ownMessage .date {
   color: rgb(209, 209, 209);
 }
 
 .file-content {
   display: flex;
-  background: rgba(0, 0, 0, 0.089);
+  background: #0a1a1c;
   padding: 10px;
   margin-top: 5px;
 }
@@ -410,11 +405,11 @@ export default {
   height: 0;
   border-top: 9px solid transparent;
   border-bottom: 0px solid transparent;
-  border-right: 8px solid rgba(0, 0, 0, 0.301);
+  border-right: 8px solid #0a1a1c;
 }
 
 .content {
-  background: rgba(0, 0, 0, 0.301);
+  background: #0a1a1c;
   padding: 10px;
   display: flex;
   justify-content: center;
@@ -433,7 +428,7 @@ export default {
   margin-top: 10px;
   padding: 5px;
   border-radius: 5px;
-  background: rgba(0, 0, 0, 0.493);
+  background: #1d2c2e;
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index 1080327..b9baa1e 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -6,27 +6,16 @@
       :admin="user.admin"
       size="40px"
       :hover="true"
-      @click.native="openUserInformation" 
+      @click.native="openUserInformation"
     />
     <div class="information">
       <div class="username">{{user.username}}</div>
       <div class="tag">@{{user.tag}}</div>
     </div>
-    <div 
-      class="status-button"
-      @click="status.isPoppedOut = !status.isPoppedOut"
-    >
-      <statusList
-        v-if="status.isPoppedOut"
-        v-click-outside="closeMenus"
-        class="status-popout"
-      />
-      <img
-        class="status"
-        :src="getStatus"
-      />
+    <div class="status-button" @click="status.isPoppedOut = !status.isPoppedOut">
+      <statusList v-if="status.isPoppedOut" v-click-outside="closeMenus" class="status-popout" />
+      <img class="status" :src="getStatus" />
     </div>
-
   </div>
 </template>
 
@@ -36,7 +25,7 @@ import config from "@/config.js";
 import statusList from "../../components/app/statusList.vue";
 import settingsService from "@/services/settingsService";
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
-import statuses from '@/utils/statuses';
+import statuses from "@/utils/statuses";
 
 export default {
   components: {
@@ -63,8 +52,8 @@ export default {
         0}.svg`);
     },
     getStatusColor() {
-      const status = this.$store.getters.user.status || 0
-      return statuses[parseInt(status)].bgColor
+      const status = this.$store.getters.user.status || 0;
+      return statuses[parseInt(status)].bgColor;
     }
   },
   created() {
@@ -76,10 +65,10 @@ export default {
   },
   methods: {
     openUserInformation() {
-      this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
+      this.$store.dispatch("setUserInformationPopout", this.user.uniqueID);
     },
     closeMenus(event) {
-      if (event.target.closest('.status-button')) return;
+      if (event.target.closest(".status-button")) return;
       this.status.isPoppedOut = false;
     },
     openSurvey() {
@@ -94,8 +83,7 @@ export default {
       if (ok && result.data.status == true) {
         this.$store.dispatch("changeStatus", result.data.set);
       }
-    },
-
+    }
   }
 };
 </script>
@@ -103,11 +91,9 @@ export default {
 
 
 <style scoped lang="scss">
-
 .my-mini-information {
   display: flex;
   position: relative;
-  background: rgba(0, 0, 0, 0.5);
   flex-shrink: 0;
   align-items: center;
   height: 60px;
@@ -127,26 +113,28 @@ export default {
   margin-left: 5px;
   overflow: hidden;
   flex: 1;
-  .username, .tag {
+  .username,
+  .tag {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .tag {
     font-size: 13px;
-    color: rgb(187, 187, 187);
+    color: #b2d1d9;
   }
 }
 
-
 .status-button {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 60px;
-  width: 60px;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
   transition: 0.2s;
   margin-left: 3px;
+  margin-right: 5px;
   user-select: none;
   cursor: pointer;
   .status {
@@ -155,9 +143,7 @@ export default {
     flex-shrink: 0;
   }
   &:hover {
-    background: rgba(44, 44, 44, 0.596);
+    background: rgba(0, 0, 0, 0.3);
   }
 }
-
-
 </style>
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index 197cc63..3532be3 100644
--- a/src/components/app/Navigation.vue
+++ b/src/components/app/Navigation.vue
@@ -176,10 +176,10 @@ export default {
       });
     },
     addFriend() {
-      this.$store.dispatch('setAllPopout', {
+      this.$store.dispatch("setAllPopout", {
         show: true,
-        type: "ADD_FRIEND",
-      })
+        type: "ADD_FRIEND"
+      });
     },
     openSurvey() {
       this.$store.dispatch("setPopoutVisibility", {
@@ -264,7 +264,7 @@ export default {
   flex-shrink: 0;
   height: 100%;
   width: 60px;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: #085053;
 }
 
 .container {
@@ -311,11 +311,10 @@ export default {
   opacity: 0.8;
   transition: 0.2s;
   &:hover {
-    background: rgba(255, 255, 255, 0.07);
+    background: #074447;
   }
   &.selected {
-    background: rgba(255, 255, 255, 0.13);
-    opacity: 1;
+    background: #042a2b;
   }
 }
 
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
index cb62a9b..dd0965a 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
@@ -7,24 +7,49 @@
           <div class="outer-input">
             <div class="title">Username</div>
             <div class="user-tag">
-              <input type="text" class="username" :default-value.prop="user.username" @input="inputEvent('username', $event)"/>
+              <input
+                type="text"
+                class="username"
+                :default-value.prop="user.username"
+                @input="inputEvent('username', $event)"
+              />
 
-              <input type="text" class="tag" :default-value.prop="user.tag" @input="inputEvent('tag', $event)"/>
+              <input
+                type="text"
+                class="tag"
+                :default-value.prop="user.tag"
+                @input="inputEvent('tag', $event)"
+              />
             </div>
           </div>
           <div class="outer-input">
             <div class="title">Email</div>
-            <input type="email" autocomplete="off" :default-value.prop="user.email" @input="inputEvent('email', $event)"/>
+            <input
+              type="email"
+              autocomplete="off"
+              :default-value.prop="user.email"
+              @input="inputEvent('email', $event)"
+            />
           </div>
           <div class="outer-input">
             <div class="title">Current Password</div>
-            <input type="password" autocomplete="new-password" ref="passwordInput" @input="inputEvent('password', $event)" />
+            <input
+              type="password"
+              autocomplete="new-password"
+              ref="passwordInput"
+              @input="inputEvent('password', $event)"
+            />
           </div>
           <div class="link" v-if="!resetPassword" @click="resetPassword = true">Reset Password</div>
           <div class="outer-input" v-if="resetPassword">
             <div class="title">New Password</div>
-            <input type="password" autocomplete="new-password" @input="inputEvent('new_password', $event)" />
+            <input
+              type="password"
+              autocomplete="new-password"
+              @input="inputEvent('new_password', $event)"
+            />
           </div>
+          <div class="link" @click="linkGoogleDrive">Re-link Google Drive</div>
         </form>
       </div>
 
@@ -45,11 +70,16 @@
             accept=".jpeg, .jpg, .png, .gif"
             class="hidden"
             @change="avatarChangeEvent"
-          >
+          />
         </div>
       </div>
     </div>
-    <div class="button save-button" :class="{disabled: requestSent}" @click="updateProfile" v-if="changed">{{requestSent ? 'Saving...' : 'Update'}}</div>
+    <div
+      class="button save-button"
+      :class="{disabled: requestSent}"
+      @click="updateProfile"
+      v-if="changed"
+    >{{requestSent ? 'Saving...' : 'Update'}}</div>
   </div>
 </template>
 
@@ -69,12 +99,12 @@ export default {
       changed: false,
       resetPassword: false,
       update: {},
-      key: 0,
+      key: 0
     };
   },
   methods: {
     inputEvent(name, event) {
-      this.$set(this.update, name, event.target.value)
+      this.$set(this.update, name, event.target.value);
     },
     avatarChangeEvent(event) {
       if (!this.googleDriveLinked) {
@@ -86,62 +116,77 @@ export default {
       }
       const file = event.target.files[0];
       const _this = this;
-      const maxSize = 2092000; 
+      const maxSize = 2092000;
       if (file.size > maxSize) {
-        return this.$store.dispatch('setGenericMessage', "Image is larger than 2MB") 
+        return this.$store.dispatch(
+          "setGenericMessage",
+          "Image is larger than 2MB"
+        );
       }
       event.target.value = "";
       const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
       if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
-        return this.$store.dispatch('setGenericMessage', "That file format is not allowed!"); 
+        return this.$store.dispatch(
+          "setGenericMessage",
+          "That file format is not allowed!"
+        );
       }
       let reader = new FileReader();
       reader.readAsDataURL(file);
-      
-      reader.onload = function () {
-        _this.$set(_this.update, 'avatar', reader.result);
+
+      reader.onload = function() {
+        _this.$set(_this.update, "avatar", reader.result);
       };
-      reader.onerror = function (error) {
-        console.log('Error: ', error);
-        return this.$store.dispatch('setGenericMessage', "Something went wrong. Try again later.") 
+      reader.onerror = function(error) {
+        console.log("Error: ", error);
+        return this.$store.dispatch(
+          "setGenericMessage",
+          "Something went wrong. Try again later."
+        );
       };
     },
     async updateProfile() {
       if (this.requestSent) return;
       this.errors = null;
       this.requestSent = true;
-      const {ok, result, error} = await userService.update(this.update) 
+      const { ok, result, error } = await userService.update(this.update);
       if (!ok) {
         if (error.response === undefined) {
-          this.errors = { message: 'Cant connect to server' }
+          this.errors = { message: "Cant connect to server" };
           return;
         }
         const data = error.response.data;
         if (data.message) {
-          this.errors = [{msg: data.message}];
+          this.errors = [{ msg: data.message }];
           return;
         }
         this.errors = data.errors;
       } else {
-        this.$refs['passwordInput'].value = "";
-        this.resetPassword = false
-        this.$set(this, 'update', {})
+        this.$refs["passwordInput"].value = "";
+        this.resetPassword = false;
+        this.$set(this, "update", {});
         this.key = Math.random();
       }
       this.requestSent = false;
+    },
+    linkGoogleDrive() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "GDLinkMenu",
+        visibility: true
+      });
     }
   },
   watch: {
     update(obj) {
-      if ( Object.keys(obj).length === 0 ){
-        return this.changed = false
+      if (Object.keys(obj).length === 0) {
+        return (this.changed = false);
       }
       this.changed = true;
     }
   },
   computed: {
     googleDriveLinked() {
-      return this.$store.getters['settingsModule/settings'].GDriveLinked
+      return this.$store.getters["settingsModule/settings"].GDriveLinked;
     },
     avatar() {
       return config.domain + "/avatars/" + this.$store.getters.user.avatar;
@@ -283,5 +328,4 @@ export default {
     text-align: center;
   }
 }
-
 </style>
\ No newline at end of file
diff --git a/src/components/app/Popouts/Popouts/messageContextMenu.vue b/src/components/app/Popouts/Popouts/messageContextMenu.vue
index 646dfb8..3dc3848 100644
--- a/src/components/app/Popouts/Popouts/messageContextMenu.vue
+++ b/src/components/app/Popouts/Popouts/messageContextMenu.vue
@@ -1,27 +1,29 @@
 <template>
   <div class="drop-down-menu" v-click-outside="outsideClick">
-    <div class="item" @click="copyMessage" >Copy</div>
-    <div class="item" @click="editMessage" v-if="showEditOption">Edit</div>
+    <div class="item" @click="copyMessage" v-if="!isPrecense">Copy</div>
+    <div class="item" @click="editMessage" v-if="showEditOption && !isPrecense">Edit</div>
     <div class="item warn" @click="deleteMessage" v-if="showDeleteOption">Delete</div>
   </div>
 </template>
 
 
 <script>
-import messagesService from '@/services/messagesService';
+import messagesService from "@/services/messagesService";
 export default {
   data() {
-    return {
-
-    };
+    return {};
   },
   methods: {
     closeMenu() {
-      this.$store.dispatch('setMessageContext', {messageID: null, x: null, y: null});
+      this.$store.dispatch("setMessageContext", {
+        messageID: null,
+        x: null,
+        y: null
+      });
     },
     outsideClick(event) {
       const target = event.target;
-      if (target.closest('.drop-down-button')) return;
+      if (target.closest(".drop-down-button")) return;
       this.closeMenu();
     },
     editMessage() {
@@ -37,14 +39,17 @@ export default {
       this.closeMenu();
     },
     async deleteMessage() {
-      messagesService.delete(this.contextDetails.messageID, this.contextDetails.channelID);
+      messagesService.delete(
+        this.contextDetails.messageID,
+        this.contextDetails.channelID
+      );
       this.closeMenu();
     },
     setPosition() {
       const y = this.contextDetails.y + 20;
       const x = this.contextDetails.x - 20;
 
-      this.$el.style.top = y  + "px";
+      this.$el.style.top = y + "px";
       this.$el.style.left = x + "px";
     }
   },
@@ -58,45 +63,62 @@ export default {
   },
   computed: {
     contextDetails() {
-      const { x, y, messageID, message, channelID, uniqueID } = this.$store.getters.popouts.messageContextMenu;
-      return { 
+      const {
         x,
         y,
         messageID,
         message,
         channelID,
-        uniqueID
-      }
+        uniqueID,
+        type
+      } = this.$store.getters.popouts.messageContextMenu;
+      return {
+        x,
+        y,
+        messageID,
+        message,
+        channelID,
+        uniqueID,
+        type
+      };
     },
     serverID() {
-      const serverChannelIDs = Object.entries(this.$store.getters['servers/channelsIDs']);
+      const serverChannelIDs = Object.entries(
+        this.$store.getters["servers/channelsIDs"]
+      );
       const find = serverChannelIDs.find(c => {
-        return c[1].includes(this.contextDetails.channelID)
+        return c[1].includes(this.contextDetails.channelID);
       });
-      return find ? find[0] : undefined; 
+      return find ? find[0] : undefined;
     },
-    serverMember () {
-      const serverMembers = this.$store.getters['servers/serverMembers'];
-      return serverMembers.find(m => 
-        m.uniqueID === this.user.uniqueID && m.server_id === this.serverID && m.type === "OWNER"
-      )
+    serverMember() {
+      const serverMembers = this.$store.getters["servers/serverMembers"];
+      return serverMembers.find(
+        m =>
+          m.uniqueID === this.user.uniqueID &&
+          m.server_id === this.serverID &&
+          m.type === "OWNER"
+      );
     },
     user() {
       return this.$store.getters.user;
     },
+    //if precense
+    isPrecense() {
+      return this.contextDetails.type >= 1;
+    },
     showEditOption() {
       // Only show edit option if the user is us.
-      return this.user.uniqueID === this.contextDetails.uniqueID
+      return this.user.uniqueID === this.contextDetails.uniqueID;
     },
     showDeleteOption() {
       // Only show delete option if the user is us or server owner is us.
-      if (this.user.uniqueID === this.contextDetails.uniqueID){
+      if (this.user.uniqueID === this.contextDetails.uniqueID) {
         return true;
       }
       return !!this.serverMember;
     }
-  },
-
+  }
 };
 </script>
 
@@ -125,5 +147,4 @@ export default {
     color: rgb(255, 59, 59);
   }
 }
-
 </style>
diff --git a/src/components/app/Popouts/Popouts/userInformationPopout.vue b/src/components/app/Popouts/Popouts/userInformationPopout.vue
index b9ddf69..6a6649d 100644
--- a/src/components/app/Popouts/Popouts/userInformationPopout.vue
+++ b/src/components/app/Popouts/Popouts/userInformationPopout.vue
@@ -1,67 +1,102 @@
 <template>
-  <div
-    class="drop-background"
-    @click="backgroundClickEvent"
-  >
+  <div class="drop-background" @click="backgroundClickEvent">
     <div class="box">
       <div class="back-button" @click="close">
-        <div class="material-icons">
-        keyboard_arrow_left
-        </div>
+        <div class="material-icons">keyboard_arrow_left</div>
       </div>
       <spinner class="spinner" v-if="!user" />
       <div class="inner" v-if="user">
         <div class="profile">
-          <profile-picture
-            class="avatar"
-            size="120px"
-            :url="`${avatarDomain}${user.avatar}`"
-          />
+          <profile-picture class="avatar" size="120px" :url="`${avatarDomain}${user.avatar}`" />
           <div class="uesrname-tag">
             <div class="username">{{user.username}}</div>
             <div class="tag">@{{user.tag}}</div>
-          </div> 
-            <!-- <div class="details">
+          </div>
+          <!-- <div class="details">
               Pancake • Male • 17-19 • United Kingdom
-            </div>  -->
-            <div class="actions" v-if="uniqueID !== selfUniqueID">
-              <div class="action-buttons">
-                <div class="button" v-if="this.relationshipStatus === null" @click="AddFriendButton"><div class="material-icons">person_add</div><div>Add Friend</div></div>  
-                <div class="button" v-if="this.relationshipStatus === 0" @click="RemoveFriendButton"><div class="material-icons">hourglass_empty</div><div>Request Sent</div></div>  
-                <div class="button green" v-if="this.relationshipStatus === 1" @click="AcceptFriendButton"><div class="material-icons">check</div><div>Accept Friend</div></div>
-                <div class="button" @click="openChat"><div class="material-icons">message</div><div>Message</div></div>  
-                <div class="button warn" v-if="this.relationshipStatus === 2" @click="RemoveFriendButton"><div class="material-icons">person_add_disabled</div><div>Remove Friend</div></div>
-                <div class="button warn"><div class="material-icons">block</div><div>Block</div></div>
+          </div>-->
+          <div class="actions" v-if="uniqueID !== selfUniqueID">
+            <div class="action-buttons">
+              <div class="button" v-if="this.relationshipStatus === null" @click="AddFriendButton">
+                <div class="material-icons">person_add</div>
+                <div>Add Friend</div>
+              </div>
+              <div class="button" v-if="this.relationshipStatus === 0" @click="RemoveFriendButton">
+                <div class="material-icons">hourglass_empty</div>
+                <div>Request Sent</div>
+              </div>
+              <div
+                class="button green"
+                v-if="this.relationshipStatus === 1"
+                @click="AcceptFriendButton"
+              >
+                <div class="material-icons">check</div>
+                <div>Accept Friend</div>
+              </div>
+              <div class="button" @click="openChat">
+                <div class="material-icons">message</div>
+                <div>Message</div>
+              </div>
+              <div
+                class="button warn"
+                v-if="this.relationshipStatus === 2"
+                @click="RemoveFriendButton"
+              >
+                <div class="material-icons">person_add_disabled</div>
+                <div>Remove Friend</div>
+              </div>
+              <div class="button warn">
+                <div class="material-icons">block</div>
+                <div>Block</div>
               </div>
             </div>
+          </div>
         </div>
         <div class="scrollable">
           <div class="badges" v-if="user.badges && filteredBadges.length">
             <div class="title">Badges</div>
             <div class="badges-list">
-              <div class="badge" v-for="(badge, index) of filteredBadges" v-bind:style="{ 'border-color': badges[badge].color }" :key="index">
-                <img class="icon" :src="badges[badge].icon"/>
+              <div
+                class="badge"
+                v-for="(badge, index) of filteredBadges"
+                v-bind:style="{ 'border-color': badges[badge].color }"
+                :key="index"
+              >
+                <img class="icon" :src="badges[badge].icon" />
                 <div class="name">{{badges[badge].name}}</div>
               </div>
             </div>
           </div>
-          <div class="about-me" v-if="aboutMe">
+          <div class="about-me">
             <div class="title">Profile</div>
-            <div class="about-item" v-for="(aboutItem) of aboutMe" :key="aboutItem.name" :class="{infoAboutMe: aboutItem.key === 'About me'}">
-              <div class="key">{{aboutItem.key}}: </div>
+            <div
+              v-if="aboutMe"
+              class="about-item"
+              v-for="(aboutItem) of aboutMe"
+              :key="aboutItem.name"
+              :class="{infoAboutMe: aboutItem.key === 'About me'}"
+            >
+              <div class="key">{{aboutItem.key}}:</div>
               <div class="emoji" v-if="aboutItem.emoji" v-html="aboutItem.emoji"></div>
-              <div class="name" v-if="aboutItem.key === 'About me'" v-html="formatAboutMe(aboutItem.name)"></div>
+              <div
+                class="name"
+                v-if="aboutItem.key === 'About me'"
+                v-html="formatAboutMe(aboutItem.name)"
+              ></div>
               <div class="name" v-else>{{aboutItem.name}}</div>
             </div>
+            <div class="about-item">
+              <div class="key">Joined:</div>
+              <div class="name">{{joinedDate}}</div>
+            </div>
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
 <script>
-import {bus} from '@/main'
+import { bus } from "@/main";
 import config from "@/config.js";
 import Spinner from "@/components/Spinner.vue";
 import profilePicture from "@/components/ProfilePictureTemplate.vue";
@@ -71,6 +106,7 @@ import surveyItems from "@/utils/surveyItems.js";
 import emojiParser from "@/utils/emojiParser.js";
 import messageFormatter from "@/utils/messageFormatter.js";
 import badges from "@/utils/Badges";
+import friendlyDate from "@/utils/date";
 
 export default {
   components: { Spinner, profilePicture },
@@ -108,7 +144,7 @@ export default {
       );
     },
     openChat() {
-      this.$store.dispatch('setCurrentTab', 1)
+      this.$store.dispatch("setCurrentTab", 1);
       this.$store.dispatch("openChat", {
         uniqueID: this.uniqueID,
         channelName: this.user.username
@@ -122,9 +158,9 @@ export default {
     formatAboutMe(string) {
       return messageFormatter(string);
     },
-    capitalize(s){
-      if (typeof s !== 'string') return ''
-      return s.charAt(0).toUpperCase() + s.slice(1)
+    capitalize(s) {
+      if (typeof s !== "string") return "";
+      return s.charAt(0).toUpperCase() + s.slice(1);
     }
   },
   async mounted() {
@@ -134,26 +170,34 @@ export default {
     }
   },
   computed: {
-    aboutMe(){
-      const about_me = this.user.about_me
+    joinedDate() {
+      return friendlyDate(this.user.created);
+    },
+    aboutMe() {
+      const about_me = this.user.about_me;
       if (!about_me) return null;
       if (about_me._id) delete about_me._id;
       const arr = [];
       for (let index in about_me) {
-        const item = {key: this.capitalize(index.replace('_', " ")), name: about_me[index]};
-        if (item.name && item.name.length && item.name !== "Rather not say"){
-          if (surveyItems.constants[index]){
-            const i = surveyItems[surveyItems.constants[index]].find(i => i.name === item.name);
-            item.emoji = i ? this.emojiParse(i.emoji) : undefined; 
+        const item = {
+          key: this.capitalize(index.replace("_", " ")),
+          name: about_me[index]
+        };
+        if (item.name && item.name.length && item.name !== "Rather not say") {
+          if (surveyItems.constants[index]) {
+            const i = surveyItems[surveyItems.constants[index]].find(
+              i => i.name === item.name
+            );
+            item.emoji = i ? this.emojiParse(i.emoji) : undefined;
           }
-          arr.push(item)
+          arr.push(item);
         }
       }
-      return arr
+      return arr;
     },
     filteredBadges() {
       if (!this.user.badges) return;
-        return this.user.badges.filter(b => this.badges[b])
+      return this.user.badges.filter(b => this.badges[b]);
     },
     selfUniqueID() {
       return this.$store.getters.user.uniqueID;
@@ -167,14 +211,10 @@ export default {
       if (!allFriend[userUniqueID]) return null;
       return allFriend[userUniqueID].status;
     }
-  },
-
+  }
 };
 </script>
 <style scoped>
-
-
-
 .drop-background {
   position: absolute;
   background: rgba(0, 0, 0, 0.2);
@@ -194,21 +234,13 @@ export default {
   display: flex;
   flex-direction: row;
   position: relative;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(10px);
   box-shadow: 0px 0px 20px 11px #151515c4;
+  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 
-@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
-  .box{
-    background: rgba(0, 0, 0, 0.3);
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-  }
-}
-
-
-
 .spinner {
   align-self: center;
 }
@@ -229,7 +261,7 @@ export default {
   scrollbar-width: thin;
 }
 .scrollable::-webkit-scrollbar {
-    width: 3px;
+  width: 3px;
 }
 .profile {
   display: flex;
@@ -254,11 +286,11 @@ export default {
   user-select: auto !important;
 }
 .tag {
-  color: rgb(139, 139, 139);
+  color: #ccdadd;
 }
 
 .button {
-  padding: 8px; 
+  padding: 8px;
   align-self: center;
   user-select: none;
   cursor: default;
@@ -267,8 +299,8 @@ export default {
   z-index: 1;
   cursor: pointer;
 }
-.button::after{
-  content: '';
+.button::after {
+  content: "";
   position: absolute;
   top: 0;
   bottom: 0;
@@ -286,17 +318,17 @@ export default {
   opacity: 1;
 }
 
-.badges{
+.badges {
   display: flex;
   flex-direction: column;
   width: 100%;
   margin-top: 10px;
 
-  border-bottom: solid 2px rgba(0, 0, 0, 0.3);
+  border-bottom: solid 1px #84b7be;
   padding-bottom: 10px;
   user-select: none;
   cursor: default;
-  flex-shrink: 0
+  flex-shrink: 0;
 }
 .actions {
   display: flex;
@@ -306,14 +338,14 @@ export default {
 
   user-select: none;
   cursor: default;
-  flex-shrink: 0
+  flex-shrink: 0;
 }
 .title {
   font-size: 20px;
   margin-bottom: 3px;
   margin-left: 10px;
 }
-.badges-list{
+.badges-list {
   display: flex;
   flex-wrap: wrap;
   flex-shrink: 0;
@@ -328,7 +360,7 @@ export default {
   border-radius: 6px;
   margin: 3px;
   display: flex;
-  flex-shrink: 0
+  flex-shrink: 0;
 }
 .badge .name {
   margin-top: 1px;
@@ -344,25 +376,26 @@ export default {
   width: 20px;
 }
 
-.about-me{
+.about-me {
   display: flex;
   flex-direction: column;
   width: 100%;
   margin-top: 10px;
   cursor: default;
-  flex-shrink: 0
+  flex-shrink: 0;
 }
-.about-item{
+.about-item {
   display: flex;
   align-items: center;
   margin-top: 2px;
   margin-bottom: 2px;
   padding: 10px;
-  flex-shrink: 0
-
+  padding-top: 5px;
+  padding-bottom: 5px;
+  flex-shrink: 0;
 }
 .about-item .key {
-  color: rgb(0, 153, 255);
+  color: #b6dbe1;
 }
 .about-item .name {
   white-space: nowrap;
@@ -431,7 +464,7 @@ export default {
   user-select: none;
 }
 .back-button:hover {
-  background: rgba(49, 49, 49, 0.712);
+  background: #0c484e;
 }
 @media (max-width: 432px) {
   .box {
@@ -443,8 +476,8 @@ export default {
 }
 </style>
 <style>
-  .emoji img {
-    height: 20px;
-    width: 20px; 
-  }
+.emoji img {
+  height: 20px;
+  width: 20px;
+}
 </style>
diff --git a/src/components/app/ServerList.vue b/src/components/app/ServerList.vue
index 42e4b96..a1e22f2 100644
--- a/src/components/app/ServerList.vue
+++ b/src/components/app/ServerList.vue
@@ -4,14 +4,18 @@
     <div class="right">
       <div class="server-banner" v-if="selectedServerID">
         <div class="banner-image"></div>
-        <div class="sub-banner" >
-          <div class="text" :title="servers[selectedServerID].name">{{servers[selectedServerID].name}}</div>
+        <div class="sub-banner">
+          <div
+            class="text"
+            :title="servers[selectedServerID].name"
+          >{{servers[selectedServerID].name}}</div>
           <div class="options-button material-icons" @click="openServerContext">more_vert</div>
         </div>
       </div>
       <div class="channels-list">
         <channels-list v-if="selectedServerID" :server-i-d="selectedServerID" />
       </div>
+      <div class="seperater" />
       <MyMiniInformation />
     </div>
   </div>
@@ -48,25 +52,25 @@ export default {
       this.$store.dispatch("servers/setSelectedServerID", serverID);
     },
     openExploreTab() {
-      this.$store.dispatch('setCurrentTab',  0)
+      this.$store.dispatch("setCurrentTab", 0);
     },
     openServerContext(event) {
       const rect = event.target.getBoundingClientRect();
       if (this.checkServerContextOpened) {
-        this.$store.dispatch('setAllPopout', {
+        this.$store.dispatch("setAllPopout", {
           show: false,
           type: null
-        })
+        });
         return;
       }
-      this.$store.dispatch('setAllPopout', {
+      this.$store.dispatch("setAllPopout", {
         show: true,
-        type: 'SERVER',
+        type: "SERVER",
         serverID: this.servers[this.selectedServerID].server_id,
         creatorUniqueID: this.servers[this.selectedServerID].creator.uniqueID,
         x: rect.left - 30,
-        y: rect.top + 35,
-      })
+        y: rect.top + 35
+      });
     }
   },
   computed: {
@@ -95,13 +99,24 @@ export default {
 
 <style scoped lang="scss" >
 .left-panel {
-  background-color: rgba(0, 0, 0, 0.6);
   height: 100%;
   width: 300px;
   flex-shrink: 0;
   display: flex;
   flex-direction: row;
   z-index: 1;
+  background-image: url("../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.seperater {
+  height: 1px;
+  width: calc(100% - 10px);
+  align-self: center;
+  background-color: #a0c8d5;
+  flex-shrink: 0;
 }
 
 .channels-list {
@@ -109,18 +124,6 @@ export default {
   flex: 1;
   height: 100%;
 }
-
-
-.left {
-  display: flex;
-  align-content: center;
-  align-items: center;
-  flex-direction: column;
-  flex-shrink: 0;
-  background: rgba(29, 29, 29, 0.37);
-  width: 70px;
-  overflow-x: auto;
-}
 .right {
   display: flex;
   flex-direction: column;
@@ -150,7 +153,7 @@ export default {
 .sub-banner {
   display: flex;
   color: white;
-  background-color: rgba(0, 0, 0, 0.507);
+  background-color: rgba(0, 0, 0, 0.5);
   align-self: flex-end;
   height: 35px;
   width: 100%;
@@ -169,7 +172,7 @@ export default {
     width: 100%;
   }
 }
-.options-button  {
+.options-button {
   display: flex;
   align-items: center;
   align-content: center;
@@ -184,6 +187,5 @@ export default {
   &:hover {
     background: rgba(0, 0, 0, 0.322);
   }
-
 }
 </style>
diff --git a/src/components/app/ServerTemplate/ChannelTemplate.vue b/src/components/app/ServerTemplate/ChannelTemplate.vue
index 76281f4..ba0ea63 100644
--- a/src/components/app/ServerTemplate/ChannelTemplate.vue
+++ b/src/components/app/ServerTemplate/ChannelTemplate.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="channel" :class="{notifyAnimation: hasNotifications, selected: selectedChannelID === channelData.channelID}">
+  <div
+    class="channel"
+    :class="{notifyAnimation: hasNotifications, selected: selectedChannelID === channelData.channelID}"
+  >
     <i class="material-icons">storage</i>
-    <div class="channel-name">
-      {{ channelData.name }}
-    </div>
+    <div class="channel-name">{{ channelData.name }}</div>
   </div>
 </template>
 
@@ -13,50 +14,47 @@ export default {
   computed: {
     hasNotifications() {
       const notifications = this.$store.getters.notifications;
-      const find = notifications.find(n => n.channelID === this.channelData.channelID)
-      return find
+      const find = notifications.find(
+        n => n.channelID === this.channelData.channelID
+      );
+      return find;
     },
     selectedChannelID() {
       return this.$store.getters.selectedChannelID;
-    },
+    }
   }
 };
 </script>
 
 
 <style scoped>
-
-.notifyAnimation{
-
+.notifyAnimation {
   animation: notifyAnime;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-fill-mode: forwards;
-
 }
 @keyframes notifyAnime {
-  0%{
+  0% {
     background: rgba(255, 0, 0, 0.198);
   }
-  40%{
+  40% {
     background: rgba(255, 0, 0, 0.411);
   }
-  60%{
+  60% {
     background: rgba(255, 0, 0, 0.411);
   }
-  100%{
+  100% {
     background: rgba(255, 0, 0, 0.198);
   }
 }
 
-
-
 .channel {
   display: flex;
   align-items: center;
   padding: 5px;
   transition: 0.3s;
-	font-size: 14px;
+  font-size: 14px;
   cursor: pointer;
   color: white;
   user-select: none;
@@ -65,13 +63,12 @@ export default {
   padding-left: 10px;
 }
 .channel:hover {
-  background: rgba(255, 255, 255, 0.07);
+  background: #08616b;
 }
 .channel.selected {
-  background: rgba(255, 255, 255, 0.13);
+  background: #064c55;
 }
 
-
 .channel-name {
   white-space: nowrap;
   overflow: hidden;
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index 9152fc0..6aceb14 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -1,11 +1,21 @@
 <template>
-  <div class="server" :class="{selected: selectedServerID === serverData.server_id, notifyAnimation: notification }" @contextmenu.prevent="contextEvent" @mouseenter="hoverEvent" @mouseover="hover = true" @mouseleave="hover = false">
-    <profile-picture size="45px" :url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`" />
+  <div
+    class="server"
+    :class="{selected: selectedServerID === serverData.server_id, notifyAnimation: notification }"
+    @contextmenu.prevent="contextEvent"
+    @mouseenter="hoverEvent"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+  >
+    <profile-picture
+      size="45px"
+      :url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`"
+    />
   </div>
 </template>
 
 <script>
-import {bus} from "../../../main.js"
+import { bus } from "../../../main.js";
 import config from "@/config.js";
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 import ServerService from "@/services/ServerService";
@@ -43,26 +53,28 @@ export default {
   methods: {
     hoverEvent(event) {
       const rect = event.target.getBoundingClientRect();
-        //let centerX = targetNode.offsetLeft + targetNode.offsetWidth / 2;
-        //let centerY = targetNode.offsetTop + targetNode.offsetHeight / 2;
-      bus.$emit('server-tool-tip', {serverID: this.serverData.server_id, top: rect.top})
+      //let centerX = targetNode.offsetLeft + targetNode.offsetWidth / 2;
+      //let centerY = targetNode.offsetTop + targetNode.offsetHeight / 2;
+      bus.$emit("server-tool-tip", {
+        serverID: this.serverData.server_id,
+        top: rect.top
+      });
     },
     contextEvent(event) {
-      this.$store.dispatch('setAllPopout', {
+      this.$store.dispatch("setAllPopout", {
         show: true,
-        type: 'SERVER',
+        type: "SERVER",
         serverID: this.serverData.server_id,
         creatorUniqueID: this.serverData.creator.uniqueID,
         x: event.clientX,
         y: event.clientY
-      })
+      });
     }
-  },
+  }
 };
 </script>
 
 <style scoped lang="scss">
-
 .server {
   position: relative;
   z-index: 1;
@@ -78,11 +90,10 @@ export default {
   transition: 0.2s;
   cursor: pointer;
   &:hover {
-    background: rgba(255, 255, 255, 0.07);
+    background: #074447;
   }
   &.selected {
-    background: rgba(255, 255, 255, 0.13);
-    opacity: 1;
+    background: #042a2b;
   }
 }
 
@@ -122,5 +133,4 @@ export default {
     opacity: 0.2;
   }
 }
-
 </style>
diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue
index 14824c5..2a8d6a1 100644
--- a/src/components/app/Tabs/DirectMessage.vue
+++ b/src/components/app/Tabs/DirectMessage.vue
@@ -7,7 +7,7 @@
         class="left-panel"
       />
     </transition>
-    <message-panel :type="0"/>
+    <message-panel :type="0" />
   </div>
 </template>
 
@@ -53,7 +53,7 @@ export default {
   height: 100%;
   width: 100%;
 }
-.left-panel{
+.left-panel {
   z-index: 2;
 }
 .slidein-enter-active,
@@ -62,7 +62,7 @@ export default {
 }
 .slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
   /* margin-left: -300px; */
-  transform: translateX(-300px)
+  transform: translateX(-300px);
 }
 @media (max-width: 600px) {
   .left-panel {
@@ -70,7 +70,6 @@ export default {
     bottom: 0;
     height: calc(100% - 50px);
     z-index: 2;
-    backdrop-filter: blur(15px);
   }
 }
 </style>
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
index db0b8b8..f036156 100644
--- a/src/components/app/Tabs/Explore.vue
+++ b/src/components/app/Tabs/Explore.vue
@@ -72,7 +72,7 @@
 import { bus } from "@/main";
 import Servers from "./Explore/servers";
 import ServerService from "@/services/ServerService";
-import Navigation from '@/components/app/Navigation';
+import Navigation from "@/components/app/Navigation";
 export default {
   components: { Servers, Navigation },
   data() {
@@ -89,7 +89,7 @@ export default {
       nertiviaServerID: "6572915451527958528",
       nertiviaServerHide:
         localStorage.getItem("exploreTabNertiviaServerPromoHide") === "true",
-      donateHide: localStorage.getItem("exploreTabDonateHide") === "true",
+      donateHide: localStorage.getItem("exploreTabDonateHide") === "true"
     };
   },
 
@@ -142,10 +142,13 @@ export default {
 .left-panel {
   display: flex;
   flex-direction: row;
-  background: rgba(0, 0, 0, 0.6);
   width: 300px;
   flex-shrink: 0;
   z-index: 2;
+  background-image: url("../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
   .content {
     display: flex;
     flex-direction: column;
@@ -169,17 +172,17 @@ export default {
       cursor: pointer;
       transition: 0.3s;
       &:hover {
-        background: rgba(255, 255, 255, 0.07);
+        background: #08616b;
       }
       &.selected {
-        background: rgba(255, 255, 255, 0.13);
+        background: #064c55;
       }
     }
   }
   .header {
     display: flex;
     height: 100px;
-    background: rgba(0, 0, 0, 0.226);
+    background: #086974;
     user-select: none;
     flex-shrink: 0;
     .icon {
@@ -213,7 +216,7 @@ export default {
         position: relative;
       }
       .description {
-        opacity: 0.7;
+        color: #b2d1d4;
         font-size: 14px;
       }
     }
@@ -285,7 +288,6 @@ export default {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.39);
   color: white;
   .material-icons {
     font-size: 100px;
@@ -293,7 +295,6 @@ export default {
 }
 
 .right-panel {
-  background: rgba(0, 0, 0, 0.65);
   .header {
     background: rgba(0, 0, 0, 0.448);
     padding: 10px;
@@ -337,7 +338,6 @@ export default {
     position: absolute;
     bottom: 0;
     height: calc(100% - 44px);
-    backdrop-filter: blur(15px);
     z-index: 2;
   }
 }
diff --git a/src/components/app/Tabs/Explore/searchHeader.vue b/src/components/app/Tabs/Explore/searchHeader.vue
index 8016a19..6251b6e 100644
--- a/src/components/app/Tabs/Explore/searchHeader.vue
+++ b/src/components/app/Tabs/Explore/searchHeader.vue
@@ -54,23 +54,23 @@ export default {
     };
   },
   methods: {
-    param(){
+    param() {
       const filter = this.filters[this.filterSelected];
-      const sort = this.sortBys[this.sortSelected];      
+      const sort = this.sortBys[this.sortSelected];
       const query = {};
 
       !!filter.param && (query[filter.param] = filter.value);
       !!sort.param && (query[sort.param] = sort.value);
 
-      return '?' + qs.stringify(query);
+      return "?" + qs.stringify(query);
     }
-  }, 
-  watch:{ 
+  },
+  watch: {
     filterSelected() {
-      this.$emit('params', this.param())
+      this.$emit("params", this.param());
     },
     sortSelected() {
-      this.$emit('params', this.param())
+      this.$emit("params", this.param());
     }
   }
 };
@@ -79,7 +79,7 @@ export default {
 <style lang="scss" scoped>
 .search-header {
   display: flex;
-  background: rgba(0, 0, 0, 0.231);
+  background: #0a1d20;
   width: 100%;
   height: 70px;
   flex-shrink: 0;
@@ -138,7 +138,6 @@ input {
   }
 }
 
-
 @media (max-width: 945px) {
   .search-header {
     flex-direction: column;
@@ -153,13 +152,10 @@ input {
       overflow: hidden;
       border-radius: 0;
       margin-top: 1px;
-
     }
-
   }
-  .filter-area{
+  .filter-area {
     order: 2;
   }
 }
-
 </style>
\ No newline at end of file
diff --git a/src/components/app/Tabs/News.vue b/src/components/app/Tabs/News.vue
index ca68169..ee525a9 100644
--- a/src/components/app/Tabs/News.vue
+++ b/src/components/app/Tabs/News.vue
@@ -65,7 +65,6 @@ export default {
   height: 100%;
   color: white;
   overflow: auto;
-  background: #0000005d;
   position: relative;
 }
 
@@ -91,7 +90,7 @@ export default {
 }
 .heading {
   padding: 10px;
-  background: rgba(0, 0, 0, 0.555);
+  background: #071415;
   margin-bottom: 10px;
 }
 .information {
@@ -102,7 +101,7 @@ export default {
   background: rgba(38, 139, 255, 0.87);
 }
 .change-log {
-  background: rgba(0, 0, 0, 0.561);
+  background: #0a1e20;
   overflow-y: auto;
   max-width: 700px;
   margin: auto;
@@ -113,7 +112,6 @@ export default {
   height: 100%;
   overflow: hidden;
   overflow: auto;
-
 }
 .plan-list {
   color: white;
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue
index b66fcb1..d858d59 100644
--- a/src/components/app/Tabs/Servers.vue
+++ b/src/components/app/Tabs/Servers.vue
@@ -66,18 +66,17 @@ export default {
   },
   computed: {
     selectedServerID() {
-      return this.$store.getters['servers/selectedServerID'];
-    },
+      return this.$store.getters["servers/selectedServerID"];
+    }
   }
 };
 </script>
 
 <style scoped>
-
-.direct-message-tab{
+.direct-message-tab {
   overflow: hidden;
 }
-.left-panel{
+.left-panel {
   z-index: 2;
 }
 
@@ -86,20 +85,17 @@ export default {
   transition: 0.5s;
 }
 .slide-left-enter, .slide-left-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  transform: translateX(-300px)
+  transform: translateX(-300px);
 }
 
 .slide-right-enter-active,
 .slide-right-leave-active {
   transition: 0.5s;
-
 }
 .slide-right-enter, .slide-right-leave-to /* .fade-leave-active below version 2.1.8 */ {
   transform: translateX(300px);
-
 }
 
-
 @media (max-width: 949px) {
   .members-panel {
     position: absolute;
@@ -107,7 +103,6 @@ export default {
     bottom: 0;
     height: calc(100% - 50px);
     z-index: 1;
-    backdrop-filter: blur(15px);
   }
 }
 
@@ -117,7 +112,6 @@ export default {
     bottom: 0;
     height: calc(100% - 50px);
     z-index: 2;
-    backdrop-filter: blur(15px);
   }
 }
 </style>
diff --git a/src/components/app/messageEmbedTemplate.vue b/src/components/app/messageEmbedTemplate.vue
index fd8d8a7..4e082fa 100644
--- a/src/components/app/messageEmbedTemplate.vue
+++ b/src/components/app/messageEmbedTemplate.vue
@@ -1,10 +1,18 @@
 <template>
-  <div class="embed" ref="embed" :class="{article: embed.type === 'article' || embed.type === 'video.other', website: embed.type === 'website'}">
+  <div
+    class="embed"
+    ref="embed"
+    :class="{article: embed.type === 'article' || embed.type === 'video.other', website: embed.type === 'website'}"
+  >
     <div class="right">
-      <div class="image" v-if="imageURL" @click="embedImgClicked"><img ref="image" :src="`//images.weserv.nl/?url=${imageURL }`" alt=""></div>
+      <div class="image" v-if="imageURL" @click="embedImgClicked">
+        <img ref="image" :src="`//images.weserv.nl/?url=${imageURL }`" alt />
+      </div>
     </div>
     <div class="left">
-      <div class="title" v-if="embed.url"><a target=”_blank” :href="embed.url">{{embed.title}}</a></div>
+      <div class="title" v-if="embed.url">
+        <a target="”_blank”" :href="embed.url">{{embed.title}}</a>
+      </div>
       <div class="title" v-else>{{embed.title}}</div>
       <div class="description">{{embed.description}}</div>
     </div>
@@ -12,51 +20,58 @@
 </template>
 
 <script>
-import windowProperties from '@/utils/windowProperties';
+import windowProperties from "@/utils/windowProperties";
 
 export default {
   props: ["embed"],
   methods: {
     embedImgClicked() {
-      this.$store.dispatch("setImagePreviewURL", "//images.weserv.nl/?url=" + this.imageURL);
+      this.$store.dispatch(
+        "setImagePreviewURL",
+        "//images.weserv.nl/?url=" + this.imageURL
+      );
     },
     clamp(num, min, max) {
       return num <= min ? min : num >= max ? max : num;
     },
     calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
       let ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
-      return { width: srcWidth*ratio, height: srcHeight*ratio };
+      return { width: srcWidth * ratio, height: srcHeight * ratio };
     },
     articleSize() {
       const image = this.embed.image;
-      if (!image || !image.dimensions )
+      if (!image || !image.dimensions) return undefined;
+
+      if (this.embed.type !== "article" && this.embed.type !== "video.other")
         return undefined;
 
-       if (this.embed.type !== "article" && this.embed.type !== "video.other") 
-        return undefined;
-
-      const embed = this.$refs['embed'];
-      const messageLog = document.querySelector('.message-logs');
+      const embed = this.$refs["embed"];
+      const messageLog = document.querySelector(".message-logs");
       const w = messageLog.offsetWidth;
       const h = messageLog.offsetHeight;
 
       const minWidth = this.clamp(w / 2, 0, 200);
       const minHeight = h / 2;
 
-      const dimensions = image.dimensions
+      const dimensions = image.dimensions;
       const srcWidth = dimensions.width;
       const srcHeight = dimensions.height;
 
+      const newDimentions = this.calculateAspectRatioFit(
+        srcWidth,
+        srcHeight,
+        minWidth,
+        minHeight
+      );
 
-
-      const newDimentions = this.calculateAspectRatioFit(srcWidth, srcHeight, minWidth, minHeight);
-
-      const imageTag = this.$refs['image'];
+      const imageTag = this.$refs["image"];
 
       //embed.style.width = this.clamp(newDimentions.width, 0, srcWidth) + "px"
-      
-      imageTag.style.width = this.clamp(newDimentions.width, 0, srcWidth) + "px"
-      imageTag.style.height = this.clamp(newDimentions.height, 0, srcHeight) + "px"
+
+      imageTag.style.width =
+        this.clamp(newDimentions.width, 0, srcWidth) + "px";
+      imageTag.style.height =
+        this.clamp(newDimentions.height, 0, srcHeight) + "px";
     },
     onResize(dimensions) {
       this.articleSize();
@@ -67,27 +82,30 @@ export default {
   },
   watch: {
     getWindowWidth(dimensions) {
-      this.onResize(dimensions)
+      this.onResize(dimensions);
     }
   },
   computed: {
-    getWindowWidth() { 
-      return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
+    getWindowWidth() {
+      return {
+        width: windowProperties.resizeWidth,
+        height: windowProperties.resizeHeight
+      };
     },
     imageURL() {
       const image = this.embed.image;
       if (!image) return undefined;
-      if (typeof image === 'string') return undefined;
+      if (typeof image === "string") return undefined;
       if (image.url) return image.url;
       return undefined;
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.embed{
-  background: rgba(0, 0, 0, 0.507);
+.embed {
+  background: #1d2b2d;
   border-radius: 10px;
   padding: 5px;
   display: flex;
@@ -98,7 +116,6 @@ export default {
   overflow: hidden;
 }
 .embed.article {
-
 }
 .embed.website {
   height: 100px;
@@ -145,10 +162,10 @@ export default {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 
-      word-wrap: break-word;
-    word-break: break-word;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 .image img {
   width: auto;
@@ -165,7 +182,7 @@ export default {
   position: relative;
 }
 .image:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 37b4b06..1a28c00 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="friend"
-    :style="{background: status.status !== 0 ? status.bgColor : ''}"
     :class="{selected: uniqueIDSelected, notifyAnimation: (notifications && notifications > 0), tree }"
     @click="openChat"
     @mouseover="hover = true"
@@ -12,67 +11,57 @@
       :style="`border-color: ${status.statusColor}; background-image: url(${userAvatar}${hover ? '' : '?type=png'})`"
       @click="openUserInformation"
     >
-      <div
-        class="status"
-        :style="`background-image: url(${status.statusURL})`"
-      />
+      <div class="status" :style="`background-image: url(${status.statusURL})`" />
     </div>
     <div class="information">
-      <div class="username">
-        {{ recipient.username }}
-      </div>
-      <div
-        class="status-name"
-        :style="`color: ${status.statusColor}`"
-      >
-        {{ status.statusName }}
-      </div>
+      <div class="username">{{ recipient.username }}</div>
+      <div class="status-name">{{ status.statusName }}</div>
     </div>
-    <div
-      v-if="notifications && notifications >0"
-      class="notification"
-    >
-      <div class="notification-inner">
-        {{ notifications }}
-      </div>
+    <div v-if="notifications && notifications >0" class="notification">
+      <div class="notification-inner">{{ notifications }}</div>
     </div>
   </div>
 </template>
 
 <script>
-import channelService from '@/services/channelService';
-import messagesService from '@/services/messagesService';
-import config from '@/config.js'
-import statuses from '@/utils/statuses';
-import {bus} from '@/main'
+import channelService from "@/services/channelService";
+import messagesService from "@/services/messagesService";
+import config from "@/config.js";
+import statuses from "@/utils/statuses";
+import { bus } from "@/main";
 
 export default {
   // tree will add padding to the left.
-  props: ['username', 'tag',  'channelID',  'uniqueID', 'recipient', 'tree'],
+  props: ["username", "tag", "channelID", "uniqueID", "recipient", "tree"],
   data() {
     return {
       hover: false
-    }
+    };
   },
   computed: {
-    notifications () {
+    notifications() {
       const channelID = this.$props.channelID;
       const channels = this.$store.getters.channels;
       const notifications = this.$store.getters.notifications.find(function(e) {
         if (channels[e.channelID] && channels[e.channelID].server_id) return;
-        return e.channelID == channelID
-      })
-      if (!notifications || (this.$props.channelID === this.$store.getters.selectedChannelID && document.hasFocus())) return;
+        return e.channelID == channelID;
+      });
+      if (
+        !notifications ||
+        (this.$props.channelID === this.$store.getters.selectedChannelID &&
+          document.hasFocus())
+      )
+        return;
       return notifications.count;
     },
     userAvatar() {
-      return config.domain + "/avatars/" + this.recipient.avatar
+      return config.domain + "/avatars/" + this.recipient.avatar;
     },
     status() {
-      const presences = this.$store.getters['members/presences'];
+      const presences = this.$store.getters["members/presences"];
       let status = 0;
       if (presences[this.recipient.uniqueID]) {
-        status = presences[this.recipient.uniqueID] || 0
+        status = presences[this.recipient.uniqueID] || 0;
       }
 
       return {
@@ -81,40 +70,47 @@ export default {
         statusURL: statuses[parseInt(status)].url,
         statusColor: statuses[parseInt(status)].color,
         bgColor: statuses[parseInt(status)].bgColor
-      }
+      };
     },
     uniqueIDSelected() {
-      return this.$store.getters.selectedUserUniqueID === this.recipient.uniqueID
+      return (
+        this.$store.getters.selectedUserUniqueID === this.recipient.uniqueID
+      );
     }
   },
   methods: {
-
     async openChat(event) {
       if (event.target.closest(".profile-picture")) return;
-      bus.$emit('closeLeftMenu');
-      // dismiss notification if exists 
+      bus.$emit("closeLeftMenu");
+      // dismiss notification if exists
       // TODO move this into openchat or something :/
-      if (this.notifications && this.notifications >= 1 && document.hasFocus()) {
-        this.$socket.emit('notification:dismiss', {channelID: this.channelID});
+      if (
+        this.notifications &&
+        this.notifications >= 1 &&
+        document.hasFocus()
+      ) {
+        this.$socket.emit("notification:dismiss", {
+          channelID: this.channelID
+        });
       }
-      this.$store.dispatch('openChat', {
+      this.$store.dispatch("openChat", {
         uniqueID: this.recipient.uniqueID,
         channelID: this.channelID,
         channelName: this.recipient.username
-      })
+      });
     },
     openUserInformation() {
-      this.$store.dispatch('setUserInformationPopout', this.recipient.uniqueID)
+      this.$store.dispatch("setUserInformationPopout", this.recipient.uniqueID);
     }
   }
-}
+};
 </script>
 
 
 <style scoped>
-.username{
+.username {
   width: 150px;
-  white-space: nowrap; 
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -130,36 +126,34 @@ export default {
 .tree {
   padding-left: 22px;
 }
-.notifyAnimation{
-
+.notifyAnimation {
   animation: notifyAnime;
   animation-duration: 1s;
   animation-iteration-count: infinite;
-  animation-fill-mode: forwards
-
+  animation-fill-mode: forwards;
 }
 @keyframes notifyAnime {
-  0%{
+  0% {
     background: rgba(255, 0, 0, 0.198);
   }
-  40%{
+  40% {
     background: rgba(255, 0, 0, 0.411);
   }
-  60%{
+  60% {
     background: rgba(255, 0, 0, 0.411);
   }
-  100%{
+  100% {
     background: rgba(255, 0, 0, 0.198);
   }
 }
 
 .friend:hover {
-  background: rgba(255, 255, 255, 0.07);
+  background: #08616b;
 }
 .friend.selected {
-  background: rgba(255, 255, 255, 0.13);
+  background: #064c55;
 }
-.profile-picture{
+.profile-picture {
   height: 30px;
   width: 30px;
   background-color: rgba(0, 0, 0, 0.425);
@@ -175,14 +169,14 @@ export default {
   transition: 0.3s;
   flex-shrink: 0;
 }
-.information{
+.information {
   margin: auto;
   margin-left: 5px;
   margin-right: 5px;
   flex: 1;
 }
 
-.notification{
+.notification {
   position: absolute;
   display: flex;
   background: rgba(134, 134, 134, 0.315);
@@ -193,7 +187,7 @@ export default {
   width: 50px;
   border-radius: 1px;
 }
-.notification-inner{ 
+.notification-inner {
   margin: auto;
 }
 
@@ -211,19 +205,20 @@ export default {
   transition: 0.3s;
 }
 
-.friend:hover .status { 
+.friend:hover .status {
   opacity: 1;
   bottom: -4px;
 }
 
-.status-name{
+.status-name {
   opacity: 0;
   font-size: 13px;
   transition: 0.3s;
+  color: #b7cbce;
   height: 0;
 }
-.friend:hover .status-name { 
-  opacity: 0.8;
+.friend:hover .status-name {
+  opacity: 1;
   height: 13px;
 }
 </style>
diff --git a/src/components/app/relationships/OfflineFriends.vue b/src/components/app/relationships/OfflineFriends.vue
index da4cf1b..8f78307 100644
--- a/src/components/app/relationships/OfflineFriends.vue
+++ b/src/components/app/relationships/OfflineFriends.vue
@@ -1,19 +1,10 @@
 <template>
   <div class="friends">
-    <div
-      class="tab"
-      @click="expanded = !expanded"
-    >
-      <Tab
-        :expanded="expanded"
-        tabname="Offline"
-      />
+    <div class="tab" @click="expanded = !expanded">
+      <Tab :expanded="expanded" tabname="Offline" />
     </div>
     <transition name="list">
-      <div
-        v-if="expanded"
-        class="list"
-      >
+      <div v-if="expanded" class="list">
         <FriendsTemplate
           v-for="(friend, key) of friends"
           :key="key"
@@ -27,8 +18,8 @@
 </template>
 
 <script>
-import Tab from './Tab.vue'
-import FriendsTemplate from './FriendsTemplate.vue'
+import Tab from "./Tab.vue";
+import FriendsTemplate from "./FriendsTemplate.vue";
 export default {
   components: {
     Tab,
@@ -37,43 +28,48 @@ export default {
   data() {
     return {
       expanded: true
-    } 
+    };
   },
   computed: {
     friends() {
       const allFriend = this.$store.getters.user.friends;
-      const members = this.$store.getters['members/members'];
-      const presences = this.$store.getters['members/presences'];
+      const members = this.$store.getters["members/members"];
+      const presences = this.$store.getters["members/presences"];
       const result = Object.keys(allFriend).map(function(key) {
         allFriend[key].recipient = members[allFriend[key].uniqueID];
         return allFriend[key];
       });
-      return result.filter(friend => friend.status == 2 && (!presences[friend.uniqueID] || presences[friend.uniqueID] == 0 ));
+      return result.filter(
+        friend =>
+          friend.status == 2 &&
+          (!presences[friend.uniqueID] || presences[friend.uniqueID] == 0)
+      );
     }
   }
-}
+};
 </script>
 <style scoped>
-.list-enter-active, .list-leave-active {
-  transition:  .3s;
+.list-enter-active,
+.list-leave-active {
+  transition: 0.3s;
 }
 .list-enter, .list-leave-to /* .fade-leave-active below version 2.1.8 */ {
   transform: translateY(-20px);
   opacity: 0;
 }
 
-.friends{
+.friends {
   background-color: rgba(0, 0, 0, 0);
   user-select: none;
   padding-bottom: 3px;
   border-radius: 5px;
   transition: 0.3s;
 }
-.tab{
+.tab {
   transition: 0.3s;
 }
-.tab:hover{
-  background-color: rgba(0, 0, 0, 0.123);
+.tab:hover {
+  background: #08616b;
 }
 </style>
 
diff --git a/src/components/app/relationships/OnlineFriends.vue b/src/components/app/relationships/OnlineFriends.vue
index 110f2d3..c677640 100644
--- a/src/components/app/relationships/OnlineFriends.vue
+++ b/src/components/app/relationships/OnlineFriends.vue
@@ -1,19 +1,10 @@
 <template>
   <div class="friends">
-    <div
-      class="tab"
-      @click="expanded = !expanded"
-    >
-      <Tab
-        :expanded="expanded"
-        tabname="Online"
-      />
+    <div class="tab" @click="expanded = !expanded">
+      <Tab :expanded="expanded" tabname="Online" />
     </div>
     <transition name="list">
-      <div
-        v-if="expanded"
-        class="list"
-      >
+      <div v-if="expanded" class="list">
         <FriendsTemplate
           v-for="(friend, key) of friends"
           :key="key"
@@ -27,8 +18,8 @@
 </template>
 
 <script>
-import Tab from './Tab.vue'
-import FriendsTemplate from './FriendsTemplate.vue'
+import Tab from "./Tab.vue";
+import FriendsTemplate from "./FriendsTemplate.vue";
 export default {
   components: {
     Tab,
@@ -37,58 +28,64 @@ export default {
   data() {
     return {
       expanded: true
-    } 
+    };
   },
   computed: {
     friends() {
       const allFriend = this.$store.getters.user.friends;
-      const members = this.$store.getters['members/members'];
-      const presences = this.$store.getters['members/presences'];
+      const members = this.$store.getters["members/members"];
+      const presences = this.$store.getters["members/presences"];
       const notifications = this.$store.getters.notifications;
       const channels = this.$store.getters.channels;
 
       const result = Object.keys(allFriend).map(function(key) {
-        const friend = allFriend[key]; 
+        const friend = allFriend[key];
         friend.recipient = members[friend.uniqueID];
 
-        const findNotification = notifications.find( e => {
-          return e.sender.uniqueID === friend.recipient.uniqueID && !channels[e.channelID].server_id
-        })
-        
-        if ( findNotification ){
+        const findNotification = notifications.find(e => {
+          return (
+            e.sender.uniqueID === friend.recipient.uniqueID &&
+            !channels[e.channelID].server_id
+          );
+        });
+
+        if (findNotification) {
           friend.channelID = findNotification.channelID;
         }
 
-        return friend
+        return friend;
       });
-      return result.filter(friend => friend.status == 2 && (presences[friend.uniqueID] && presences[friend.uniqueID] > 0 ));
+      return result.filter(
+        friend =>
+          friend.status == 2 &&
+          (presences[friend.uniqueID] && presences[friend.uniqueID] > 0)
+      );
     }
   },
-  methods: {
-
-  }
-}
+  methods: {}
+};
 </script>
 <style scoped>
-.list-enter-active, .list-leave-active {
-  transition:  .3s;
+.list-enter-active,
+.list-leave-active {
+  transition: 0.3s;
 }
 .list-enter, .list-leave-to /* .fade-leave-active below version 2.1.8 */ {
   transform: translateY(-20px);
   opacity: 0;
 }
 
-.friends{
+.friends {
   background-color: rgba(0, 0, 0, 0);
   user-select: none;
   padding-bottom: 3px;
   transition: 0.3s;
 }
-.tab{
+.tab {
   transition: 0.3s;
 }
-.tab:hover{
-  background-color: rgba(0, 0, 0, 0.123);
+.tab:hover {
+  background: #08616b;
 }
 </style>
 
diff --git a/src/components/app/statusList.vue b/src/components/app/statusList.vue
index 8309451..f9f0990 100644
--- a/src/components/app/statusList.vue
+++ b/src/components/app/statusList.vue
@@ -1,72 +1,56 @@
 <template>
   <transition name="show-status-list" :appear="true">
-  <div class="status-popout">
-    <div
-      class="status-list"
-      @click="changeStatus(1)"
-    >
-      <span class="status-icon"><img
-        class="icon"
-        :src="getStatusLogo(1)"
-      ></span><span class="text">Online</span>
+    <div class="status-popout">
+      <div class="status-list" @click="changeStatus(1)">
+        <span class="status-icon">
+          <img class="icon" :src="getStatusLogo(1)" />
+        </span>
+        <span class="text">Online</span>
+      </div>
+      <div class="status-list" @click="changeStatus(2)">
+        <span class="status-icon">
+          <img class="icon" :src="getStatusLogo(2)" />
+        </span>
+        <span class="text">Away</span>
+      </div>
+      <div class="status-list" @click="changeStatus(3)">
+        <span class="status-icon">
+          <img class="icon" :src="getStatusLogo(3)" />
+        </span>
+        <span class="text">Busy</span>
+      </div>
+      <div class="status-list" @click="changeStatus(4)">
+        <span class="status-icon">
+          <img class="icon" :src="getStatusLogo(4)" />
+        </span>
+        <span class="text">Looking to play</span>
+      </div>
+      <div class="status-list" @click="changeStatus(0)">
+        <span class="status-icon">
+          <img class="icon" :src="getStatusLogo(0)" />
+        </span>
+        <span class="text">Offline</span>
+      </div>
     </div>
-    <div
-      class="status-list"
-      @click="changeStatus(2)"
-    >
-      <span class="status-icon"><img
-        class="icon"
-        :src="getStatusLogo(2)"
-      ></span><span class="text">Away</span>
-    </div>
-    <div
-      class="status-list"
-      @click="changeStatus(3)"
-    >
-      <span class="status-icon"><img
-        class="icon"
-        :src="getStatusLogo(3)"
-      ></span><span class="text">Busy</span>
-    </div>
-    <div
-      class="status-list"
-      @click="changeStatus(4)"
-    >
-      <span class="status-icon"><img
-        class="icon"
-        :src="getStatusLogo(4)"
-      ></span><span class="text">Looking to play</span>
-    </div>
-    <div
-      class="status-list"
-      @click="changeStatus(0)"
-    >
-      <span class="status-icon"><img
-        class="icon"
-        :src="getStatusLogo(0)"
-      ></span><span class="text">Offline</span>
-    </div>
-  </div>
   </transition>
 </template>
 
 <script>
-import {bus} from '../../main';
+import { bus } from "../../main";
 export default {
-    methods: {
-        getStatusLogo(status){
-            return  require(`./../../assets/status/${status}.svg`)
-        },
-        changeStatus(status) {
-            bus.$emit('status-change', status)
-        }   
+  methods: {
+    getStatusLogo(status) {
+      return require(`./../../assets/status/${status}.svg`);
+    },
+    changeStatus(status) {
+      bus.$emit("status-change", status);
     }
-}
+  }
+};
 </script>
 
 
 <style scoped>
-
 .show-status-list-enter-active,
 .show-status-list-leave-active {
   transition: 0.2s;
@@ -77,11 +61,11 @@ export default {
   transform: translateY(20px);
 }
 
-.status-popout{
+.status-popout {
   position: absolute;
-  bottom: 60px;
-  right: 0px;
-  background: rgba(0, 0, 0, 0.7);
+  bottom: 66px;
+  right: 5px;
+  background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(5px);
   width: 180px;
   z-index: 4;
@@ -94,25 +78,24 @@ export default {
   align-content: center;
   flex-shrink: 0;
   color: white;
-
 }
 
 .status-list:hover {
-  background: rgba(46, 46, 46, 0.651);
+  background: #042f33;
 }
 
-.status-icon{
+.status-icon {
   display: inline-block;
   flex-shrink: 0;
 }
 
-.icon{
+.icon {
   height: 20px;
   width: 20px;
   margin-top: 3px;
   flex-shrink: 0;
 }
-.text{
+.text {
   display: inline-block;
   vertical-align: top;
   flex-shrink: 0;
diff --git a/src/components/homePage/ProfilePopout.vue b/src/components/homePage/ProfilePopout.vue
index 0714e2a..f4e5c4f 100644
--- a/src/components/homePage/ProfilePopout.vue
+++ b/src/components/homePage/ProfilePopout.vue
@@ -11,24 +11,12 @@
         emote-size="17px"
       />
       <div class="information">
-        <div
-          class="username"
-        >
-          {{ user.username }}
-        </div>
-        <div class="tag">
-          @{{ user.tag }}
-        </div>
+        <div class="username">{{ user.username }}</div>
+        <div class="tag">@{{ user.tag }}</div>
       </div>
       <div class="buttons">
-        <i
-          class="material-icons warn"
-          @click="logOut"
-        >exit_to_app</i>
-        <i
-          class="material-icons"
-          @click="openApp"
-        >message</i>
+        <i class="material-icons warn" @click="logOut">exit_to_app</i>
+        <i class="material-icons" @click="openApp">message</i>
       </div>
     </div>
   </div>
@@ -51,7 +39,7 @@ export default {
       window.location.href = "/app";
     },
     logOut() {
-      this.$emit('logout');  
+      this.$emit("logout");
     }
   }
 };
@@ -72,14 +60,14 @@ export default {
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
-  border-bottom: 15px solid rgba(0, 0, 0, 0.826);
+  border-bottom: 15px solid #0f272a;
 }
 .inner {
   right: 0;
   top: 15px;
   position: absolute;
   display: flex;
-  background: rgba(0, 0, 0, 0.826);
+  background: #0f272a;
   border-radius: 5px;
   width: 300px;
   height: 60px;
@@ -117,6 +105,7 @@ export default {
   cursor: default;
   font-size: 27px;
   user-select: none;
+  cursor: pointer;
 }
 .buttons .material-icons:hover {
   color: white;
@@ -130,12 +119,12 @@ export default {
 @media (max-width: 342px) {
   .inner {
     left: 0;
-    right:0;
+    right: 0;
     width: 100%;
   }
-  .profile-popout{
+  .profile-popout {
     left: 0;
-    right:20px;
+    right: 20px;
   }
 }
 </style>
diff --git a/src/store/modules/popoutsModule/popoutsModule.js b/src/store/modules/popoutsModule/popoutsModule.js
index 3553e34..04a1afe 100644
--- a/src/store/modules/popoutsModule/popoutsModule.js
+++ b/src/store/modules/popoutsModule/popoutsModule.js
@@ -1,10 +1,8 @@
-import axios from 'axios'
-import Vue from 'vue'
-import {
-  bus
-} from '@/main'
-import VueRouter from 'vue-router';
-import NotificationSounds from '@/utils/notificationSound';
+import axios from "axios";
+import Vue from "vue";
+import { bus } from "@/main";
+import VueRouter from "vue-router";
+import NotificationSounds from "@/utils/notificationSound";
 
 const state = {
   fileToUpload: null,
@@ -22,15 +20,15 @@ const state = {
   GDLinkMenu: false,
   addServer: false,
 
-  genericMessage: null, 
+  genericMessage: null,
 
-  serverSettings:{
+  serverSettings: {
     serverID: null,
     index: null
-   },
+  },
   editMessage: null,
   messageContextMenu: {
-    messageID: null, 
+    messageID: null,
     message: null,
     channelID: null,
     uniqueID: null,
@@ -51,90 +49,99 @@ const state = {
     serverID: null,
     uniqueID: null,
     creatorUniqueID: null,
-    x: null, 
-    y: null,
+    x: null,
+    y: null
   }
-
-  
-}
+};
 
 const getters = {
   popouts(state) {
     return state;
   }
-}
+};
 
 const actions = {
-  setAllPopout({commit, state}, data) {
-    commit('setAllPopout', {...state.allPopout, ...data})
+  setAllPopout({ commit, state }, data) {
+    commit("setAllPopout", { ...state.allPopout, ...data });
   },
-  setServerSettings({commit}, {serverID, index}){
-    commit('setServerSettings', {serverID, index})
+  setServerSettings({ commit }, { serverID, index }) {
+    commit("setServerSettings", { serverID, index });
   },
-  setUserInformationPopout({commit}, id){
-    commit('setUserInformationPopout', id)
+  setUserInformationPopout({ commit }, id) {
+    commit("setUserInformationPopout", id);
   },
   setPopoutVisibility(context, data) {
-    context.commit('setPopoutVisibility', data)
+    context.commit("setPopoutVisibility", data);
   },
   setFile(context, file) {
-    context.commit('setFileToUpload', file);
+    context.commit("setFileToUpload", file);
   },
   setImagePreviewURL(context, url) {
-    context.commit('setImagePreviewURL', url);
+    context.commit("setImagePreviewURL", url);
   },
   setServerIDContextMenu(context, serverID) {
-    context.commit('setServerIDContextMenu', serverID);
+    context.commit("setServerIDContextMenu", serverID);
   },
   setGenericMessage(context, message) {
-    context.commit('setGenericMessage', message);
+    context.commit("setGenericMessage", message);
   },
-  setEditMessage(context, data){
-    context.commit('setEditMessage', data)
+  setEditMessage(context, data) {
+    context.commit("setEditMessage", data);
   },
-  setMessageContext(context, {messageID, x, y, channelID, message, uniqueID}) {
-    context.commit('setMessageContext', {messageID, x, y, channelID, message, uniqueID});
+  setMessageContext(
+    context,
+    { messageID, x, y, channelID, message, uniqueID, type }
+  ) {
+    context.commit("setMessageContext", {
+      messageID,
+      x,
+      y,
+      channelID,
+      message,
+      uniqueID,
+      type
+    });
   },
-  setServerMemberContext(context, {uniqueID, x, y, serverID}) {
-    context.commit('setServerMemberContext', {uniqueID, x, y, serverID});
+  setServerMemberContext(context, { uniqueID, x, y, serverID }) {
+    context.commit("setServerMemberContext", { uniqueID, x, y, serverID });
   }
-}
+};
 
 const mutations = {
   setAllPopout(state, data) {
-    Vue.set(state, 'allPopout', data)
-  }, 
+    Vue.set(state, "allPopout", data);
+  },
   setServerMemberContext(state, data) {
-    Vue.set(state, 'serverMemberContext', data);
+    Vue.set(state, "serverMemberContext", data);
   },
   setMessageContext(state, data) {
-    Vue.set(state, 'messageContextMenu', data);
+    Vue.set(state, "messageContextMenu", data);
   },
-  setEditMessage(state, data){
-    Vue.set(state, 'editMessage', data);
+  setEditMessage(state, data) {
+    Vue.set(state, "editMessage", data);
   },
-  setGenericMessage(state, message){
-    Vue.set(state, 'genericMessage', message)
+  setGenericMessage(state, message) {
+    Vue.set(state, "genericMessage", message);
   },
-  setServerSettings(state, {serverID, index}){
-    Vue.set(state, 'serverSettings', {serverID, index});
+  setServerSettings(state, { serverID, index }) {
+    Vue.set(state, "serverSettings", { serverID, index });
   },
   setUserInformationPopout(state, id) {
-    Vue.set(state, 'userInformationPopoutID', id)
+    Vue.set(state, "userInformationPopoutID", id);
   },
   setPopoutVisibility(state, data) {
-    Vue.set(state, data.name, data.visibility)
+    Vue.set(state, data.name, data.visibility);
   },
   setFileToUpload(state, file) {
-    Vue.set(state, 'fileToUpload', file);
+    Vue.set(state, "fileToUpload", file);
   },
   setImagePreviewURL(state, url) {
-    Vue.set(state, 'ImagePreviewURL', url);
+    Vue.set(state, "ImagePreviewURL", url);
   },
   setServerIDContextMenu(state, serverID) {
-    Vue.set(state, 'serverIDContextMenu', serverID);
+    Vue.set(state, "serverIDContextMenu", serverID);
   }
-}
+};
 
 export default {
   namespace: true,
@@ -142,4 +149,4 @@ export default {
   getters,
   actions,
   mutations
-}
\ No newline at end of file
+};
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index 76f17e6..a39b4c9 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -1,44 +1,39 @@
-
- const prototype =  {
-    version: 4,
-    title: "",
-    shortTitle: "",
-    date: "1/06/2019",
-    headColor: "rgba(155, 244, 66, 0.77)",
-    new: [
-      "",
-      "",
-    ],
-    next: [""]
-  }
+const prototype = {
+  version: 4,
+  title: "",
+  shortTitle: "",
+  date: "1/06/2019",
+  headColor: "rgba(155, 244, 66, 0.77)",
+  new: ["", ""],
+  next: [""]
+};
 
 const config = [
-
   {
     version: 7.8,
     title: "Redesigns!",
     shortTitle: "",
-    date: "25/10/2019",
-    headColor: "rgba(25, 130, 255, 0.77)",
+    date: "01/11/2019",
+    headColor: "#0c7b7f",
     new: [
-      'Layout has been redesigned.',
-      'Added an option to mute notification sounds.',
-      'Last clicked channels should be remembered for each server.',
-      'You can now delete Join, Left and Ban messages from the chat.',
+      "Layout has been redesigned.",
+      "Added an option to mute notification sounds.",
+      "Last clicked channels should be remembered for each server.",
+      "You can now delete Join, Left and Ban messages from the chat.",
+      "Files not being uploaded? Try re-linking Google drive in the settings."
     ],
-    next: ['Custom server banners.'],
+    next: ["Custom server banners."],
+    msg:
+      "Since this is a major re-design, there could be a lot of bugs. Please help me fix these bugs by sending me a message and I will give you a bug catcher badge in Nertivia. Thanks."
   },
   {
     version: 7.6,
     title: "👻Spooky bug fixes👻",
     shortTitle: "",
     date: "16/10/2019",
-    new: [
-      'Better handled Google Drive linking.',
-      '👻👻👻',
-    ],
-    fix: ['Spooked away a lot of bugs behind the scenes.'],
-    msg: '👻'
+    new: ["Better handled Google Drive linking.", "👻👻👻"],
+    fix: ["Spooked away a lot of bugs behind the scenes."],
+    msg: "👻"
   },
   {
     version: 7.5,
@@ -46,10 +41,13 @@ const config = [
     shortTitle: "",
     date: "09/10/2019",
     new: [
-      'Design changes to some elements such as the tabs, Window controls and more.',
+      "Design changes to some elements such as the tabs, Window controls and more."
     ],
-    fix: ['Fixed a bug where presence status would not show properly in the header.'],
-    msg: 'I just want to say thanks to everyone who gave me feedback, it helps a lot! 😉 Native mobile app is coming soon!'
+    fix: [
+      "Fixed a bug where presence status would not show properly in the header."
+    ],
+    msg:
+      "I just want to say thanks to everyone who gave me feedback, it helps a lot! 😉 Native mobile app is coming soon!"
   },
   {
     version: 7.4,
@@ -57,11 +55,11 @@ const config = [
     shortTitle: "",
     date: "03/10/2019",
     new: [
-      'Added send message permission. You can use this to allow other people to not write in your channel such as the "rules" channel.',
+      'Added send message permission. You can use this to allow other people to not write in your channel such as the "rules" channel.'
     ],
     fix: [
-      "Fixed a lot of bugs in our cache system. This means that messages should send faster!",
-    ],
+      "Fixed a lot of bugs in our cache system. This means that messages should send faster!"
+    ]
   },
   {
     version: 7.3,
@@ -69,12 +67,12 @@ const config = [
     shortTitle: "",
     date: "29/09/2019",
     new: [
-      'You can now kick/back members of a server by right clicking on their names in the server members list.',
-      'Slightly changed message bubble design.'
+      "You can now kick/back members of a server by right clicking on their names in the server members list.",
+      "Slightly changed message bubble design."
     ],
     fix: [
-      "Fixed a bug where Join and Leave messages would not get notified when reloading client.",
-    ],
+      "Fixed a bug where Join and Leave messages would not get notified when reloading client."
+    ]
   },
   {
     version: 7.2,
@@ -85,7 +83,7 @@ const config = [
       "Online and offline is now a category in the server members list.",
       "Moved add server to the top of the servers list with new design.",
       "Added Explore button to the top of the servers list."
-    ],
+    ]
   },
   {
     version: 7.1,
@@ -97,9 +95,9 @@ const config = [
       "Swapped the changelog and the explore tab."
     ],
     fix: [
-      'Fixed a bug where edit and delete buttons would show for all members.',
+      "Fixed a bug where edit and delete buttons would show for all members.",
       'Fixed a bug where when clicking on "message" in the server tab, in someones profile, the tab wouldnt change to dm.'
-    ],
+    ]
   },
   {
     version: 7.0,
@@ -107,9 +105,8 @@ const config = [
     shortTitle: "",
     date: "13/09/2019",
     new: [
-      'Nertivia app now starts up when you start your pc. You can change the behaviour in the settings.',
-    ],
-
+      "Nertivia app now starts up when you start your pc. You can change the behaviour in the settings."
+    ]
   },
   {
     version: 6.9,
@@ -117,26 +114,35 @@ const config = [
     shortTitle: "",
     date: "06/09/2019",
     new: [
-      'Added filter options to public servers list. Verified servers will be the default filter. Servers will be verified by me (Fishie). If your server does not get verified, Join the official nertivia server and message me.',
-      'Added blur effect to user information popout for an experiment. (Only works in chrome and edge.) Blur effect may be added in more places in the future.'
+      "Added filter options to public servers list. Verified servers will be the default filter. Servers will be verified by me (Fishie). If your server does not get verified, Join the official nertivia server and message me.",
+      "Added blur effect to user information popout for an experiment. (Only works in chrome and edge.) Blur effect may be added in more places in the future."
     ],
-    fix: ['Fixed a bug where when someone leaves the server, the whole members list would disappear for that server.', 'Fixed bugs with emoji sugestions panel.'],
+    fix: [
+      "Fixed a bug where when someone leaves the server, the whole members list would disappear for that server.",
+      "Fixed bugs with emoji sugestions panel."
+    ]
   },
   {
     version: 6.8,
     title: "Bug fixes",
     shortTitle: "",
     date: "02/09/2019",
-    fix: ['You can no longer turn on popup notifications on mobile as it causes issues.'],
-    msg: "Notice: If you don't receive real time notifications inside the app, log out, and in again to fix it."
+    fix: [
+      "You can no longer turn on popup notifications on mobile as it causes issues."
+    ],
+    msg:
+      "Notice: If you don't receive real time notifications inside the app, log out, and in again to fix it."
   },
   {
     version: 6.7,
     title: "New Explore tab!",
     shortTitle: "",
     date: "01/09/2019",
-    new: ['You can now make your servers go public by posting them in the explore tab.', 'Some pop ups have been improved for mobile users.',],
-    fix: ['Some bugs have been fixed.']
+    new: [
+      "You can now make your servers go public by posting them in the explore tab.",
+      "Some pop ups have been improved for mobile users."
+    ],
+    fix: ["Some bugs have been fixed."]
   },
   {
     version: 6.6,
@@ -144,9 +150,7 @@ const config = [
     shortTitle: "",
     date: "29/08/2019",
     new: ['Sneak peak of the new "Explore" tab :D (Unfinished)'],
-    fix: [
-      'Improved backend code. This should improve performance.',
-    ],
+    fix: ["Improved backend code. This should improve performance."]
   },
   {
     version: 6.5,
@@ -154,9 +158,9 @@ const config = [
     shortTitle: "",
     date: "22/08/2019",
     fix: [
-      'Fixed a bug where when being scrolled up, new messages would cause it to not load more.',
-      'Fixed a bug where scroll to bottom button wouldnt work'
-    ],
+      "Fixed a bug where when being scrolled up, new messages would cause it to not load more.",
+      "Fixed a bug where scroll to bottom button wouldnt work"
+    ]
   },
   {
     version: 6.4,
@@ -164,16 +168,18 @@ const config = [
     shortTitle: "",
     date: "19/08/2019",
     new: [
-      'Scrolling up should be smoother now as messages below get unloaded.'
+      "Scrolling up should be smoother now as messages below get unloaded."
     ],
-    msg: 'Known issue: When scrolled up and messages get unloaded below, new messages sent get appended at the bottom and messes up things D: going to fix asap.'
+    msg:
+      "Known issue: When scrolled up and messages get unloaded below, new messages sent get appended at the bottom and messes up things D: going to fix asap."
   },
   {
     version: 6.3,
     title: "Performance Improvements!",
     shortTitle: "",
     date: "18/08/2019",
-    msg: "I finally managed to find out why the chat is choppy when scrolling. The rotated emote is the cause. In this update, emotes only appear when hovering over the profile picture."
+    msg:
+      "I finally managed to find out why the chat is choppy when scrolling. The rotated emote is the cause. In this update, emotes only appear when hovering over the profile picture."
   },
 
   {
@@ -181,9 +187,7 @@ const config = [
     title: "Bug fixes",
     shortTitle: "",
     date: "17/08/2019",
-    new: [
-      "Added a copy button in the message context menu."
-    ],
+    new: ["Added a copy button in the message context menu."],
     fix: [
       "Fixed bugs with textarea not resizing properly",
       "Fixed a bug where message context menu would be not visible.",
@@ -211,10 +215,9 @@ const config = [
     title: "Desktop app!",
     shortTitle: "",
     date: "11/08/2019",
-    new: [
-      "Desktop app is available to download!"
-    ],
-    msg: 'Download: https://github.com/supertiger1234/nertivia-desktop-app/releases'
+    new: ["Desktop app is available to download!"],
+    msg:
+      "Download: https://github.com/supertiger1234/nertivia-desktop-app/releases"
   },
 
   {
@@ -227,7 +230,8 @@ const config = [
       "Fixed a bug where scrolling would be inverted for some devices.",
       "Responsive images and embeds."
     ],
-    msg: 'Notice: If your message history loads mid way, this is because of our new message scrolling down system. This will be fixed after you send few messages.'
+    msg:
+      "Notice: If your message history loads mid way, this is because of our new message scrolling down system. This will be fixed after you send few messages."
   },
   {
     version: 5.8,
@@ -236,11 +240,11 @@ const config = [
     date: "05/08/2019",
     new: [
       "Added more badges (Bug Catcher, Idea Queen)",
-      "You can now change your password.",
+      "You can now change your password."
     ],
     fix: [
       "Fixed a bug where desktop notifications would show for your own messages.",
-      "Fixed a bug where editing custom emojis would break.",
+      "Fixed a bug where editing custom emojis would break."
     ]
   },
   {
@@ -267,9 +271,7 @@ const config = [
       "We have re-added syntax highlighting and also improved the performance of message formatting. (Thanks to Bree!)",
       "Profile Setting has been re-designed. You can now edit your username, email and password!"
     ],
-    fix: [
-      'Fixed some bugs with edit message',
-    ],
+    fix: ["Fixed some bugs with edit message"]
   },
   {
     version: 5.5,
@@ -277,8 +279,8 @@ const config = [
     shortTitle: "",
     date: "25/07/2019",
     fix: [
-      'Removed codeblock highlighter due to some problems. Will be back in the future.',
-    ],
+      "Removed codeblock highlighter due to some problems. Will be back in the future."
+    ]
   },
 
   {
@@ -287,15 +289,13 @@ const config = [
     shortTitle: "",
     date: "24/07/2019",
     fix: [
-      'Fixed a bug where when pressing the up arrow key to edit while there is text in the text box, it would discard the message and edit.',
-      'Fixed a bug where when editing a message and going to a different tab, the message is still editing.',
-      'Fixed a bug where if an emoji is in the recents, and then removed in the settings, the emoji would stay in the recents.',
-      'Fixed bugs with html escape :scream:',
-    ],
+      "Fixed a bug where when pressing the up arrow key to edit while there is text in the text box, it would discard the message and edit.",
+      "Fixed a bug where when editing a message and going to a different tab, the message is still editing.",
+      "Fixed a bug where if an emoji is in the recents, and then removed in the settings, the emoji would stay in the recents.",
+      "Fixed bugs with html escape :scream:"
+    ]
   },
 
-
-
   {
     version: 5.3,
     title: "Edit messages, More performance!",
@@ -306,17 +306,15 @@ const config = [
       "Avatar and message pictures should now be disk cached.",
       "Gif avatars will now only animate when being hovered. This will improve performance.",
       "You can now click on embed images to get a full screen preview.",
-      "Server channels now show a gray background when selected.",
-
+      "Server channels now show a gray background when selected."
     ],
     fix: [
-    'Fixed a bug where when deleting a server channel, the notification would still stay.',
-    'Fixed a bug where when sending a message, the friend wouldnt go at the top in the recents list.',
-  ],
-    next: ["HTML channel for servers", "Change username, email and password."],
+      "Fixed a bug where when deleting a server channel, the notification would still stay.",
+      "Fixed a bug where when sending a message, the friend wouldnt go at the top in the recents list."
+    ],
+    next: ["HTML channel for servers", "Change username, email and password."]
   },
-  
-  
+
   {
     version: 5.2,
     title: "Delete messages, URL Embeds",
@@ -324,9 +322,9 @@ const config = [
     date: "19/07/2019",
     new: [
       "You can now delete your own messages.",
-      "URLs now show open graph embeds.",
+      "URLs now show open graph embeds."
     ],
-    next: ["Edit messages."],
+    next: ["Edit messages."]
   },
 
   {
@@ -335,13 +333,12 @@ const config = [
     shortTitle: "Change server avatar!",
     date: "17/07/2019",
     new: [
-      "You can now change your server avatar from the server settings menu!",
+      "You can now change your server avatar from the server settings menu!"
     ],
-    fix: ['Some bugs have been fixed.'],
-    next: ["Not decided yet."],
+    fix: ["Some bugs have been fixed."],
+    next: ["Not decided yet."]
   },
 
-
   {
     version: 5.0,
     title: "Change server name and default server channel",
@@ -349,28 +346,12 @@ const config = [
     date: "15/07/2019",
     new: [
       "You can now change the name of your server.",
-      "You can now change the default channel to something else.",
+      "You can now change the default channel to something else."
     ],
-    fix: ['Some bugs have been fixed.'],
-    next: ["Change servers avatar."],
+    fix: ["Some bugs have been fixed."],
+    next: ["Change servers avatar."]
   },
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
   {
     version: 4.9,
     title: "Color codeblocks and create multiple channels!",
@@ -382,8 +363,10 @@ const config = [
       "The 'Recents' tab should now flash red when you get a notification.",
       "Friends and Recents tabs position will be saved when visiting the site."
     ],
-    fix: ['Fixed a bug where, when you are on the changelog or the server browser tab, the notifications get dismissed.'],
-    next: ["more server settings"],
+    fix: [
+      "Fixed a bug where, when you are on the changelog or the server browser tab, the notifications get dismissed."
+    ],
+    next: ["more server settings"]
   },
   {
     version: 4.8,
@@ -393,9 +376,11 @@ const config = [
     new: [
       "Nertivia has a new cat logo! (Thanks to Fullipsp for the design!)",
       "You can now see online status of server members!",
-      "You can now click on links that start with 'http'",
+      "You can now click on links that start with 'http'"
+    ],
+    fix: [
+      "Fixed a bug where when creating a server, a reload is required to show yourself in the server members list."
     ],
-    fix: ['Fixed a bug where when creating a server, a reload is required to show yourself in the server members list.'],
     next: ["Create multiple channels in a server."],
     msg: `You might be wondering, where did the official Nertivia server go? Well, I accidentally deleted it :/ sorry. Here's the new one though! <a style="color: #00b6ff;" href="http://nertivia.supertiger.tk/invites/Db3p5n">http://nertivia.supertiger.tk/invites/Db3p5n</a>`
   },
@@ -404,14 +389,12 @@ const config = [
     title: "Bug fixes",
     shortTitle: "Bug fixes",
     date: "24/06/2019",
-    new: [
-      "Emoji character limit expanded to 30 characters!"
-    ],
+    new: ["Emoji character limit expanded to 30 characters!"],
     fix: [
       "Fixed a bug with the notification where it wouldn't dismiss on changing tabs.",
       "Fixed a bug where unopened dms wouldn't show notifications on the tabs.",
       "Fixed emoji character limit bypass.",
-      "Emojis can now be inserted in firefox!",
+      "Emojis can now be inserted in firefox!"
     ],
     next: ["Online status for server members list."]
   },
@@ -425,7 +408,7 @@ const config = [
       "Adjusted some padding with the tabs."
     ],
     fix: [
-      "Fixed a vulnerability where after leaving a server, you could still send messages.",
+      "Fixed a vulnerability where after leaving a server, you could still send messages."
     ],
     next: ["Online status for server members list."]
   },
@@ -434,14 +417,12 @@ const config = [
     title: "Server bug fixes",
     shortTitle: "Server bug fixes",
     date: "03/06/2019",
-    new: [
-      "Notifications for servers has been added."
-    ],
+    new: ["Notifications for servers has been added."],
     fix: [
       "Fixed notification bug where server notification are shown in dms.",
       "When switching from server to direct message tab (and vice versa), the channels should now be separated.",
-      'You can now only create 30 invites per server.'
-    ],
+      "You can now only create 30 invites per server."
+    ]
   },
   {
     version: 4,
@@ -450,11 +431,10 @@ const config = [
     date: "23/05/2019",
     new: [
       "You can now make servers! Note that this is in alpha stage which means that it's not complete and there could be a ton of bugs everywhere :c get reporting!",
-      "Adjusted padding in some areas.",
+      "Adjusted padding in some areas."
     ],
     next: ["Members list for servers"],
-    msg:
-    `
+    msg: `
 <div style='color: red;'>
   Please note that this update could be unstable and could involve of resetting the database.
 </div>Join the official Nertivia server by clicking
@@ -474,9 +454,7 @@ color: #27a3ff;
       "Padding and margin adjusted and small design changes throughout the app.",
       "Added Oceania to the survey list."
     ],
-    fix: [
-      'Fixed bugs with appearance settings not correctly working.'
-    ],
+    fix: ["Fixed bugs with appearance settings not correctly working."],
     next: ["Servers (If nothing else distracts me -_-)"]
   },
   {
diff --git a/src/views/404.vue b/src/views/404.vue
index 4069d92..d494c55 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -3,28 +3,18 @@
     <div class="app-content">
       <header-login />
       <div class="content">
-
-          <div
-            v-if="visible"
-            class="box"
-          >
-            <div class="title">
-              <div>404</div>
-            </div>
-            <div class="info">
-              Nothing exists here.
-              <br>
-              <a style="color: #00ceff;" href="https://nertivia.tk">Go home</a>
-            </div>
-            
+        <div v-if="visible" class="box">
+          <div class="title">
+            <div>404</div>
           </div>
+          <div class="info">
+            Nothing exists here.
+            <br />
+            <a style="color: #00ceff;" href="https://nertivia.tk">Go home</a>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="background">
-      <div :class="{background: true, 'night-background': true}">
-      </div>
-      <div class="background day-background" />
-    </div>
   </div>
 </template>
 
@@ -34,15 +24,15 @@ export default {
   components: { HeaderLogin },
   data() {
     return {
-      visible: true,
+      visible: true
     };
-  },
-
+  }
 };
 </script>
 
 <style>
-html, body {
+html,
+body {
   height: 100%;
 }
 </style>
@@ -71,20 +61,11 @@ html, body {
   }
 }
 
-/* .fade-up-enter-active, .fade-up-leave-active {
-  transition: .5s;
-  transition-delay: 0.5s
-}
-.fade-up-enter, .fade-up-leave-to /* .fade-leave-active {
-  opacity: 0;
-  transform: translateX(20px)
-} */
-
 #app {
   display: flex;
   flex-direction: column;
-  transition: background 10s;
   color: white;
+  background: #173d42;
 }
 .app-content {
   display: flex;
@@ -96,31 +77,6 @@ html, body {
   z-index: 9999;
   padding-bottom: 100px;
 }
-.background {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  transition: background 10s;
-}
-
-.night-background {
-  opacity: 0;
-  transition: 10s;
-  background: linear-gradient(to bottom, #000000 0%,#606060 100%) !important;
-}
-.day-background {
-  opacity: 1;
-  background: linear-gradient(to bottom, #165dc0 0%,#5482bf 100%);  
-  z-index: -1
-}
-
-.night-background.chosen {
-  opacity: 1 !important;
-}
-
-.night-background .particles {
-  opacity: 1;
-}
 
 .content {
   display: flex;
@@ -131,15 +87,16 @@ html, body {
 .box {
   width: 100%;
   max-width: 400px;
-  background: rgba(44, 44, 44, 0.774);
   margin: auto;
   margin-top: 20px;
-  border-radius: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   z-index: 9999;
   padding-bottom: 20px;
+  background-image: url("../assets/leftPanelBackground.jpg");
+  background-position: center;
+  background-size: cover;
 }
 .box .title {
   text-align: center;
@@ -152,119 +109,9 @@ html, body {
   align-items: center;
   height: 60px;
 }
-.box .title .material-icons {
-  margin-right: 5px;
-  font-size: 40px;
-}
+
 .info {
   text-align: center;
   margin-bottom: 10px;
 }
-form {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-.input {
-  display: flex;
-  flex-direction: column;
-  margin: 10px;
-  width: 80%;
-  align-self: center;
-  background: rgb(59, 59, 59);
-  padding: 10px;
-  border-radius: 10px;
-}
-.input-text {
-  margin-bottom: 5px;
-  margin-left: 3px;
-}
-input {
-  outline: none;
-  padding: 10px;
-  border: solid 1px rgba(0, 0, 0, 0);
-  background: none;
-  border-radius: 5px;
-  background: rgb(36, 36, 36);
-  color: white;
-}
-.buttons {
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-  justify-items: center;
-}
-.button {
-  padding: 10px;
-  background: rgba(25, 151, 255, 0.699);
-  border-radius: 5px;
-  margin: 10px;
-  margin-top: 10px;
-  user-select: none;
-  border: none;
-  color: white;
-  font-size: 17px;
-  outline: none;
-  transition: 0.2s;
-  box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
-}
-.button:hover {
-  background: rgb(25, 151, 255);
-}
-.button:focus {
-  background: rgb(25, 151, 255);
-}
-.button:active {
-  background: rgb(25, 151, 255);
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
-}
-
-.button.deactive {
-  background: rgba(70, 70, 70, 0.699);
-  box-shadow: 3px 3px rgba(0, 0, 0, 0.479);
-}
-
-.button.deactive :hover {
-  background: rgba(70, 70, 70, 0.699);
-}
-.button.deactive :focus {
-  background: rgba(70, 70, 70, 0.699);
-}
-.button.deactive:active {
-  background: rgba(70, 70, 70, 0.699);
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px rgba(0, 0, 0, 0.479);
-}
-
-.register-button {
-  background: rgba(46, 204, 112, 0.67);
-  box-shadow: 3px 3px #0f7e3d;
-}
-.register-button.button:hover {
-  background: #2ecc71;
-}
-.register-button.button:focus {
-  background: #2ecc71;
-}
-.register-button.button:active {
-  background: #2ecc71;
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px #0f7e3d;
-}
-
-.captcha-input {
-  width: initial;
-}
-.captcha {
-  opacity: 0.7;
-  transition: 0.3s;
-}
-.captcha:hover {
-  opacity: 1;
-}
-.error {
-  color: red;
-}
 </style>
diff --git a/src/views/App.vue b/src/views/App.vue
index 458ab3e..0acb6bd 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -1,25 +1,24 @@
 <template>
   <div id="app" ref="app">
-    <vue-headful :title="title" description="Nertivia Chat Client"/>
+    <vue-headful :title="title" description="Nertivia Chat Client" />
     <div class="background-image"></div>
     <transition name="fade-between-two" appear>
-      <ConnectingScreen v-if="!loggedIn"/>
+      <ConnectingScreen v-if="!loggedIn" />
       <div class="box" v-if="loggedIn">
         <div class="frame" v-if="isElectron">
           <div class="window-buttons">
             <electron-frame-buttons />
           </div>
-
         </div>
         <div class="panel-layout">
-          <news v-if="currentTab == 3"/>
-          <direct-message v-if="currentTab == 1"/>
-          <servers v-if="currentTab == 2"/>
-          <explore v-if="currentTab == 0"/>
+          <news v-if="currentTab == 3" />
+          <direct-message v-if="currentTab == 1" />
+          <servers v-if="currentTab == 2" />
+          <explore v-if="currentTab == 0" />
         </div>
       </div>
     </transition>
-    <Popouts v-if="loggedIn"/>
+    <Popouts v-if="loggedIn" />
   </div>
 </template>
 
@@ -73,14 +72,13 @@ export default {
     };
   },
   methods: {
-
-    dismissNotification (channelID) {
+    dismissNotification(channelID) {
       const notifications = this.$store.getters.notifications.find(function(e) {
-        return e.channelID === channelID
-      }) 
+        return e.channelID === channelID;
+      });
 
       if (notifications && notifications.count >= 1 && document.hasFocus()) {
-        this.$socket.emit('notification:dismiss', {channelID});
+        this.$socket.emit("notification:dismiss", { channelID });
       }
     },
     switchChannel(isServer) {
@@ -88,56 +86,60 @@ export default {
       const DMChannelID = this.$store.state.channelModule.DMChannelID;
 
       if (isServer) {
-        this.$store.dispatch('selectedChannelID', serverChannelID)
-        const channel = this.$store.state.channelModule.channels[serverChannelID];
-        this.$store.dispatch("setChannelName", channel ? channel.name : "")
-        this.dismissNotification(serverChannelID)
+        this.$store.dispatch("selectedChannelID", serverChannelID);
+        const channel = this.$store.state.channelModule.channels[
+          serverChannelID
+        ];
+        this.$store.dispatch("setChannelName", channel ? channel.name : "");
+        this.dismissNotification(serverChannelID);
       } else {
         const channel = this.$store.state.channelModule.channels[DMChannelID];
-        this.$store.dispatch("setChannelName", channel ? channel.recipients[0].username : "");
-        this.$store.dispatch('selectedChannelID', DMChannelID)
-        this.dismissNotification(DMChannelID)
+        this.$store.dispatch(
+          "setChannelName",
+          channel ? channel.recipients[0].username : ""
+        );
+        this.$store.dispatch("selectedChannelID", DMChannelID);
+        this.dismissNotification(DMChannelID);
       }
-      
     },
     switchTab(index) {
       localStorage.setItem("currentTab", index);
-      this.$store.dispatch('setCurrentTab',  index)
-      if (index == 1) { //1: direct message tab.
-        this.switchChannel(false)
-      } else if (index === 2) { //2: server tab
-        this.switchChannel(true)
+      this.$store.dispatch("setCurrentTab", index);
+      if (index == 1) {
+        //1: direct message tab.
+        this.switchChannel(false);
+      } else if (index === 2) {
+        //2: server tab
+        this.switchChannel(true);
       }
     },
     resizeEvent(dimensions) {
       const width = dimensions.width;
       const height = dimensions.height;
-      this.$refs.app.style.height = height + 'px';
-      this.$refs.app.style.width = width + 'px';
+      this.$refs.app.style.height = height + "px";
+      this.$refs.app.style.width = width + "px";
     }
   },
   watch: {
     getWindowWidth(dimensions) {
-      this.resizeEvent(dimensions)
+      this.resizeEvent(dimensions);
     }
   },
   mounted() {
-
     const currentTab = localStorage.getItem("currentTab");
-    if(currentTab) {
-      this.$store.dispatch('setCurrentTab',  parseInt(currentTab))
+    if (currentTab) {
+      this.$store.dispatch("setCurrentTab", parseInt(currentTab));
     }
     // check if changelog is updated
     const seenVersion = localStorage.getItem("changelog-version-seen");
     if (seenVersion && seenVersion < changelog[0].version) {
       localStorage.setItem("currentTab", 3);
-      this.$store.dispatch('setCurrentTab',  3)
+      this.$store.dispatch("setCurrentTab", 3);
     }
     localStorage.setItem("changelog-version-seen", changelog[0].version);
     bus.$on("title:change", title => {
       this.title = title;
     });
-
   },
 
   computed: {
@@ -149,23 +151,31 @@ export default {
     },
     serverNotification() {
       const notifications = this.$store.getters.notifications;
-      const channels = this.$store.getters.channels
+      const channels = this.$store.getters.channels;
       const notification = notifications.find(e => {
-        return channels[e.channelID] && channels[e.channelID].server_id && e.channelID !== this.$store.getters.selectedChannelID 
-      })
+        return (
+          channels[e.channelID] &&
+          channels[e.channelID].server_id &&
+          e.channelID !== this.$store.getters.selectedChannelID
+        );
+      });
       return notification;
     },
     DMNotification() {
       const notifications = this.$store.getters.notifications;
-      const channels = this.$store.getters.channels
+      const channels = this.$store.getters.channels;
       const notification = notifications.find(e => {
-        return channels[e.channelID] && !channels[e.channelID].server_id && e.channelID !== this.$store.getters.selectedChannelID 
-      })
+        return (
+          channels[e.channelID] &&
+          !channels[e.channelID].server_id &&
+          e.channelID !== this.$store.getters.selectedChannelID
+        );
+      });
       // unopened dm
       if (!notification) {
         return notifications.find(e => {
-          return !channels[e.channelID]
-        })
+          return !channels[e.channelID];
+        });
       }
       return notification;
     },
@@ -177,8 +187,11 @@ export default {
       return result.find(friend => friend.status === 1);
     },
     getWindowWidth() {
-      return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
-    },
+      return {
+        width: windowProperties.resizeWidth,
+        height: windowProperties.resizeHeight
+      };
+    }
   }
 };
 </script>
@@ -191,7 +204,7 @@ export default {
   height: 100%;
 }
 
-.notifyAnimation{
+.notifyAnimation {
   animation: notifyAnime;
   animation-duration: 1s;
   animation-iteration-count: infinite;
@@ -204,22 +217,20 @@ export default {
   width: 100%;
 }
 @keyframes notifyAnime {
-  0%{
+  0% {
     background: rgba(121, 3, 3, 0.541);
   }
-  40%{
+  40% {
     background: rgba(255, 0, 0, 0.568);
   }
-  60%{
+  60% {
     background: rgba(255, 0, 0, 0.568);
   }
-  100%{
+  100% {
     background: rgba(121, 3, 3, 0.541);
   }
 }
 
-
-
 .coming-soon {
   display: flex;
   align-items: center;
@@ -289,7 +300,7 @@ export default {
   -webkit-app-region: no-drag;
   cursor: pointer;
   position: relative;
-  border-right:solid 1px rgba(0, 0, 0, 0.5);
+  border-right: solid 1px rgba(0, 0, 0, 0.5);
 }
 
 .tab:hover {
@@ -301,8 +312,6 @@ export default {
   color: white;
 }
 
-
-
 .tab .material-icons {
   font-size: 15px;
   vertical-align: -2px;
@@ -332,28 +341,21 @@ export default {
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
-
 </style>
 
 
 
 <style>
-
 textarea {
   font-family: "Roboto", sans-serif;
 }
 
 .background-image {
-  background: url(./../assets/background.jpg);
   position: fixed;
   z-index: -1;
   width: 100%;
   height: 100%;
-  background-repeat: no-repeat;
-  background-position: bottom;
-  background-size: cover;
-  filter: blur(15px);
-  transform: scale(1.1);
+  background-color: #173d42;
 }
 
 .panel-layout {
diff --git a/src/views/GDriveCallback.vue b/src/views/GDriveCallback.vue
index c9ec10c..8fd7de8 100644
--- a/src/views/GDriveCallback.vue
+++ b/src/views/GDriveCallback.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="app">
     <div class="app-content">
-      <header-login @isDay="isDayEvent" />
+      <header-login />
       <div class="content">
         <transition appear name="fade-up">
           <div class="box">
-            <div class="loading" v-if="showSpinner" >
+            <div class="loading" v-if="showSpinner">
               <spinner />
               <div class="text">Linking...</div>
             </div>
@@ -33,31 +33,25 @@ export default {
   components: { HeaderLogin, Spinner },
   data() {
     return {
-      isDay: true,
       showSpinner: true,
       error: false,
-      showSuccess: false,
+      showSuccess: false
     };
   },
   async mounted() {
     const url = new URL(location.href);
     const token = url.searchParams.get("state");
     const code = url.searchParams.get("code");
-    const {ok, error, result} = await settingsService.GDriveAuth(code, token);
+    const { ok, error, result } = await settingsService.GDriveAuth(code, token);
     if (!ok) {
       this.showSpinner = false;
       this.error = true;
     } else {
-      this.showSpinner = false
+      this.showSpinner = false;
       this.showSuccess = true;
     }
-
   },
-  methods: {
-    isDayEvent(data) {
-      this.isDay = data;
-    }
-  }
+  methods: {}
 };
 </script>
 
@@ -94,9 +88,9 @@ body {
 #app {
   display: flex;
   flex-direction: column;
-  transition: background 10s;
   color: white;
   height: 100%;
+  background: #173d42;
 }
 .app-content {
   display: flex;
@@ -108,23 +102,6 @@ body {
   z-index: 9999;
   padding-bottom: 100px;
 }
-.background {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  transition: background 10s;
-}
-
-.night-background {
-  opacity: 0;
-  transition: 10s;
-  background: linear-gradient(to bottom, #000000 0%, #606060 100%) !important;
-}
-.day-background {
-  opacity: 1;
-  background: linear-gradient(to bottom, #165dc0 0%, #5482bf 100%);
-  z-index: -1;
-}
 
 .night-background.chosen {
   opacity: 1 !important;
@@ -143,17 +120,18 @@ body {
 .box {
   width: 100%;
   max-width: 400px;
-  background: rgba(75, 75, 75, 0.774);
   transition: 0.3s;
   margin: auto;
   margin-top: 20px;
-  border-radius: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   padding: 20px;
+  background-image: url("../assets/leftPanelBackground.jpg");
+  background-position: center;
+  background-size: cover;
 }
 
 .loading {
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 3bc8803..868a437 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -2,8 +2,7 @@
   <div id="app">
     <vue-headful title="Nertivia" description="Nertivia Chat Client" />
     <div ref="backgroundImage" class="background-image" />
-    <spinner v-if="!showPage" />
-    <div v-if="showPage" class="content">
+    <div class="content">
       <transition name="fall-down" appear>
         <div class="header">
           <div class="logo" />
@@ -38,7 +37,7 @@
           <div
             class="title"
           >The best chat client that won't restrict you from important and fun features.</div>
-          <img class="graphic" src="@/assets/graphics/HomeGraphics2.png" />
+          <img class="graphic" src="@/assets/graphics/HomeGraphics.png" />
           <div class="buttons">
             <div class="button" @click="openApp">Open In Browser</div>
             <div class="button download" @click="showDownloadsPopout = true">Download App</div>
@@ -65,7 +64,7 @@
     </div>
     <div class="popouts">
       <transition name="fade">
-        <download-app-popout v-if="showDownloadsPopout" @close="showDownloadsPopout = false"/>
+        <download-app-popout v-if="showDownloadsPopout" @close="showDownloadsPopout = false" />
       </transition>
     </div>
   </div>
@@ -85,7 +84,6 @@ export default {
     return {
       showDownloadsPopout: false,
       showProfilePopout: false,
-      showPage: false,
       loggedIn: localStorage.getItem("hauthid") || null,
       user: null,
       avatarDomain: config.domain + "/avatars/"
@@ -93,7 +91,6 @@ export default {
   },
   async mounted() {
     if (this.loggedIn) this.getUser();
-    this.preloadImages();
   },
   methods: {
     closeProfilePopout(event) {
@@ -112,34 +109,6 @@ export default {
     openApp() {
       window.location.href = "/app";
     },
-    async imagePreloader(srcArray) {
-      srcArray.forEach(async element => {
-        await wrapper(element);
-      });
-      function wrapper(src) {
-        return new Promise(resolve => {
-          const image = new Image();
-          image.src = src;
-          image.onload = () => resolve("done");
-        });
-      }
-    },
-    async preloadImages() {
-      await this.imagePreloader([
-        require("@/assets/logo.png"),
-        require("@/assets/graphics/HomeGraphics2.png")
-      ]);
-      const src = require("@/assets/background.jpg");
-      const background = new Image();
-      setTimeout(() => {
-        background.src = src;
-        background.onload = () => {
-          this.$refs.backgroundImage.style.backgroundImage = `url(${background.src})`;
-          this.$refs.backgroundImage.style.opacity = 0.7;
-          setTimeout(() => (this.showPage = true), 500);
-        };
-      }, 500);
-    },
     async getUser() {
       const { ok, error, result } = await AuthenticationService.user();
       if (!ok) {
@@ -163,9 +132,9 @@ export default {
 
 
 <style scoped>
-
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .2s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
 }
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
@@ -247,14 +216,15 @@ body {
   height: 100%;
 }
 .header {
-  background: rgba(0, 0, 0, 0.52);
   display: flex;
   height: 70px;
-  margin: 5px;
-  border-radius: 10px;
   flex-shrink: 0;
   border: 10px;
   position: relative;
+  background-image: url("../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
 }
 .logo {
   background-image: url("../assets/logo.png");
@@ -279,11 +249,8 @@ body {
   position: fixed;
   width: 100%;
   height: 100%;
-  background-repeat: no-repeat;
-  background-position: bottom;
-  background-size: cover;
-  opacity: 0;
   transition: 0.5s;
+  background-color: #173d42;
 }
 .content {
   position: fixed;
@@ -312,6 +279,7 @@ body {
   margin-bottom: 0;
   user-select: none;
   flex-shrink: 0;
+  border: solid 5px #0f272a;
 }
 .title {
   font-size: 25px;
@@ -329,36 +297,24 @@ body {
 .button {
   padding: 15px;
   background: rgba(24, 132, 255, 0.733);
-  border-radius: 5px;
   color: white;
-  box-shadow: 3px 3px rgb(5, 86, 179);
   user-select: none;
   transition: 0.3s;
   margin: 10px;
+  cursor: pointer;
 }
 
 .button:hover {
   background: rgb(24, 132, 255);
 }
-.button:active {
-  transform: translate(3px, 3px);
-  box-shadow: 0 0 rgb(5, 86, 179);
-}
 
 .button.download {
   background: rgba(0, 223, 67, 0.733);
-  box-shadow: 3px 3px rgb(0, 121, 36);
 }
 
-
 .button.download:hover {
-  background: rgba(0, 223, 67, 0.777);
+  background: rgba(0, 223, 67, 0.904);
 }
-.button.download:active {
-  transform: translate(3px, 3px);
-  box-shadow: 0 0 rgb(0, 121, 36);
-}
-
 
 .features-list {
   margin-top: 20px;
@@ -368,7 +324,7 @@ body {
   justify-content: center;
 }
 .feature {
-  background: rgba(0, 0, 0, 0.541);
+  background: #102a2e;
   color: white;
   margin: 10px;
   padding: 2px;
@@ -379,7 +335,6 @@ body {
   justify-content: center;
   height: 200px;
   width: 200px;
-  border-radius: 10px;
   flex-shrink: 0;
   transition: 0.3s;
 }
@@ -397,12 +352,12 @@ body {
   display: flex;
 }
 .link {
-  padding: 5px;
+  padding: 10px;
   background: rgba(0, 0, 0, 0.219);
-  border-radius: 5px;
   user-select: none;
   margin-left: 5px;
   transition: 0.3s;
+  cursor: pointer;
 }
 .link:hover {
   background: rgba(255, 255, 255, 0.26);
diff --git a/src/views/Invites.vue b/src/views/Invites.vue
index 7b7ea8e..2adb9f8 100644
--- a/src/views/Invites.vue
+++ b/src/views/Invites.vue
@@ -1,76 +1,46 @@
 <template>
   <div id="app">
     <div class="app-content">
-      <header-login @isDay="isDayEvent" />
+      <header-login />
       <div class="content">
-        <transition
-          appear
-          name="fade-up"
-        >
+        <transition appear name="fade-up">
           <div :class="{box: true, red: server === undefined}">
             <spinner v-if="server === null" />
             <div v-if="server === undefined">
-              <div class="invalid">
-                {{ errorMsg }}
-              </div>
+              <div class="invalid">{{ errorMsg }}</div>
             </div>
-            <div
-              v-if="server"
-              class="server"
-            >
-              <profile-picture
-                class="avatar"
-                size="100px"
-                :url="domain + server.avatar"
-              />
-              <div class="server-name">
-                {{ server.name }}
-              </div>
+            <div v-if="server" class="server">
+              <profile-picture class="avatar" size="100px" :url="domain + server.avatar" />
+              <div class="server-name">{{ server.name }}</div>
               <div class="buttons">
                 <div
                   v-if="loggedIn"
                   class="button join-button"
                   @click="joinServerButton"
-                >
-                  Join {{ server.name }}
-                </div>
-                <div
-                  v-else
-                  class="button join-button"
-                  @click="loginButton"
-                >
-                  Login to join
-                </div>
+                >Join {{ server.name }}</div>
+                <div v-else class="button join-button" @click="loginButton">Login to join</div>
               </div>
             </div>
           </div>
         </transition>
       </div>
     </div>
-    <div class="background">
-      <div :class="{background: true, 'night-background': true, chosen: !isDay}">
-        <particlesJS class="particles" />
-      </div>
-      <div class="background day-background" />
-    </div>
   </div>
 </template>
 
 <script>
 import config from "@/config";
-import particlesJS from "@/components/ParticlesJS.vue";
 import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 import Spinner from "@/components/Spinner.vue";
 import ServerService from "@/services/ServerService";
 export default {
-  components: { HeaderLogin, particlesJS, Spinner, ProfilePicture},
+  components: { HeaderLogin, Spinner, ProfilePicture },
   data() {
     return {
-      isDay: true,
       server: null,
       domain: config.domain + "/avatars/",
-      loggedIn: localStorage.getItem('hauthid'),
+      loggedIn: localStorage.getItem("hauthid"),
       errorMsg: ""
     };
   },
@@ -83,23 +53,21 @@ export default {
       if (error.response === undefined) {
         this.errorMsg = "Cannot connect to server. Try again later.";
       } else {
-        this.errorMsg = "The invite code is either invalid, expired or blocked.";
+        this.errorMsg =
+          "The invite code is either invalid, expired or blocked.";
       }
       this.server = undefined;
     }
   },
   methods: {
-    isDayEvent(data) {
-      this.isDay = data;
-    },
     async joinServerButton(event) {
       if (event.target.classList.contains("button-clicked")) return;
       event.target.classList.add("button-clicked");
       const inviteID = this.$route.params.invite_id;
       if (!localStorage.getItem("hauthid")) {
-        return this.loggedIn = undefined; 
+        return (this.loggedIn = undefined);
       }
-      const { ok, error, result } = await ServerService.joinServer(inviteID)
+      const { ok, error, result } = await ServerService.joinServer(inviteID);
       if (ok) {
         this.$router.push(`/app`);
       } else {
@@ -109,11 +77,11 @@ export default {
           this.errorMsg = "Cannot connect to server. Try again later.";
         } else {
           const status = error.response.status;
-          if (status === 409){
+          if (status === 409) {
             return this.$router.push(`/app`);
           }
-          if (status === 404){
-            return this.errorMsg = "Invite does not exist.";
+          if (status === 404) {
+            return (this.errorMsg = "Invite does not exist.");
           }
           this.errorMsg = "Something went wrong. Try again later.";
         }
@@ -161,9 +129,9 @@ body {
 #app {
   display: flex;
   flex-direction: column;
-  transition: background 10s;
   color: white;
   height: 100%;
+  background: #173d42;
 }
 .app-content {
   display: flex;
@@ -175,32 +143,6 @@ body {
   z-index: 9999;
   padding-bottom: 100px;
 }
-.background {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  transition: background 10s;
-}
-
-.night-background {
-  opacity: 0;
-  transition: 10s;
-  background: linear-gradient(to bottom, #000000 0%, #606060 100%) !important;
-}
-.day-background {
-  opacity: 1;
-  background: linear-gradient(to bottom, #165dc0 0%, #5482bf 100%);
-  z-index: -1;
-}
-
-.night-background.chosen {
-  opacity: 1 !important;
-}
-
-.night-background .particles {
-  opacity: 1;
-}
-
 .content {
   display: flex;
   height: 100%;
@@ -210,17 +152,17 @@ body {
 .box {
   width: 100%;
   max-width: 400px;
-  background: rgba(44, 44, 44, 0.774);
-  transition: 0.3s;
   margin: auto;
   margin-top: 20px;
-  border-radius: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   padding-bottom: 20px;
+  background-image: url("../assets/leftPanelBackground.jpg");
+  background-position: center;
+  background-size: cover;
 }
 .server {
   display: flex;
@@ -230,11 +172,11 @@ body {
 
   height: 300px;
 }
-.invalid{
+.invalid {
   margin-top: 15px;
 }
-.red{
-  background: rgba(117, 10, 10, 0.774)
+.red {
+  background: #9e1a1c;
 }
 .avatar {
   align-self: center;
@@ -250,18 +192,16 @@ body {
 .button {
   padding: 10px;
   background: rgba(25, 151, 255, 0.699);
-  border-radius: 5px;
   user-select: none;
   border: none;
   color: white;
   font-size: 17px;
   outline: none;
   transition: 0.2s;
-  box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
   align-self: center;
   flex-shrink: 0;
   text-align: center;
-
+  cursor: pointer;
 }
 .button:hover {
   background: rgb(25, 151, 255);
@@ -269,15 +209,8 @@ body {
 .button:focus {
   background: rgb(25, 151, 255);
 }
-.button:active {
-  background: rgb(25, 151, 255);
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
-}
 
 .button-clicked {
   background: rgb(126, 126, 126) !important;
-  transform: translate(3px, 3px) !important;
-  box-shadow: 0px 0px rgba(61, 61, 61, 0.479) !important;
 }
 </style>
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index 0969294..3bf1214 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -2,95 +2,50 @@
   <div id="app">
     <electron-frame-buttons v-if="isElectron" />
     <div class="app-content">
-      <header-login @isDay="isDayEvent" />
+      <header-login />
       <div class="content">
-        <transition
-          appear
-          name="fade-up"
-        >
-          <div
-            v-if="visible"
-            class="box"
-          >
+        <transition appear name="fade-up">
+          <div v-if="visible" class="box">
             <div class="title">
               <i class="material-icons">account_circle</i>
               Login
             </div>
-            <div class="info">
-              Login to access Nertivia
-            </div>
-            <form
-              v-if="!showCaptcha"
-              action="#"
-              @submit.prevent="submitForm"
-            >
+            <div class="info">Login to access Nertivia</div>
+            <form v-if="!showCaptcha" action="#" @submit.prevent="submitForm">
               <div class="input">
                 <div class="input-text">
                   Email
-                  <span
-                    v-if="email.alert"
-                    class="error"
-                  >- {{ email.alert }}</span>
+                  <span v-if="email.alert" class="error">- {{ email.alert }}</span>
                 </div>
-                <input
-                  v-model="email.value"
-                  type="email"
-                  placeholder="Email"
-                >
+                <input v-model="email.value" type="email" placeholder="Email" />
               </div>
               <div class="input">
                 <div class="input-text">
                   Password
-                  <span
-                    v-if="password.alert"
-                    class="error"
-                  >- {{ password.alert }}</span>
+                  <span v-if="password.alert" class="error">- {{ password.alert }}</span>
                 </div>
                 <input
                   v-model="password.value"
                   type="password"
                   autocomplete="password"
                   placeholder="Password"
-                >
+                />
               </div>
 
-              <span
-                v-if="otherError"
-                class="error"
-                style="text-align: center;"
-              >{{ otherError }}</span>
+              <span v-if="otherError" class="error" style="text-align: center;">{{ otherError }}</span>
               <div class="buttons">
-                <button
-                  type="submit"
-                  :class="{button: true, deactive: deactive}"
-                >
-                  Login
-                </button>
-                <button
-                  class="button register-button"
-                  @click.prevent="registerButton"
-                >
-                  I'm new!
-                </button>
+                <button class="button register-button" @click.prevent="registerButton">I'm new!</button>
+                <button type="submit" :class="{button: true, deactive: deactive}">Login</button>
               </div>
             </form>
-            <div
-              v-if="showCaptcha"
-              class="captcha-box"
-            >
+            <div v-if="showCaptcha" class="captcha-box">
               <div class="input captcha-input">
                 <div class="input-text">
                   Beep Boop
-                  <span
-                    v-if="reCaptcha.alert"
-                    class="error"
-                  >- {{ reCaptcha.alert }}</span>
+                  <span v-if="reCaptcha.alert" class="error">- {{ reCaptcha.alert }}</span>
                 </div>
                 <div class="captcha">
-                  <Recaptcha
-                    ref="recaptcha"
-                    @verify="captchaSubmit"
-                  />
+                  <Recaptcha ref="recaptcha" @verify="captchaSubmit" />
                 </div>
               </div>
             </div>
@@ -98,12 +53,6 @@
         </transition>
       </div>
     </div>
-    <div class="background">
-      <div :class="{background: true, 'night-background': true, chosen: !isDay}">
-        <particlesJS class="particles" />
-      </div>
-      <div class="background day-background" />
-    </div>
   </div>
 </template>
 
@@ -111,13 +60,12 @@
 import Recaptcha from "@/components/Recaptcha.vue";
 import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
 import AuthenticationService from "@/services/AuthenticationService";
-import particlesJS from "@/components/ParticlesJS.vue";
 
 const ElectronFrameButtons = () =>
   import("@/components/ElectronJS/FrameButtons.vue");
 
 export default {
-  components: { HeaderLogin, Recaptcha, particlesJS, ElectronFrameButtons },
+  components: { HeaderLogin, Recaptcha, ElectronFrameButtons },
   data() {
     return {
       isElectron: window && window.process && window.process.type,
@@ -130,7 +78,6 @@ export default {
       otherError: "",
 
       captchaToken: "",
-      isDay: true,
       deactive: false
     };
   },
@@ -142,9 +89,7 @@ export default {
       this.reCaptcha.alert = "";
       this.otherError = "";
     },
-    isDayEvent(data) {
-      this.isDay = data;
-    },
+
     captchaSubmit(token) {
       this.captchaToken = token;
       this.login();
@@ -171,14 +116,14 @@ export default {
         this.visible = false;
         this.$store.dispatch("token", result.data.token);
         setTimeout(_ => {
-          const {to, id} = this.$route.query;
+          const { to, id } = this.$route.query;
           if (to) {
-            return window.location.href = `/${to}/${id}`
+            return (window.location.href = `/${to}/${id}`);
           }
           window.location.href = "/app";
         }, 1000);
       } else {
-        this.showCaptcha = false
+        this.showCaptcha = false;
         this.deactive = false;
         this.captchaToken = null;
         this.$refs.recaptcha.resetRecaptcha();
@@ -206,7 +151,8 @@ export default {
 </script>
 
 <style>
-html, body {
+html,
+body {
   height: 100%;
 }
 </style>
@@ -235,21 +181,12 @@ html, body {
   }
 }
 
-/* .fade-up-enter-active, .fade-up-leave-active {
-  transition: .5s;
-  transition-delay: 0.5s
-}
-.fade-up-enter, .fade-up-leave-to /* .fade-leave-active {
-  opacity: 0;
-  transform: translateX(20px)
-} */
-
 #app {
   display: flex;
   flex-direction: column;
-  transition: background 10s;
   color: white;
-    height: 100%;
+  height: 100%;
+  background: #173d42;
 }
 .app-content {
   display: flex;
@@ -259,50 +196,26 @@ html, body {
   overflow: auto;
   z-index: 9999;
 }
-.background {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  transition: background 10s;
-}
-
-.night-background {
-  opacity: 0;
-  transition: 10s;
-  background: linear-gradient(to bottom, #000000 0%,#606060 100%) !important;
-}
-.day-background {
-  opacity: 1;
-  background: linear-gradient(to bottom, #165dc0 0%,#5482bf 100%);  
-  z-index: -1
-}
-
-.night-background.chosen {
-  opacity: 1 !important;
-}
-
-.night-background .particles {
-  opacity: 1;
-}
 
 .content {
   display: flex;
   height: 100%;
   margin: 10px;
-  flex-shrink:0;
+  flex-shrink: 0;
 }
 .box {
   width: 100%;
   max-width: 400px;
-  background: rgba(44, 44, 44, 0.774);
   margin: auto;
   margin-top: 20px;
-  border-radius: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   z-index: 9999;
   padding-bottom: 20px;
+  background-image: url("../assets/leftPanelBackground.jpg");
+  background-position: center;
+  background-size: cover;
 }
 .box .title {
   text-align: center;
@@ -334,9 +247,8 @@ form {
   margin: 10px;
   width: 80%;
   align-self: center;
-  background: rgb(59, 59, 59);
+  background: #074d57;
   padding: 10px;
-  border-radius: 10px;
 }
 .input-text {
   margin-bottom: 5px;
@@ -345,10 +257,8 @@ form {
 input {
   outline: none;
   padding: 10px;
-  border: solid 1px rgba(0, 0, 0, 0);
-  background: none;
-  border-radius: 5px;
-  background: rgb(36, 36, 36);
+  border: none;
+  background: #03262b;
   color: white;
 }
 .buttons {
@@ -361,7 +271,6 @@ input {
 .button {
   padding: 10px;
   background: rgba(25, 151, 255, 0.699);
-  border-radius: 5px;
   margin: 10px;
   margin-top: 10px;
   user-select: none;
@@ -370,7 +279,7 @@ input {
   font-size: 17px;
   outline: none;
   transition: 0.2s;
-  box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
+  cursor: pointer;
 }
 .button:hover {
   background: rgb(25, 151, 255);
@@ -378,15 +287,9 @@ input {
 .button:focus {
   background: rgb(25, 151, 255);
 }
-.button:active {
-  background: rgb(25, 151, 255);
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
-}
 
 .button.deactive {
   background: rgba(70, 70, 70, 0.699);
-  box-shadow: 3px 3px rgba(0, 0, 0, 0.479);
 }
 
 .button.deactive :hover {
@@ -395,15 +298,9 @@ input {
 .button.deactive :focus {
   background: rgba(70, 70, 70, 0.699);
 }
-.button.deactive:active {
-  background: rgba(70, 70, 70, 0.699);
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px rgba(0, 0, 0, 0.479);
-}
 
 .register-button {
   background: rgba(46, 204, 112, 0.67);
-  box-shadow: 3px 3px #0f7e3d;
 }
 .register-button.button:hover {
   background: #2ecc71;
@@ -411,11 +308,6 @@ input {
 .register-button.button:focus {
   background: #2ecc71;
 }
-.register-button.button:active {
-  background: #2ecc71;
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px #0f7e3d;
-}
 
 .captcha-input {
   width: initial;
diff --git a/src/views/RegisterPage.vue b/src/views/RegisterPage.vue
index 5f13fcc..1848b33 100644
--- a/src/views/RegisterPage.vue
+++ b/src/views/RegisterPage.vue
@@ -2,108 +2,63 @@
   <div id="app">
     <electron-frame-buttons v-if="isElectron" />
     <div class="app-content">
-      <header-login @isDay="isDayEvent" />
+      <header-login />
       <div class="content">
-        <transition
-          appear
-          name="fade-up"
-        >
-          <div
-            v-if="visible"
-            class="box"
-          >
+        <transition appear name="fade-up">
+          <div v-if="visible" class="box">
             <div class="title">
               <i class="material-icons">account_circle</i>
               Register
             </div>
-            <div class="info">
-              Welcome, new user! I Hope you enjoy Nertivia!
-            </div>
-            <form
-              v-if="!showCaptcha"
-              action="#"
-              @submit.prevent="formSubmit"
-            >
+            <div class="info">Welcome, new user! I Hope you enjoy Nertivia!</div>
+            <form v-if="!showCaptcha" action="#" @submit.prevent="formSubmit">
               <div class="input">
                 <div class="input-text">
                   Email
-                  <span
-                    v-if="email.alert"
-                    class="error"
-                  >- {{ email.alert }}</span>
+                  <span v-if="email.alert" class="error">- {{ email.alert }}</span>
                 </div>
-                <input
-                  v-model="email.value"
-                  type="email"
-                  placeholder="Email"
-                  autocomplete="off"
-                >
+                <input v-model="email.value" type="email" placeholder="Email" autocomplete="off" />
               </div>
 
               <div class="input">
                 <div class="input-text">
                   Username
-                  <span
-                    v-if="username.alert"
-                    class="error"
-                  >- {{ username.alert }}</span>
+                  <span v-if="username.alert" class="error">- {{ username.alert }}</span>
                 </div>
                 <input
                   v-model="username.value"
                   type="text"
                   placeholder="Username"
                   autocomplete="off"
-                >
+                />
               </div>
 
               <div class="input">
                 <div class="input-text">
                   Password
-                  <span
-                    v-if="password.alert"
-                    class="error"
-                  >- {{ password.alert }}</span>
+                  <span v-if="password.alert" class="error">- {{ password.alert }}</span>
                 </div>
                 <input
                   v-model="password.value"
                   type="password"
                   autocomplete="off"
                   placeholder="Password"
-                >
+                />
               </div>
-              <span
-                v-if="otherError"
-                class="error"
-                style="text-align: center;"
-              >{{ otherError }}</span>
+              <span v-if="otherError" class="error" style="text-align: center;">{{ otherError }}</span>
               <div class="buttons">
-                <button
-                  type="submit"
-                  :class="{button: true, deactive: deactive}"
-                >
-                  Register
-                </button>
                 <button
                   class="button register-button"
                   @click.prevent="loginButton"
-                >
-                  I'm already a user!
-                </button>
+                >I'm already a user!</button>
+                <button type="submit" :class="{button: true, deactive: deactive}">Register</button>
               </div>
             </form>
-            <div
-              v-if="showCaptcha"
-              class="captcha-box"
-            >
+            <div v-if="showCaptcha" class="captcha-box">
               <div class="input captcha-input">
-                <div class="input-text">
-                  Beep Boop
-                </div>
+                <div class="input-text">Beep Boop</div>
                 <div class="captcha">
-                  <Recaptcha
-                    ref="recaptcha"
-                    @verify="captchaSubmit"
-                  />
+                  <Recaptcha ref="recaptcha" @verify="captchaSubmit" />
                 </div>
               </div>
             </div>
@@ -111,26 +66,18 @@
         </transition>
       </div>
     </div>
-    <div class="background">
-      <div :class="{background: true, 'night-background': true, chosen: !isDay}">
-        <particlesJS class="particles" />
-      </div>
-      <div class="background day-background" />
-    </div>
   </div>
 </template>
 
 <script>
 import Recaptcha from "@/components/Recaptcha.vue";
 import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
-import AuthenticationService from "@/services/AuthenticationService";
-import particlesJS from "@/components/ParticlesJS.vue";
 
 const ElectronFrameButtons = () =>
   import("@/components/ElectronJS/FrameButtons.vue");
 
 export default {
-  components: { HeaderLogin, Recaptcha, particlesJS, ElectronFrameButtons },
+  components: { HeaderLogin, Recaptcha, ElectronFrameButtons },
   data() {
     return {
       isElectron: window && window.process && window.process.type,
@@ -143,7 +90,6 @@ export default {
       otherError: "",
 
       captchaToken: "",
-      isDay: true,
       deactive: false
     };
   },
@@ -155,9 +101,6 @@ export default {
       this.password.alert = "";
       this.otherError = "";
     },
-    isDayEvent(data) {
-      this.isDay = data;
-    },
     captchaSubmit(token) {
       this.captchaToken = token;
       this.register();
@@ -171,7 +114,6 @@ export default {
       const username = this.username.value.trim();
       const password = this.password.value.trim();
 
-
       const { ok, error, result } = await AuthenticationService.register({
         email,
         username,
@@ -185,7 +127,7 @@ export default {
           window.location.href = "/app";
         }, 1000);
       } else {
-        this.showCaptcha = false
+        this.showCaptcha = false;
         this.deactive = false;
         this.captchaToken = null;
         this.$refs.recaptcha.resetRecaptcha();
@@ -213,7 +155,8 @@ export default {
 </script>
 
 <style>
-html, body {
+html,
+body {
   height: 100%;
 }
 </style>
@@ -242,20 +185,11 @@ html, body {
   }
 }
 
-/* .fade-up-enter-active, .fade-up-leave-active {
-  transition: .5s;
-  transition-delay: 0.5s
-}
-.fade-up-enter, .fade-up-leave-to /* .fade-leave-active {
-  opacity: 0;
-  transform: translateX(20px)
-} */
-
 #app {
   display: flex;
   flex-direction: column;
-  transition: background 10s;
   color: white;
+  background: #173d42;
 }
 .app-content {
   display: flex;
@@ -265,31 +199,6 @@ html, body {
   overflow: auto;
   z-index: 9999;
 }
-.background {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  transition: background 10s;
-}
-
-.night-background {
-  opacity: 0;
-  transition: 10s;
-  background: linear-gradient(to bottom, #000000 0%,#606060 100%) !important;
-}
-.day-background {
-  opacity: 1;
-  background: linear-gradient(to bottom, #165dc0 0%,#5482bf 100%);  
-  z-index: -1
-}
-
-.night-background.chosen {
-  opacity: 1 !important;
-}
-
-.night-background .particles {
-  opacity: 1;
-}
 
 .content {
   display: flex;
@@ -300,15 +209,16 @@ html, body {
 .box {
   width: 100%;
   max-width: 400px;
-  background: rgba(44, 44, 44, 0.774);
   margin: auto;
   margin-top: 20px;
-  border-radius: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   z-index: 9999;
   padding-bottom: 20px;
+  background-image: url("../assets/leftPanelBackground.jpg");
+  background-position: center;
+  background-size: cover;
 }
 .box .title {
   text-align: center;
@@ -340,9 +250,8 @@ form {
   margin: 10px;
   width: 80%;
   align-self: center;
-  background: rgb(59, 59, 59);
+  background: #074d57;
   padding: 10px;
-  border-radius: 10px;
 }
 .input-text {
   margin-bottom: 5px;
@@ -351,10 +260,9 @@ form {
 input {
   outline: none;
   padding: 10px;
-  border: solid 1px rgba(0, 0, 0, 0);
+  border: none;
   background: none;
-  border-radius: 5px;
-  background: rgb(36, 36, 36);
+  background: #03262b;
   color: white;
 }
 .buttons {
@@ -367,7 +275,6 @@ input {
 .button {
   padding: 10px;
   background: rgba(25, 151, 255, 0.699);
-  border-radius: 5px;
   margin: 10px;
   margin-top: 10px;
   user-select: none;
@@ -376,7 +283,7 @@ input {
   font-size: 17px;
   outline: none;
   transition: 0.2s;
-  box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
+  cursor: pointer;
 }
 .button:hover {
   background: rgb(25, 151, 255);
@@ -384,15 +291,9 @@ input {
 .button:focus {
   background: rgb(25, 151, 255);
 }
-.button:active {
-  background: rgb(25, 151, 255);
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
-}
 
 .button.deactive {
   background: rgba(70, 70, 70, 0.699);
-  box-shadow: 3px 3px rgba(0, 0, 0, 0.479);
 }
 
 .button.deactive :hover {
@@ -401,15 +302,9 @@ input {
 .button.deactive :focus {
   background: rgba(70, 70, 70, 0.699);
 }
-.button.deactive:active {
-  background: rgba(70, 70, 70, 0.699);
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px rgba(0, 0, 0, 0.479);
-}
 
 .register-button {
   background: rgba(46, 204, 112, 0.67);
-  box-shadow: 3px 3px #0f7e3d;
 }
 .register-button.button:hover {
   background: #2ecc71;
@@ -417,11 +312,6 @@ input {
 .register-button.button:focus {
   background: #2ecc71;
 }
-.register-button.button:active {
-  background: #2ecc71;
-  transform: translate(3px, 3px);
-  box-shadow: 0px 0px #0f7e3d;
-}
 
 .captcha-input {
   width: initial;