diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index eb2b699..f5609f4 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -327,24 +327,17 @@
             </b-button>
           </div>
         </b-navbar-item>
-          <b-navbar-item v-if="$store.state.user.username">
-          <div class="navbar-item has-dropdown is-hoverable is-info">
-            <a class="navbar-link">
-              <p>{{$store.state.user.username}}</p>
-            </a>
-              <div class="navbar-dropdown">
-              <b-navbar-item tag="router-link" :to="'/u/' + $store.state.user.username">{{$t('navbar.user.profile')}}</b-navbar-item>
-              <b-navbar-item @click="settingsModal = true">{{$t('navbar.user.settings')}}</b-navbar-item>
-              <b-navbar-item tag="router-link" to="/transactions">{{$t('navbar.user.transactions')}}</b-navbar-item>
-              <b-navbar-item tag="router-link" to="/character">{{$t('navbar.user.avatar')}}</b-navbar-item>
-                <b-navbar-item tag="router-link" to="/creations">{{$t('navbar.user.creations')}}</b-navbar-item>
-                <b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.user.downloads')}}</b-navbar-item>
-                <b-navbar-item tag="router-link" to="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
-                <b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded> 1</b-tag>&nbsp; {{$t('navbar.user.friends')}}</b-navbar-item>
-                <b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
-            </div>
-          </div>
-        </b-navbar-item>
+          <b-navbar-dropdown class="is-hoverable navbar-item" :label="$store.state.user.username">
+            <b-navbar-item tag="router-link" :to="'/u/' + $store.state.user.username">{{$t('navbar.user.profile')}}</b-navbar-item>
+            <b-navbar-item @click="settingsModal = true">{{$t('navbar.user.settings')}}</b-navbar-item>
+            <b-navbar-item tag="router-link" to="/transactions">{{$t('navbar.user.transactions')}}</b-navbar-item>
+            <b-navbar-item tag="router-link" to="/character">{{$t('navbar.user.avatar')}}</b-navbar-item>
+            <b-navbar-item tag="router-link" to="/creations">{{$t('navbar.user.creations')}}</b-navbar-item>
+            <b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.user.downloads')}}</b-navbar-item>
+            <b-navbar-item tag="router-link" to="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
+            <b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded> 1</b-tag>&nbsp; {{$t('navbar.user.friends')}}</b-navbar-item>
+            <b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
+          </b-navbar-dropdown>
         </div>
         <b-navbar-item v-if="loading">
           <div class="fa-1x">
diff --git a/src/router/index.js b/src/router/index.js
index 781b083..f91ba74 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -93,6 +93,17 @@ const routes = [
     name: 'MarketplaceItem',
     component: route('MarketplaceItem')
   },
+  {
+    path: '/friends',
+    redirect: '/friends/accepted',
+    name: 'Friends',
+    component: route('Friends')
+  },
+  {
+    path: '/friends/:category',
+    name: 'Friends',
+    component: route('Friends')
+  },
   {
     path: '/stats',
     name: 'Stats',
diff --git a/src/views/Friends.vue b/src/views/Friends.vue
new file mode 100644
index 0000000..6128abe
--- /dev/null
+++ b/src/views/Friends.vue
@@ -0,0 +1,210 @@
+<template>
+  <main class="section">
+    <h1 class="title has-text-centered">{{name}}</h1>
+    <div class="tabs is-centered">
+      <ul>
+        <router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a></router-link>
+        <router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
+        <router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
+      </ul>
+    </div>
+    <div class="columns is-multiline">
+      <div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
+        <h1 class="title has-text-centered">{{friend.friend2.username}}</h1>
+        <div class="box">
+          <img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'"><br>
+          <b-button class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request</b-button>
+          <b-button class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend Request</b-button>
+          <b-button class="is-success has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend Request</b-button>
+          <b-button class="is-danger has-text-centered is-centered is-center" v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend</b-button>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+<script>
+import AjaxErrorHandler from "../../assets/js/errorHandler";
+
+export default {
+  name: 'Friends',
+  data() {
+    return {
+      friends: [],
+      name: 'Requests to you',
+      loading: true,
+      category: this.$route.params.category
+    }
+  },
+  watch: {
+    $route () {
+      this.loading = true
+      this.friends = []
+      this.offset = 0
+      this.category = this.$route.params.category
+      if(this.category === 'pendingCanAccept') {
+        this.name = "Requests to you"
+      } else if(this.category === 'pending') {
+        this.name = "Requests from you"
+      } else if(this.category === 'accepted') {
+        this.name = "Accepted Requests"
+      } else {
+        this.name = "Unknown"
+      }
+      this.getItems()
+    }
+  },
+  methods: {
+    removeFriend (username) {
+      this.axios
+          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/remove', {
+            friend: username
+          })
+          .then(() => {
+            this.getItems()
+          })
+          .catch(e => {
+            this.refreshFriend()
+            this.description.loading = false
+
+            AjaxErrorHandler(this.$store)(e, error => {
+              this.description.error = error.message
+            })
+            this.axios
+                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
+                .then(res => this.relationship = res.data, this.refreshFriend())
+                .catch(e => {
+                  this.refreshFriend()
+                  let invalidId = e.response.data.errors.find(error => {
+                    return error.name === 'accountDoesNotExist'
+                  })
+
+                  if(invalidId) {
+                    this.$store.commit('set404Page', true)
+                  } else {
+                    AjaxErrorHandler(this.$store)(e)
+                  }
+                })
+          })
+    },
+    doRelationship () {
+      this.axios
+          .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/send', {
+            friend: this.$route.params.username
+          })
+          .then(() => {
+            this.refreshFriend()
+            this.description.loading = false
+            this.axios
+                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
+                .then(res => this.relationship = res.data)
+                .catch(e => {
+                  let invalidId = e.response.data.errors.find(error => {
+                    return error.name === 'accountDoesNotExist'
+                  })
+
+                  if(invalidId) {
+                    this.$store.commit('set404Page', true)
+                  } else {
+                    AjaxErrorHandler(this.$store)(e)
+                  }
+                })
+          })
+          .catch(e => {
+            this.refreshFriend()
+            this.description.loading = false
+
+            AjaxErrorHandler(this.$store)(e)
+            this.axios
+                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
+                .then(res => this.relationship = res.data)
+                .catch(e => {
+                  let invalidId = e.response.data.errors.find(error => {
+                    return error.name === 'accountDoesNotExist'
+                  })
+
+                  if(invalidId) {
+                    this.$store.commit('set404Page', true)
+                  } else {
+                    AjaxErrorHandler(this.$store)(e)
+                  }
+                })
+          })
+    },
+    doRelationshipAccept () {
+      this.axios
+          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/accept', {
+            friend: this.$route.params.username
+          })
+          .then(() => {
+            this.refreshFriend()
+            this.description.loading = false
+            this.axios
+                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
+                .then(res => this.relationship = res.data)
+                .catch(e => {
+                  let invalidId = e.response.data.errors.find(error => {
+                    return error.name === 'accountDoesNotExist'
+                  })
+
+                  if(invalidId) {
+                    this.$store.commit('set404Page', true)
+                  } else {
+                    AjaxErrorHandler(this.$store)(e)
+                  }
+                })
+          })
+          .catch(e => {
+            this.refreshFriend()
+            this.description.loading = false
+
+            AjaxErrorHandler(this.$store)(e, error => {
+              this.description.error = error.message
+            })
+            this.axios
+                .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
+                .then(res => this.relationship = res.data)
+                .catch(e => {
+                  let invalidId = e.response.data.errors.find(error => {
+                    return error.name === 'accountDoesNotExist'
+                  })
+
+                  if(invalidId) {
+                    this.$store.commit('set404Page', true)
+                  } else {
+                    AjaxErrorHandler(this.$store)(e)
+                  }
+                })
+          })
+    },
+    getItems () {
+      this.loading = true
+      this.axios
+          .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAll/' + this.category)
+          .then(res => {
+            this.friends = res.data.rows
+            this.loading = false
+          })
+          .catch((e) => {
+            this.loading = false
+            AjaxErrorHandler(this.$store)(e)
+          })
+    },
+  },
+  mounted() {
+    this.loading = true
+    this.friends = []
+    this.offset = 0
+    this.category = this.$route.params.category
+    if(this.category === 'pendingCanAccept') {
+      this.name = "Requests to you"
+    } else if(this.category === 'pending') {
+      this.name = "Requests from you"
+    } else if(this.category === 'accepted') {
+      this.name = "Accepted Requests"
+    } else {
+      this.name = "Unknown"
+    }
+    this.getItems()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Marketplace.vue b/src/views/Marketplace.vue
index f06f565..6ec1f8e 100644
--- a/src/views/Marketplace.vue
+++ b/src/views/Marketplace.vue
@@ -1,6 +1,6 @@
 <template>
   <main class="section">
-    <div class="column" style="float: left;">
+    <div class="column">
       <nav class="panel">
         <p class="panel-heading">
           {{ $t('marketplace.filter') }} ({{category}})
@@ -29,6 +29,7 @@
           Most popular
         </a>
       </nav>
+      <br>
     </div>
     <div class="columns is-multiline" v-if="!loading">
       <div v-if="!items.length" class="column">
@@ -43,8 +44,8 @@
           @loadNext='getItems(false)'
       >
       <div class="column is-3" style="float: left;" v-for='(item) in items' :key='"marketplace-" + item.id'>
-        <router-link :to="'/m/' + item.id" class="subtitle">{{item.name}}</router-link>
         <div class="box">
+          <router-link :to="'/m/' + item.id" class="subtitle">{{item.name}}</router-link>
           <img :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.previewFile + '.png'" width="40%">
           <div class="buttons is-centered is-center">
             <b-button class="is-info" v-if="!item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="8%">{{item.price}}</b-button>
diff --git a/src/views/User.vue b/src/views/User.vue
index 3f9adf7..94f5102 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -10,7 +10,7 @@
       <div class="column is-4 is-vcentered has-text-centered">
         <h1 class="title">{{user.username}}&nbsp;<Badges :username="user.username" :system="user.system" :hidden="user.hidden" :admin="user.admin" :booster="user.booster" :bot="user.bot"></Badges></h1>
         <div class="box">
-          <img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" :alt="$store.state.user.username + '\'s avatar'" width="70%">
+          <img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" :alt="$store.state.user.username + '\'s avatar'" width=25%>
         </div>
         <div class="buttons is-centered">
           <b-button @click="doRelationship" class="is-success" v-if="relationships.type === 'notFriends' && user.username !== $store.state.user.username"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.notFriends')}}</b-button>
@@ -78,8 +78,15 @@ export default {
     }
   },
   watch: {
-    $route (to) {
-      this.selected = this.getIndexFromRoute(to.path)
+    '$route.params.username' () {
+      this.user = [{
+        username: "Loading",
+        description: "Loading",
+        createdAt: "2020-01-01T00:00:00.000Z"
+      }]
+      this.relationship = false
+      this.relationships.type = ''
+      this.fetchData()
     }
   },
   computed: {
diff --git a/src/views/UserFriends.vue b/src/views/UserFriends.vue
index 0f4f570..7b7f9ff 100644
--- a/src/views/UserFriends.vue
+++ b/src/views/UserFriends.vue
@@ -1,9 +1,16 @@
 <template>
   <main>
-    <div class="column" v-if="!friends.length">
-      <i class="far fa-times-square large-icon"></i>
-      <h1 class="subtitle">This user doesn't have any friends yet, how about you send them a friend request?</h1>
-      <b-button>Send {{$route.params.username}} a friend request</b-button>
+    <div class="columns is-multiline">
+      <div class="column" v-if="!friends.length">
+        <i class="far fa-times-square large-icon"></i>
+        <h1 class="subtitle">This user doesn't have any friends yet, how about you send them a friend request?</h1>
+      </div>
+      <div class="column is-4" v-for='(friend) in friends' :key='"friend-" + friend.id'>
+        <div class="box">
+          <router-link :to="'/u/' + friend.friend2.username" class="subtitle">{{friend.friend2.username}}</router-link><br>
+          <img width=30% :src="'https://cdn.kaverti.com/user/avatars/headshot/' + friend.friend2.picture + '.png'">
+        </div>
+      </div>
     </div>
   </main>
 </template>
@@ -22,7 +29,7 @@ export default {
     this.axios
         .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'relationships/user/' + this.$route.params.username)
         .then(res => {
-          this.inventory = res.data.Inventories
+          this.friends = res.data
         })
         .catch(e => {
           let invalidId = e.response.data.errors.find(error => {