diff --git a/src/components/app/FriendsList.vue b/src/components/app/FriendsList.vue
index e3869fd..c19202f 100644
--- a/src/components/app/FriendsList.vue
+++ b/src/components/app/FriendsList.vue
@@ -2,6 +2,7 @@
   <div class="left-panel">
     <navigation />
     <div class="content">
+      <MyMiniInformation />
       <div class="tabs">
         <div
           class="tab"
@@ -22,8 +23,6 @@
       <div v-else class="list">
         <recent-friends />
       </div>
-      <div class="seperater" />
-      <MyMiniInformation />
     </div>
   </div>
 </template>
@@ -94,15 +93,12 @@ export default {
 <style scoped>
 .left-panel {
   height: 100%;
-  width: 300px;
+  width: 340px;
+  max-width: calc(100% - 60px);
   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;
@@ -110,6 +106,9 @@ export default {
   flex-shrink: 0;
   flex: 1;
   overflow: hidden;
+  background: rgba(0, 0, 0, 0.14);
+  border-top-left-radius: 10px;
+
 }
 .list {
   flex: 1;
@@ -136,7 +135,6 @@ export default {
   height: 50px;
   transition: 0.2s;
   cursor: pointer;
-  background: #075e64;
   position: relative;
 }
 .tab .material-icons {
@@ -220,4 +218,10 @@ export default {
     background: rgba(121, 3, 3, 0.541);
   }
 }
+
+@media (max-width: 600px) {
+  .content{
+    border-radius: 0;
+  }
+}
 </style>
diff --git a/src/components/app/MainNav.vue b/src/components/app/MainNav.vue
index c3421f3..657ae6c 100644
--- a/src/components/app/MainNav.vue
+++ b/src/components/app/MainNav.vue
@@ -3,57 +3,78 @@
     <div
       class="tool-tip"
       ref="toolTip"
-      :style="{top: toolTipTopPosition + 'px'}"
+      :style="{ left: toolTipLeftPosition + 'px' }"
       v-if="toolTipShown"
-    >{{toolTipLocalName || servers[toolTipServerID].name}}</div>
-    <div class="container" @mouseleave="mouseLeaveEvent">
-        <div class="navigation-items">
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 0}"
-            @click="switchTab(0)"
-            @mouseenter="localToolTipEvent('Explore', $event)"
-          >explore</div>
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 1, notifyAnimation: DMNotification || friendRequestExists}"
-            @click="switchTab(1)"
-            @mouseenter="localToolTipEvent('Direct Message', $event)"
-          >chat</div>
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 2, notifyAnimation: serverNotification}"
-            @click="switchTab(2)"
-            @mouseenter="localToolTipEvent('Servers', $event)"
-          >forum</div>
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 3}"
-            @click="switchTab(3)"
-            @mouseenter="localToolTipEvent('Changelog', $event)"
-          >import_contacts</div>
-          <div
-            v-if="!user.survey_completed"
-            class="item material-icons"
-            @click="openSurvey"
-            @mouseenter="localToolTipEvent('Click Me', $event)"
-          >error</div>
-        </div>
+    >
+      {{ toolTipLocalName || servers[toolTipServerID].name }}
+    </div>
+    <div class="container" @mouseleave="mouseLeaveEvent">
+      <div class="navigation-items">
+        <div
+          class="item material-icons"
+          :class="{ selected: currentTab == 0 }"
+          @click="switchTab(0)"
+          @mouseenter="localToolTipEvent('Explore', $event)"
+        >
+          explore
+        </div>
+        <div
+          class="item material-icons"
+          :class="{
+            selected: currentTab == 1,
+            notifyAnimation: DMNotification || friendRequestExists
+          }"
+          @click="switchTab(1)"
+          @mouseenter="localToolTipEvent('Direct Message', $event)"
+        >
+          chat
+        </div>
+        <div
+          class="item material-icons"
+          :class="{
+            selected: currentTab == 2,
+            notifyAnimation: serverNotification
+          }"
+          @click="switchTab(2)"
+          @mouseenter="localToolTipEvent('Servers', $event)"
+        >
+          forum
+        </div>
+        <div
+          class="item material-icons"
+          :class="{ selected: currentTab == 3 }"
+          @click="switchTab(3)"
+          @mouseenter="localToolTipEvent('Changelog', $event)"
+        >
+          import_contacts
+        </div>
+        <div
+          v-if="!user.survey_completed"
+          class="item material-icons"
+          @click="openSurvey"
+          @mouseenter="localToolTipEvent('Click Me', $event)"
+        >
+          error
+        </div>
+      </div>
+    </div>
+    <div
+      class="item material-icons"
+      @click="openSettings"
+      @mouseleave="mouseLeaveEvent"
+      @mouseenter="localToolTipEvent('Settings', $event)"
+    >
+      settings
     </div>
-      <div
-        class="item material-icons"
-        @click="openSettings"
-        @mouseenter="localToolTipEvent('Settings', $event)"
-      >settings</div>
   </div>
 </template>
 
 <script>
 import { bus } from "@/main.js";
 import config from "@/config.js";
-import settingsService from '@/services/settingsService';
+import settingsService from "@/services/settingsService";
 import ServerTemplate from "@/components/app/ServerTemplate/ServerTemplate";
-import draggable from 'vuedraggable'
+import draggable from "vuedraggable";
 import { isMobile } from "@/utils/Mobile";
 export default {
   components: { ServerTemplate, draggable },
@@ -61,12 +82,12 @@ export default {
     return {
       avatarDomain: config.domain + "/avatars",
       toolTipShown: false,
-      toolTipTopPosition: 0,
+      toolTipLeftPosition: 0,
       toolTipServerID: null,
       toolTipLocalName: null,
       mobile: isMobile(),
 
-      drag: false,
+      drag: false
     };
   },
   methods: {
@@ -78,7 +99,7 @@ export default {
     onStart() {
       this.toolTipShown = false;
       this.drag = true;
-      this.$store.dispatch("setAllPopout", {show: false});
+      this.$store.dispatch("setAllPopout", { show: false });
     },
     dismissNotification(channelID) {
       const notifications = this.$store.getters.notifications.find(function(e) {
@@ -144,26 +165,22 @@ export default {
       });
     },
     localToolTipEvent(name, event) {
-      const rect = event.target.getBoundingClientRect();
       this.toolTipLocalName = name;
-      this.toolTipTopPosition = rect.top - this.getTopHeight() + 16;
-      this.toolTipShown = true;
-    },
-    serverToolTipEvent({ serverID, top }) {
-      if (this.drag) return;
-      this.toolTipLocalName = null;
-      this.toolTipServerID = serverID;
-      this.toolTipTopPosition = top - this.getTopHeight() + 16;
       this.toolTipShown = true;
+
+      this.$nextTick(() => {
+        const width = window.innerWidth;
+        const tooltipWidth = this.$refs.toolTip.clientWidth;
+        const rect = event.target.getBoundingClientRect();
+        this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 25;
+      });
     },
+
     mouseLeaveEvent() {
       this.toolTipShown = false;
       this.toolTipServerID = null;
       this.toolTipLocalName = null;
     },
-    getTopHeight() {
-      return window.innerHeight - this.$refs["navigation"].offsetHeight;
-    },
     addServer() {
       this.$store.dispatch("setPopoutVisibility", {
         name: "addServer",
@@ -197,13 +214,13 @@ export default {
       get() {
         const data = this.servers;
         return Object.keys(data)
-        .map(key => {
-          return data[key];
-        })
-        .reverse();
+          .map(key => {
+            return data[key];
+          })
+          .reverse();
       },
       set(value) {
-        const reversedServers = value.reverse()
+        const reversedServers = value.reverse();
         // convert array to json
         const json = {};
         for (let index = 0; index < reversedServers.length; index++) {
@@ -257,19 +274,11 @@ export default {
       });
       return result.find(friend => friend.status === 1);
     }
-  },
-  mounted() {
-    bus.$on("server-tool-tip", this.serverToolTipEvent);
-  },
-  destroyed() {
-    bus.$off("server-tool-tip", this.serverToolTipEvent);
   }
 };
 </script>
 
-
 <style lang="scss" scoped>
-
 .navigation {
   display: flex;
   flex-direction: row;
@@ -314,11 +323,10 @@ export default {
     background: #093b4b;
   }
   &.selected {
-    background: #072C38;
+    background: #072c38;
   }
 }
 
-
 .notifyAnimation:before {
   content: "!";
   color: white;
@@ -366,10 +374,10 @@ export default {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  left: 60px;
+  top: 60px;
   z-index: 99999;
   user-select: none;
   cursor: default;
   transition: 0.2s;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index 062d334..9384f26 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -81,6 +81,7 @@ export default {
   display: flex;
   flex-direction: column;
   width: 300px;
+  max-width: calc(100% - 60px);
   height: 100%;
   background: rgba(0, 0, 0, 0.14);
 }
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index e101d9b..78710be 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -145,6 +145,7 @@ export default {
   methods: {
     messageColorChange(e) {
       const hexColor = e.target.value;
+      e.target.value = ""
       this.customColor = hexColor;
     },
     addFormat(type, customEnding, customPos) {
@@ -857,11 +858,11 @@ export default {
 
 .back-to-bottom-button {
   &:hover {
-    background: #748b8e;
-    box-shadow: 0px 0px 15px 0px #0000008a;
+  background: rgba(0, 0, 0, 0.90);
   }
   transition: 0.2s;
-  background: #516e72;
+  background: rgba(0, 0, 0, 0.80);
+  border-radius: 100px;
   color: white;
   position: absolute;
   bottom: 15px;
@@ -871,7 +872,7 @@ export default {
   display: flex;
   justify-content: center;
   flex-shrink: 0;
-  box-shadow: 0px 0px 7px 0px #0000008a;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
   align-content: center;
   align-items: center;
   padding-left: 10px;
@@ -935,6 +936,7 @@ export default {
     background: rgb(231, 231, 231);
     flex-shrink: 0;
     cursor: pointer;
+    border-radius: 3px;
   }
   .reset-button {
     color: #a5bec4;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index a47ffdb..905bfbb 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -273,7 +273,7 @@ export default {
 
 <style scoped lang="scss">
 
-$self-message-color: #236b7f;
+$self-message-color: #26778a;
 $message-color: #053746;
 
 .container {
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index 9d12b33..0193b56 100644
--- a/src/components/app/Navigation.vue
+++ b/src/components/app/Navigation.vue
@@ -9,7 +9,7 @@
     <div class="container" @mouseleave="mouseLeaveEvent">
       <div class="scrollable">
 
-        <div class="server-items" v-if="currentTab === 2">
+        <div class="server-items">
           <draggable v-model="serversArr" :animation="200" :delay="mobile ? 400 : 0" ghost-class="ghost" @end="onEnd" @start="onStart">
             <transition-group type="transition" :name="!drag ? 'flip-list' : null">
               <server-template
@@ -27,13 +27,11 @@
       </div>
       <div
         class="item material-icons"
-        v-if="currentTab === 1"
         @click="addFriend"
         @mouseenter="localToolTipEvent('Add Friend', $event)"
       >person_add</div>
       <div
         class="item material-icons"
-        v-if="currentTab === 2"
         @click="addServer"
         @mouseenter="localToolTipEvent('Add Server', $event)"
       >add</div>
@@ -83,6 +81,7 @@ export default {
       }
     },
     openServer(serverID) {
+      this.switchTab(2);
       const server = this.servers[serverID];
       const lastSelectedChannel = JSON.parse(
         localStorage.getItem("selectedChannels") || "{}"
@@ -146,7 +145,7 @@ export default {
       if (this.drag) return;
       this.toolTipLocalName = null;
       this.toolTipServerID = serverID;
-      this.toolTipTopPosition = top - this.getTopHeight() + 16;
+      this.toolTipTopPosition = top - this.getTopHeight() + 20;
       this.toolTipShown = true;
     },
     mouseLeaveEvent() {
@@ -324,8 +323,8 @@ export default {
   color: white;
   font-size: 30px;
   align-self: center;
-  width: 60px;
-  height: 60px;
+  width: 70px;
+  height: 70px;
   cursor: pointer;
   user-select: none;
   opacity: 0.8;
@@ -398,10 +397,16 @@ export default {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  left: 60px;
+  left: 70px;
   z-index: 99999;
   user-select: none;
   cursor: default;
   transition: 0.2s;
 }
+
+@media (max-width: 600px) {
+  .navigation{
+      background: linear-gradient(#136A8A, #00B4DB);
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/app/ServerList.vue b/src/components/app/ServerList.vue
index a445c8b..97da60a 100644
--- a/src/components/app/ServerList.vue
+++ b/src/components/app/ServerList.vue
@@ -121,14 +121,11 @@ export default {
 .left-panel {
   height: 100%;
   width: 340px;
-  max-width: 100%;
+  max-width: calc(100% - 60px);
   flex-shrink: 0;
   display: flex;
   flex-direction: row;
   z-index: 1;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
 }
 
 .seperater {
@@ -217,4 +214,11 @@ export default {
     background: rgba(0, 0, 0, 0.322);
   }
 }
+
+@media (max-width: 600px) {
+  .right{
+    border-radius: 0;
+  }
+}
+
 </style>
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index 47ca6f6..7cbc438 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -86,8 +86,8 @@ export default {
   z-index: 1;
   display: flex;
   align-self: center;
-  width: 60px;
-  height: 60px;
+  width: 70px;
+  height: 70px;
   flex-shrink: 0;
   justify-content: center;
   align-content: center;
@@ -95,11 +95,23 @@ export default {
   user-select: none;
   transition: background 0.2s;
   cursor: pointer;
-  &:hover {
-    background: #074447;
+  &:hover::before {
+    content: "";
+    position: absolute;
+    top: 15px;
+    bottom: 15px;
+    left: 0;
+    width: 3px;
+    background: #ffffff5e;
   }
-  &.selected {
-    background: #042a2b;
+  &.selected::before {
+    content: "";
+    position: absolute;
+    top: 10px;
+    bottom: 10px;
+    left: 0;
+    width: 3px;
+    background: #ffffffc5;
   }
 }
 .notifyAnimation:before {
diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue
index 2a8d6a1..339c21f 100644
--- a/src/components/app/Tabs/DirectMessage.vue
+++ b/src/components/app/Tabs/DirectMessage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="direct-message-tab">
+  <div class="direct-message-tab" :class="{darken: showLeftPanel}">
     <transition name="slidein">
       <friends-list
         v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
@@ -24,7 +24,7 @@ export default {
   },
   data() {
     return {
-      showLeftPanel: false
+      showLeftPanel: true
     };
   },
   mounted() {
@@ -62,14 +62,24 @@ export default {
 }
 .slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
   /* margin-left: -300px; */
-  transform: translateX(-300px);
+  transform: translateX(-340px);
 }
 @media (max-width: 600px) {
   .left-panel {
     position: absolute;
     bottom: 0;
-    height: calc(100% - 50px);
     z-index: 2;
+    background: rgba(19, 107, 139, 0.9);
+  }
+  .darken::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 </style>
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
index f30341c..c230973 100644
--- a/src/components/app/Tabs/Explore.vue
+++ b/src/components/app/Tabs/Explore.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="explore-tab">
+  <div class="explore-tab" :class="{darken: showLeftPanel}">
     <transition name="slidein">
       <div
         class="left-panel"
@@ -8,6 +8,7 @@
       >
         <navigation />
         <div class="content">
+          <MyMiniInformation />
           <div class="header">
             <div class="icon">
               <i class="material-icons">explore</i>
@@ -73,8 +74,9 @@ import { bus } from "@/main";
 import Servers from "./Explore/servers";
 import ServerService from "@/services/ServerService";
 import Navigation from "@/components/app/Navigation";
+import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
 export default {
-  components: { Servers, Navigation },
+  components: { Servers, Navigation, MyMiniInformation },
   data() {
     return {
       showLeftPanel: false,
@@ -142,17 +144,18 @@ export default {
 .left-panel {
   display: flex;
   flex-direction: row;
-  width: 300px;
+  width: 340px;
+  max-width: calc(100% - 60px);
   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;
     height: 100%;
+    background: rgba(0, 0, 0, 0.14);
+    border-top-left-radius: 10px;
+    overflow: hidden;
   }
   .items {
     user-select: none;
@@ -169,20 +172,22 @@ export default {
       align-content: center;
       align-items: center;
       padding: 10px;
+      margin: 5px;
+      border-radius: 4px;
       cursor: pointer;
       transition: 0.3s;
       &:hover {
-        background: #08616b;
+        background: #053c4c;
       }
       &.selected {
-        background: #064c55;
+        background: #053240;
       }
     }
   }
   .header {
     display: flex;
     height: 100px;
-    background: #086974;
+    background: rgba(0, 0, 0, 0.3);
     user-select: none;
     flex-shrink: 0;
     .icon {
@@ -296,8 +301,9 @@ export default {
 
 .right-panel {
   .header {
-    background: rgba(0, 0, 0, 0.448);
-    padding: 10px;
+    background: #063443;
+    padding-left: 10px;
+    height: 64px;
     display: flex;
     align-items: center;
     align-content: center;
@@ -327,7 +333,7 @@ export default {
 }
 .slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
   /* margin-left: -300px; */
-  transform: translateX(-300px);
+  transform: translateX(-340px);
 }
 
 @media (max-width: 600px) {
@@ -337,8 +343,19 @@ export default {
   .left-panel {
     position: absolute;
     bottom: 0;
-    height: calc(100% - 44px);
     z-index: 2;
+    background: rgba(19, 107, 139, 0.9);
+    height: 100%;
+  }
+  .darken::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 </style>
diff --git a/src/components/app/Tabs/Explore/searchHeader.vue b/src/components/app/Tabs/Explore/searchHeader.vue
index 6251b6e..bc10a4c 100644
--- a/src/components/app/Tabs/Explore/searchHeader.vue
+++ b/src/components/app/Tabs/Explore/searchHeader.vue
@@ -2,7 +2,7 @@
   <div class="search-header">
     <div class="filter-area">
       <div class="filter">
-        <div class="title">Filter:</div>
+        <div class="title">Filter</div>
         <div class="filter-item">
           <div
             class="item"
@@ -14,7 +14,7 @@
         </div>
       </div>
       <div class="filter">
-        <div class="title">Sort By:</div>
+        <div class="title">Sort By</div>
         <div class="filter-item">
           <div
             class="item"
@@ -79,9 +79,9 @@ export default {
 <style lang="scss" scoped>
 .search-header {
   display: flex;
-  background: #0a1d20;
+  background: #073847;
   width: 100%;
-  height: 70px;
+  height: 100px;
   flex-shrink: 0;
 }
 .search-area {
@@ -113,11 +113,12 @@ input {
     flex-direction: column;
     flex-wrap: wrap;
     height: 57px;
+    margin-top: 5px;
   }
   .title {
-    font-size: 17px;
+    font-size: 19px;
     color: white;
-    border-bottom: solid 1px rgba(255, 255, 255, 0.575);
+    margin-top: 10px;
     padding-left: 2px;
     padding-right: 5px;
     padding-bottom: 2px;
@@ -127,6 +128,7 @@ input {
     color: white;
     opacity: 0.5;
     cursor: pointer;
+    font-size: 15px;
     margin: 2px;
     transition: 0.3s;
     &.selected {
diff --git a/src/components/app/Tabs/Explore/serverTemplate.vue b/src/components/app/Tabs/Explore/serverTemplate.vue
index 0b10e62..ac7d478 100644
--- a/src/components/app/Tabs/Explore/serverTemplate.vue
+++ b/src/components/app/Tabs/Explore/serverTemplate.vue
@@ -83,9 +83,10 @@ export default {
   position: relative;
   width: 250px;
   height: 300px;
-  background: rgba(0, 0, 0, 0.479);
+  background: #024253;
   opacity: 0.9;
   margin: 5px;
+  border-radius: 4px;
   flex-shrink: 0;
   transition: 0.3s;
   display: flex;
@@ -157,7 +158,7 @@ export default {
   .bottom {
     display: flex;
     flex-direction: column;
-    background: rgba(0, 0, 0, 0.541);
+    background: #04333F;
     flex: 1;
     height: 100%;
     flex-shrink: 0;
@@ -178,39 +179,37 @@ export default {
       display: flex;
       width: 100%;
       flex-direction: row;
+      margin-bottom: 10px;
     }
     .member-count {
       display: flex;
       align-items: center;
       align-content: center;
+      padding-left: 5px;
+      padding-right: 5px;
       margin-left: 10px;
       margin-top: 0px;
-      width: 100%;
+      border-radius: 4px;
+      margin-right: 10px;
+      flex: 1;
+      background: #022730;
       .material-icons {
         margin-right: 5px;
       }
     }
     .button {
       display: flex;
-      align-content: center;
       align-items: center;
-      flex-direction: column;
       justify-content: center;
-      flex-shrink: 0;
-      background: rgba(40, 140, 255, 0.8);
-      align-self: flex-end;
-      flex-shrink: 0;
-      margin: auto;
+      width: 100%;
+      height: 40px;
+      border-radius: 4px;
+      background: rgba(0, 179, 219, 0.8);
+      transition: 0.2s;
       margin-right: 10px;
-      margin-left: 0;
-      margin-bottom: 10px;
-      padding: 7px;
-      transition: 0.3s;
-      width: 80px;
-      height: 20px;
       cursor: pointer;
       &:hover {
-        background: rgb(40, 140, 255);
+        background: #00B4DB;
       }
       &.selected {
         background: grey;
diff --git a/src/components/app/Tabs/News.vue b/src/components/app/Tabs/News.vue
index 4b201a2..e8cdc67 100644
--- a/src/components/app/Tabs/News.vue
+++ b/src/components/app/Tabs/News.vue
@@ -97,7 +97,7 @@ export default {
 }
 .heading {
   padding: 10px;
-  background: #15282a;
+  background: #042f3a;
   margin-bottom: 10px;
 }
 .information {
@@ -108,7 +108,7 @@ export default {
   background: rgba(38, 139, 255, 0.87);
 }
 .change-log {
-  background: #294c51;
+  background: #054151;
   overflow-y: auto;
   max-width: 700px;
   width: 100%;
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue
index d858d59..c672efb 100644
--- a/src/components/app/Tabs/Servers.vue
+++ b/src/components/app/Tabs/Servers.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="direct-message-tab">
+  <div class="direct-message-tab" :class="{darken: (showLeftPanel || showMembersPanel) }">
     <transition name="slide-left">
       <server-list
         v-if="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
@@ -85,7 +85,7 @@ 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(-340px);
 }
 
 .slide-right-enter-active,
@@ -101,8 +101,8 @@ export default {
     position: absolute;
     right: 0;
     bottom: 0;
-    height: calc(100% - 50px);
-    z-index: 1;
+    z-index: 2;
+    background: rgba(19, 107, 139, 0.9);
   }
 }
 
@@ -110,8 +110,18 @@ export default {
   .left-panel {
     position: absolute;
     bottom: 0;
-    height: calc(100% - 50px);
     z-index: 2;
+    background: rgba(19, 107, 139, 0.9);
+  }
+  .darken::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 </style>
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index a1b2fdd..5fa82a9 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -130,6 +130,8 @@ export default {
   position: relative;
   overflow: hidden;
   cursor: pointer;
+    margin: 5px;
+  border-radius: 4px;
 }
 .tree {
   padding-left: 22px;
@@ -156,10 +158,10 @@ export default {
 }
 
 .friend:hover {
-  background: #08616b;
+  background: #053c4c;
 }
 .friend.selected {
-  background: #064c55;
+  background: #053240;
 }
 .profile-picture {
   height: 30px;
diff --git a/src/components/app/relationships/OfflineFriends.vue b/src/components/app/relationships/OfflineFriends.vue
index 8f78307..d9e66e3 100644
--- a/src/components/app/relationships/OfflineFriends.vue
+++ b/src/components/app/relationships/OfflineFriends.vue
@@ -67,9 +67,11 @@ export default {
 }
 .tab {
   transition: 0.3s;
+  margin: 4px;
+  border-radius: 4px;
 }
 .tab:hover {
-  background: #08616b;
+  background: #053240;
 }
 </style>
 
diff --git a/src/components/app/relationships/OnlineFriends.vue b/src/components/app/relationships/OnlineFriends.vue
index c677640..48b65e2 100644
--- a/src/components/app/relationships/OnlineFriends.vue
+++ b/src/components/app/relationships/OnlineFriends.vue
@@ -83,9 +83,11 @@ export default {
 }
 .tab {
   transition: 0.3s;
+  margin: 4px;
+  border-radius: 4px;
 }
 .tab:hover {
-  background: #08616b;
+  background: #053240;
 }
 </style>
 
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index 451ac8e..ac0b6a5 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -14,7 +14,7 @@ const config = [
     title: "Format buttons and color text!",
     shortTitle: "",
     date: "18/11/2019",
-    headColor: "#0c7b7f",
+    headColor: "#007792",
     new: [
       "Enter will now create new lines on mobile.",
       "You can now easily format your messages using the format buttons above.",
diff --git a/src/utils/markdown-rules/codeblock.js b/src/utils/markdown-rules/codeblock.js
index 7f5d1bf..f78eb5b 100644
--- a/src/utils/markdown-rules/codeblock.js
+++ b/src/utils/markdown-rules/codeblock.js
@@ -18,7 +18,7 @@ export default (order) => { return {
 		const className = node.lang ? `language-${node.lang}` : undefined
 
 		let content = SimpleMarkdown.sanitizeText(node.content)
-		if(node.lang) {
+		if(node.lang && hljs.getLanguage(node.lang)) {
 			content = hljs.highlight(node.lang, node.content, true).value
 		}
 
diff --git a/src/utils/messageFormatter.js b/src/utils/messageFormatter.js
index 65a558e..9f861dd 100644
--- a/src/utils/messageFormatter.js
+++ b/src/utils/messageFormatter.js
@@ -41,7 +41,13 @@ const rules = {
     }),
 
     text: Object.assign({}, SimpleMarkdown.defaultRules.text, {
-        order: order++,
+        order: order++, 
+        match: function(source) {
+          // copied and modified from simple-markdown.js
+          return /^[\s\S][0-9A-Za-z\u00c0-\uffff]*\s?/.exec(source);
+      },
+      parse: SimpleMarkdown.defaultRules.text.parse,
+      html: SimpleMarkdown.defaultRules.text.html,
     }),
 };