diff --git a/src/components/app/EmojiPanels/emojiPanel.vue b/src/components/app/EmojiPanels/emojiPanel.vue
index 861ffeb..3b3c9c7 100644
--- a/src/components/app/EmojiPanels/emojiPanel.vue
+++ b/src/components/app/EmojiPanels/emojiPanel.vue
@@ -545,7 +545,7 @@ export default {
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
-  border-top: 15px solid #000000ad;
+  border-top: 15px solid #00203a;
 
   align-self: flex-end;
   margin-right: 46px;
@@ -557,7 +557,7 @@ export default {
   align-items: center;
   justify-content: center;
   width: 100%;
-  background: rgba(0, 110, 255, 0.8);
+  background: rgba(0, 56, 100, 0.4);
   flex-shrink: 0;
 }
 .tab {
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index aa1dba9..d20285b 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="container"
-    :class="{ mentioned }"
+    :class="{ 'mentioned-container': mentioned }"
     @mouseover="mouseOverEvent"
     @mouseleave="hover = false"
   >