diff --git a/src/components/app/MemberTemplate.vue b/src/components/app/MemberTemplate.vue
index 3d74d0a..2c012d1 100644
--- a/src/components/app/MemberTemplate.vue
+++ b/src/components/app/MemberTemplate.vue
@@ -80,7 +80,7 @@ export default {
 }
 
 .member:hover {
-  background: rgba(0, 0, 0, 0.301);
+  background: rgba(255, 255, 255, 0.07);
 }
 
 .information {
diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index b592e09..3ad7510 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -103,7 +103,7 @@ export default {
   overflow: auto;
 }
 .tab {
-  background: rgba(0, 0, 0, 0.308);
+  background: rgba(255, 255, 255, 0.13);
   padding: 5px;
   user-select: none;
   cursor: default;
diff --git a/src/components/app/MessageLogs.vue b/src/components/app/MessageLogs.vue
index 02b6d95..3a2b6b4 100644
--- a/src/components/app/MessageLogs.vue
+++ b/src/components/app/MessageLogs.vue
@@ -294,7 +294,7 @@ export default {
 .message-logs {
   overflow: auto;
   flex: 1;
-  margin-right: 2px;
+  margin-right: 1px;
   position: relative;
 }
 
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index 642192c..0076184 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -486,7 +486,7 @@ export default {
         () => {
           this.$delete(this.typingRecipients[channel_id], user.unique_id);
         },
-        2500
+        3500
       );
     };
 
@@ -664,18 +664,17 @@ export default {
 
 .attachment-button {
   width: 50px;
-  background: rgba(0, 0, 0, 0.219);
+  background: rgba(255, 255, 255, 0.07);
   margin-right: 2px;
   margin-left: 10px;
   display: flex;
   flex-shrink: 0;
-  cursor: default;
+  cursor: pointer;
   user-select: none;
   transition: 0.3s;
-  border-radius: 5px;
 
   &:hover {
-    background: rgba(0, 0, 0, 0.322);
+    background: rgba(255, 255, 255, 0.13);
   }
   .material-icons {
     color: white;
@@ -709,7 +708,7 @@ export default {
 
 .chat-input {
   font-family: "Roboto", sans-serif;
-  background: rgba(0, 0, 0, 0.158);
+  background: rgba(255, 255, 255, 0.07);
   color: white;
   width: 100%;
   min-height: 20px;
@@ -724,21 +723,19 @@ export default {
   overflow: hidden;
   max-height: 30vh;
   overflow-y: auto;
-  border-radius: 5px;
-
   &:hover {
-    background: rgba(0, 0, 0, 0.288);
+    background: rgba(255, 255, 255, 0.10);
   }
 
   &:focus {
-    background: rgba(0, 0, 0, 0.466);
+    background: rgba(255, 255, 255, 0.13);
   }
 }
 
 .send-button {
   font-size: 20px;
   color: white;
-  background: rgba(0, 0, 0, 0.274);
+  background: rgba(255, 255, 255, 0.07);
   border: none;
   outline: none;
   margin-left: 2px;
@@ -748,14 +745,13 @@ export default {
   transition: 0.3s;
   display: flex;
   flex-shrink: 0;
-  border-radius: 5px;
   user-select: none;
   cursor: pointer;
   .material-icons {
     margin: auto;
   }
   &:hover {
-    background: rgba(0, 0, 0, 0.514);
+    background: rgba(255, 255, 255, 0.13);
   }
 }
 
@@ -769,7 +765,7 @@ export default {
 .emojis-button {
   font-size: 20px;
   color: white;
-  background: rgba(0, 0, 0, 0.274);
+  background: rgba(255, 255, 255, 0.07);
   border: none;
   outline: none;
   margin-left: 2px;
@@ -779,13 +775,12 @@ export default {
   transition: 0.3s;
   display: flex;
   flex-shrink: 0;
-  border-radius: 5px;
   user-select: none;
   .material-icons {
     margin: auto;
   }
   &:hover {
-    background: rgba(0, 0, 0, 0.514);
+  background: rgba(255, 255, 255, 0.13);
   }
 }
 
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index 6f3c227..197cc63 100644
--- a/src/components/app/Navigation.vue
+++ b/src/components/app/Navigation.vue
@@ -311,10 +311,10 @@ export default {
   opacity: 0.8;
   transition: 0.2s;
   &:hover {
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba(255, 255, 255, 0.07);
   }
   &.selected {
-    background: rgba(0, 0, 0, 0.4);
+    background: rgba(255, 255, 255, 0.13);
     opacity: 1;
   }
 }
diff --git a/src/components/app/ServerTemplate/ChannelTemplate.vue b/src/components/app/ServerTemplate/ChannelTemplate.vue
index 1bfbdcc..76281f4 100644
--- a/src/components/app/ServerTemplate/ChannelTemplate.vue
+++ b/src/components/app/ServerTemplate/ChannelTemplate.vue
@@ -65,10 +65,10 @@ export default {
   padding-left: 10px;
 }
 .channel:hover {
-  background: rgba(0, 0, 0, 0.192);
+  background: rgba(255, 255, 255, 0.07);
 }
 .channel.selected {
-  background: rgba(0, 0, 0, 0.288);
+  background: rgba(255, 255, 255, 0.13);
 }
 
 
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index 8b0e7ff..9152fc0 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -78,10 +78,10 @@ export default {
   transition: 0.2s;
   cursor: pointer;
   &:hover {
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba(255, 255, 255, 0.07);
   }
   &.selected {
-    background: rgba(0, 0, 0, 0.4);
+    background: rgba(255, 255, 255, 0.13);
     opacity: 1;
   }
 }
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
index a667150..db0b8b8 100644
--- a/src/components/app/Tabs/Explore.vue
+++ b/src/components/app/Tabs/Explore.vue
@@ -23,7 +23,7 @@
               v-for="(tab, index) in tabs"
               :key="index"
               :class="{selected: selectedTab === index}"
-              @click="selectedTab = index"
+              @click="selectedTab = index; showLeftPanel = false;"
             >
               <i class="material-icons">{{tab.icon}}</i>
               {{tab.name}}
@@ -169,10 +169,10 @@ export default {
       cursor: pointer;
       transition: 0.3s;
       &:hover {
-        background: rgba(0, 0, 0, 0.2);
+        background: rgba(255, 255, 255, 0.07);
       }
       &.selected {
-        background: rgba(0, 0, 0, 0.4);
+        background: rgba(255, 255, 255, 0.13);
       }
     }
   }
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 76fb329..37b4b06 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -154,10 +154,10 @@ export default {
 }
 
 .friend:hover {
-  background: rgba(0, 0, 0, 0.3) !important;
+  background: rgba(255, 255, 255, 0.07);
 }
 .friend.selected {
-  background: rgba(0, 0, 0, 0.4) !important;
+  background: rgba(255, 255, 255, 0.13);
 }
 .profile-picture{
   height: 30px;
diff --git a/src/components/app/statusList.vue b/src/components/app/statusList.vue
index 3a6a6d2..8309451 100644
--- a/src/components/app/statusList.vue
+++ b/src/components/app/statusList.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="show-status-list" appear="true">
+  <transition name="show-status-list" :appear="true">
   <div class="status-popout">
     <div
       class="status-list"