diff --git a/src/components/app/FriendsList.vue b/src/components/app/FriendsList.vue
index 17a21cb..3a6daaf 100644
--- a/src/components/app/FriendsList.vue
+++ b/src/components/app/FriendsList.vue
@@ -99,7 +99,7 @@ export default {
   border-radius: 5px;
 }
 .right{
-  left: 151px;
+  transform: translateX(150px);
 }
 
 /* ------- SCROLL BAR -------*/
diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue
index fb3d562..c8152f0 100644
--- a/src/components/app/Tabs/DirectMessage.vue
+++ b/src/components/app/Tabs/DirectMessage.vue
@@ -48,12 +48,18 @@ export default {
 </script>
 
 <style scoped>
+.direct-message-tab {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
 .slidein-enter-active,
 .slidein-leave-active {
   transition: 0.5s;
 }
 .slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  margin-left: -300px;
+  /* margin-left: -300px; */
+  transform: translateX(-300px)
 }
 @media (max-width: 600px) {
   .left-panel {
diff --git a/src/components/app/relationships/RecentFriends.vue b/src/components/app/relationships/RecentFriends.vue
index 8718c66..c015893 100644
--- a/src/components/app/relationships/RecentFriends.vue
+++ b/src/components/app/relationships/RecentFriends.vue
@@ -2,7 +2,6 @@
   <div class="recents">
     <transition name="list" appear>
       <div class="list">
-        
         <FriendsTemplate v-for="(channel, key) of channels" :key="key" :channelID="channel.channelID" :recipient="channel.recipients[0]"/>
       </div>
     </transition>