diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 0c1d96a..76fb329 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -2,7 +2,7 @@
   <div
     class="friend"
     :style="{background: status.status !== 0 ? status.bgColor : ''}"
-    :class="{selected: uniqueIDSelected, notifyAnimation: (notifications && notifications > 0) }"
+    :class="{selected: uniqueIDSelected, notifyAnimation: (notifications && notifications > 0), tree }"
     @click="openChat"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -47,7 +47,8 @@ import statuses from '@/utils/statuses';
 import {bus} from '@/main'
 
 export default {
-  props: ['username', 'tag',  'channelID',  'uniqueID', 'recipient'],
+  // tree will add padding to the left.
+  props: ['username', 'tag',  'channelID',  'uniqueID', 'recipient', 'tree'],
   data() {
     return {
       hover: false
@@ -120,15 +121,15 @@ export default {
 .friend {
   color: white;
   padding: 5px;
-  padding-left: 10px;
-  padding-left: 10px;
   display: flex;
   transition: 0.3s;
   position: relative;
   overflow: hidden;
   cursor: pointer;
 }
-
+.tree {
+  padding-left: 22px;
+}
 .notifyAnimation{
 
   animation: notifyAnime;
diff --git a/src/components/app/relationships/OfflineFriends.vue b/src/components/app/relationships/OfflineFriends.vue
index 2f96bda..da4cf1b 100644
--- a/src/components/app/relationships/OfflineFriends.vue
+++ b/src/components/app/relationships/OfflineFriends.vue
@@ -19,6 +19,7 @@
           :key="key"
           :channel-i-d="friend.channelID"
           :recipient="friends[key].recipient"
+          :tree="true"
         />
       </div>
     </transition>
diff --git a/src/components/app/relationships/OnlineFriends.vue b/src/components/app/relationships/OnlineFriends.vue
index 7b96a06..110f2d3 100644
--- a/src/components/app/relationships/OnlineFriends.vue
+++ b/src/components/app/relationships/OnlineFriends.vue
@@ -19,6 +19,7 @@
           :key="key"
           :channel-i-d="friend.channelID"
           :recipient="friends[key].recipient"
+          :tree="true"
         />
       </div>
     </transition>
diff --git a/src/components/app/relationships/PendingFriends.vue b/src/components/app/relationships/PendingFriends.vue
index be23415..33329e8 100644
--- a/src/components/app/relationships/PendingFriends.vue
+++ b/src/components/app/relationships/PendingFriends.vue
@@ -65,14 +65,11 @@ export default {
 
 .pending-friends{
   background-color: rgba(0, 0, 0, 0);
-  margin: 5px;
   user-select: none;
   padding-bottom: 3px;
-  border-radius: 5px;
   transition: 0.3s;
 }
 .tab{
-  border-radius: 5px;
   transition: 0.3s;
 }
 .tab:hover{
diff --git a/src/components/app/relationships/PendingTemplate.vue b/src/components/app/relationships/PendingTemplate.vue
index 2807b5a..0ee0f06 100644
--- a/src/components/app/relationships/PendingTemplate.vue
+++ b/src/components/app/relationships/PendingTemplate.vue
@@ -65,18 +65,18 @@ export default {
 
 <style scoped>
 .username{
-  width: 100px;
+  width: 80px;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
+  font-size: 16px;
 }
 .pending-friend {
   color: white;
-  background-color: rgba(0, 0, 0, 0.137);
-  margin: 5px;
-  padding: 10px;
+  padding: 5px;
+  padding-left: 22px;
   display: flex;
   transition: 0.3s;
-  border-radius: 3px;
 }
 
 .pending-friend:hover {
@@ -84,12 +84,11 @@ export default {
 }
 
 .profile-picture{
-  height: 40px;
-  width: 40px;
+  height: 30px;
+  width: 30px;
   background-color: rgba(0, 0, 0, 0.425);
   border-radius: 50%;
   margin: auto;
-  margin-left: 2px;
   margin-right: 5px;
   background-position: center;
   background-size: cover;
@@ -120,7 +119,7 @@ export default {
   margin: 5px;
   display: flex;
   transition: 0.3s;
-  border-radius: 3px;
+  cursor: pointer;
 }
 .hide {
   display: none;