diff --git a/website/client/assets/scss/index.scss b/website/client/assets/scss/index.scss
index 522f385a16..f8408b2812 100644
--- a/website/client/assets/scss/index.scss
+++ b/website/client/assets/scss/index.scss
@@ -35,3 +35,4 @@
 @import './pin';
 @import './animals';
 @import './iconalert';
+@import './tiers';
diff --git a/website/client/components/chat/chatCard.vue b/website/client/components/chat/chatCard.vue
index edebbe8315..4918b5da0f 100644
--- a/website/client/components/chat/chatCard.vue
+++ b/website/client/components/chat/chatCard.vue
@@ -4,14 +4,7 @@ div
   .message-hidden(v-if='msg.flagCount === 1 && user.contributor.admin') Message flagged once, not hidden
   .message-hidden(v-if='msg.flagCount > 1 && user.contributor.admin') Message hidden
   .card-body
-    h3.leader(
-      :class='userLevelStyle(msg)',
-      @click="showMemberModal(msg.uuid)",
-      v-b-tooltip.hover.top="tierTitle",
-      v-if="msg.user"
-    )
-      | {{msg.user}}
-      .svg-icon(v-html="tierIcon")
+    user-link(:userId="msg.uuid", :name="msg.user", :backer="msg.backer", :contributor="msg.contributor")
     p.time
       span.mr-1(v-if="msg.username") @{{ msg.username }}
       span.mr-1(v-if="msg.username") •
@@ -79,22 +72,6 @@ div
   .card-body {
     padding: 0.75rem 1.25rem 0.75rem 1.25rem;
 
-    .leader {
-      margin-bottom: 0;
-    }
-
-    h3 { // this is the user name
-      cursor: pointer;
-      display: inline-block;
-      font-size: 16px;
-
-      .svg-icon {
-        width: 10px;
-        display: inline-block;
-        margin-left: .5em;
-      }
-    }
-
     .time {
       font-size: 12px;
       color: #878190;
@@ -145,29 +122,17 @@ import max from 'lodash/max';
 
 import habiticaMarkdown from 'habitica-markdown';
 import { mapState } from 'client/libs/store';
-import styleHelper from 'client/mixins/styleHelper';
-
-import achievementsLib from '../../../common/script/libs/achievements';
+import userLink from '../userLink';
 
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
 import likeIcon from 'assets/svg/like.svg';
 import likedIcon from 'assets/svg/liked.svg';
 import reportIcon from 'assets/svg/report.svg';
-import tier1 from 'assets/svg/tier-1.svg';
-import tier2 from 'assets/svg/tier-2.svg';
-import tier3 from 'assets/svg/tier-3.svg';
-import tier4 from 'assets/svg/tier-4.svg';
-import tier5 from 'assets/svg/tier-5.svg';
-import tier6 from 'assets/svg/tier-6.svg';
-import tier7 from 'assets/svg/tier-7.svg';
-import tier8 from 'assets/svg/tier-mod.svg';
-import tier9 from 'assets/svg/tier-staff.svg';
-import tierNPC from 'assets/svg/tier-npc.svg';
 
 export default {
   props: ['msg', 'inbox', 'groupId'],
-  mixins: [styleHelper],
+  components: {userLink},
   data () {
     return {
       icons: Object.freeze({
@@ -176,16 +141,6 @@ export default {
         report: reportIcon,
         delete: deleteIcon,
         liked: likedIcon,
-        tier1,
-        tier2,
-        tier3,
-        tier4,
-        tier5,
-        tier6,
-        tier7,
-        tier8,
-        tier9,
-        tierNPC,
       }),
     };
   },
@@ -235,18 +190,6 @@ export default {
       }
       return likeCount;
     },
-    tierIcon () {
-      const message = this.msg;
-      const isNPC = Boolean(message.backer && message.backer.npc);
-      if (isNPC) {
-        return this.icons.tierNPC;
-      }
-      return this.icons[`tier${message.contributor.level}`];
-    },
-    tierTitle () {
-      const message = this.msg;
-      return achievementsLib.getContribText(message.contributor, message.backer) || '';
-    },
   },
   methods: {
     async like () {
@@ -294,9 +237,6 @@ export default {
         chatId: message.id,
       });
     },
-    showMemberModal (memberId) {
-      this.$emit('show-member-modal', memberId);
-    },
     atHighlight (text) {
       const escapedDisplayName = escapeRegExp(this.user.profile.name);
       const escapedUsername = escapeRegExp(this.user.auth.local.username);
diff --git a/website/client/components/chat/chatMessages.vue b/website/client/components/chat/chatMessages.vue
index 926149ef1e..8307720501 100644
--- a/website/client/components/chat/chatMessages.vue
+++ b/website/client/components/chat/chatMessages.vue
@@ -239,10 +239,7 @@ export default {
 
       // Open the modal only if the data is available
       if (profile && !profile.rejected) {
-        this.$root.$emit('habitica:show-profile', {
-          user: profile,
-          startingPage: 'profile',
-        });
+        this.$router.push({name: 'userProfile', params: {userId: profile._id}});
       }
     },
     messageLiked (message) {
diff --git a/website/client/components/groups/tavern.vue b/website/client/components/groups/tavern.vue
index eb4d3634d0..e2403006a0 100644
--- a/website/client/components/groups/tavern.vue
+++ b/website/client/components/groups/tavern.vue
@@ -93,7 +93,7 @@
         .row
           .col-4.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
             div
-              a.title(@click="viewStaffProfile(user.uuid)") {{user.name}}
+              router-link.title(:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}") {{user.name}}
               .svg-icon.staff-icon(v-html="icons.tierStaff", v-if='user.type === "Staff"')
               .svg-icon.mod-icon(v-html="icons.tierMod", v-if='user.type === "Moderator" && user.name !== "It\'s Bailey"')
               .svg-icon.npc-icon(v-html="icons.tierNPC", v-if='user.name === "It\'s Bailey"')
@@ -542,15 +542,6 @@ export default {
         this.$root.$emit('bv::show::modal', 'world-boss-rage');
       }
     },
-
-    async viewStaffProfile (staffId) {
-      let staffDetails = await this.$store.dispatch('members:fetchMember', { memberId: staffId });
-      this.$root.$emit('habitica:show-profile', {
-        user: staffDetails.data.data,
-        startingPage: 'profile',
-      });
-    },
-
     async fetchRecentMessages () {
       this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});
     },
diff --git a/website/client/components/hall/heroes.vue b/website/client/components/hall/heroes.vue
index 41835a69ef..6585fd945c 100644
--- a/website/client/components/hall/heroes.vue
+++ b/website/client/components/hall/heroes.vue
@@ -15,7 +15,7 @@
 
       .row
         .form.col-6(v-if='hero && hero.profile', submit='saveHero(hero)')
-          a(@click='clickMember(hero, true)')
+          router-link(:to="{'name': 'userProfile', 'params': {'userId': msg.uuid}}")
             h3 {{hero.profile.name}}
           .form-group
             input.form-control(type='text', v-model='hero.contributor.text', :placeholder="$t('contribTitle')")
@@ -197,13 +197,6 @@ export default {
       window.scrollTo(0, 200);
       this.loadHero(id, index);
     },
-    async clickMember (hero) {
-      let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: hero._id });
-      this.$root.$emit('habitica:show-profile', {
-        user: heroDetails.data.data,
-        startingPage: 'profile',
-      });
-    },
   },
 };
 </script>
diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index ed0fe4986e..11b2ab8976 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -2,7 +2,7 @@
 div
   inbox-modal
   creator-intro
-  profile
+  profileModal
   b-navbar.topbar.navbar-inverse.static-top.navbar-expand-lg(type="dark", :class="navbarZIndexClass")
     b-navbar-brand.brand
       .logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
@@ -346,7 +346,7 @@ import logo from 'assets/svg/logo.svg';
 import InboxModal from '../userMenu/inbox.vue';
 import notificationMenu from './notificationsDropdown';
 import creatorIntro from '../creatorIntro';
-import profile from '../userMenu/profile';
+import profileModal from '../userMenu/profileModal';
 import userDropdown from './userDropdown';
 
 export default {
@@ -355,7 +355,7 @@ export default {
     InboxModal,
     notificationMenu,
     creatorIntro,
-    profile,
+    profileModal,
   },
   data () {
     return {
diff --git a/website/client/components/header/notifications/unallocatedStatsPoints.vue b/website/client/components/header/notifications/unallocatedStatsPoints.vue
index 8841750fbb..0cb6bd554c 100644
--- a/website/client/components/header/notifications/unallocatedStatsPoints.vue
+++ b/website/client/components/header/notifications/unallocatedStatsPoints.vue
@@ -35,11 +35,8 @@ export default {
   },
   methods: {
     action () {
-      this.$root.$emit('habitica:show-profile', {
-        user: this.$store.state.user.data,
-        startingPage: 'stats',
-      });
+      this.$router.push({name: 'stats'});
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/website/client/components/header/userDropdown.vue b/website/client/components/header/userDropdown.vue
index eaf7038f2f..1c134fcbf2 100644
--- a/website/client/components/header/userDropdown.vue
+++ b/website/client/components/header/userDropdown.vue
@@ -102,10 +102,7 @@ export default {
       this.$root.$emit('bv::show::modal', 'inbox-modal');
     },
     showProfile (startingPage) {
-      this.$root.$emit('habitica:show-profile', {
-        user: this.user,
-        startingPage,
-      });
+      this.$router.push({name: startingPage});
     },
     showBuyGemsModal (startingPage) {
       this.$store.state.gemModalOptions.startingPage = startingPage;
diff --git a/website/client/components/memberDetails.vue b/website/client/components/memberDetails.vue
index 253c033c33..bd5bcd27e1 100644
--- a/website/client/components/memberDetails.vue
+++ b/website/client/components/memberDetails.vue
@@ -12,7 +12,7 @@
       :hide-class-badge="classBadgePosition !== 'under-avatar'",
     )
   .member-stats(:class="{'col-8': !expanded && !isHeader}")
-    .d-flex.align-items-center
+    .d-flex.align-items-center.profile-first-row
       class-badge(v-if="classBadgePosition === 'next-to-name'", :member-class="member.stats.class")
       .d-flex.flex-column.profile-name-character
         h3.character-name
@@ -95,9 +95,14 @@
     }
   }
 
+  .profile-first-row {
+    margin-bottom: .5em
+  }
+
   .progress-container {
     margin-left: 4px;
     margin-bottom: .5em;
+    height: 24px;
   }
 
   .progress-container > span {
@@ -111,7 +116,6 @@
     width: 24px;
     height: 24px;
     margin-right: 8px;
-    padding-top: 6px;
   }
 
   .progress-container > .progress {
@@ -130,7 +134,7 @@
 
   .progress-container .svg-icon, .progress-container .progress, .progress-container .small-text {
     display: inline-block;
-    vertical-align: bottom;
+    vertical-align: middle;
   }
 
   // Condensed version
@@ -249,10 +253,7 @@ export default {
   methods: {
     percent,
     showMemberModal (member) {
-      this.$root.$emit('habitica:show-profile', {
-        user: member,
-        startingPage: 'profile',
-      });
+      this.$router.push({name: 'userProfile', params: {userId: member._id}});
     },
   },
   computed: {
diff --git a/website/client/components/userLink.vue b/website/client/components/userLink.vue
index c0e51fff43..b8d4dc397a 100644
--- a/website/client/components/userLink.vue
+++ b/website/client/components/userLink.vue
@@ -1,21 +1,113 @@
 <template lang="pug">
-  b-link(
-    v-if='user && user.profile',
-    @click.prevent='showProfile(user)'
-    ) {{user.profile.name}}
+  router-link.leader(
+  :to="{'name': 'userProfile', 'params': {'userId': id}}",
+  :class='levelStyle()',
+  v-b-tooltip.hover.top="tierTitle",
+  v-if='displayName')
+    | {{displayName}}
+    .svg-icon(v-html="tierIcon()")
 </template>
 
+<style scoped lang="scss">
+  @import '~client/assets/scss/colors.scss';
+
+  a {
+    color: $gray-50;
+  }
+
+  a.leader { // this is the user name
+    font-family: 'Roboto Condensed', sans-serif;
+    font-weight: bold;
+    margin-bottom: 0;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 16px;
+
+    .svg-icon {
+      width: 10px;
+      display: inline-block;
+      margin-left: .5em;
+    }
+  }
+</style>
+
 <script>
+
+  import styleHelper from 'client/mixins/styleHelper';
+
+  import achievementsLib from '../../common/script/libs/achievements';
+
+  import tier1 from 'assets/svg/tier-1.svg';
+  import tier2 from 'assets/svg/tier-2.svg';
+  import tier3 from 'assets/svg/tier-3.svg';
+  import tier4 from 'assets/svg/tier-4.svg';
+  import tier5 from 'assets/svg/tier-5.svg';
+  import tier6 from 'assets/svg/tier-6.svg';
+  import tier7 from 'assets/svg/tier-7.svg';
+  import tier8 from 'assets/svg/tier-mod.svg';
+  import tier9 from 'assets/svg/tier-staff.svg';
+  import tierNPC from 'assets/svg/tier-npc.svg';
+
   export default {
-    props: ['user'],
+    props: ['user', 'userId', 'name', 'backer', 'contributor'],
+    mixins: [styleHelper],
+    data () {
+      return {
+        icons: Object.freeze({
+          tier1,
+          tier2,
+          tier3,
+          tier4,
+          tier5,
+          tier6,
+          tier7,
+          tier8,
+          tier9,
+          tierNPC,
+        }),
+      };
+    },
+    computed: {
+      displayName () {
+        if (this.name) {
+          return this.name;
+        } else if (this.user && this.user.profile) {
+          return this.user.profile.name;
+        }
+      },
+      level () {
+        if (this.contributor) {
+          return this.contributor.level;
+        } else if (this.user && this.user.contributor) {
+          return this.user.contributor.level;
+        }
+        return 0;
+      },
+      isNPC () {
+        if (this.backer) {
+          return this.backer.level;
+        } else if (this.user && this.user.backer) {
+          return this.user.backer.level;
+        }
+        return false;
+      },
+      id () {
+        return this.userId || this.user._id;
+      },
+    },
     methods: {
-      async showProfile (user) {
-        let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: user._id });
-        this.$root.$emit('habitica:show-profile', {
-          user: heroDetails.data.data,
-          startingPage: 'profile',
-        });
+      tierIcon () {
+        if (this.isNPC) {
+          return this.icons.tierNPC;
+        }
+        return this.icons[`tier${this.level}`];
+      },
+      tierTitle () {
+        return achievementsLib.getContribText(this.level, this.isNPC) || '';
+      },
+      levelStyle () {
+        return this.userLevelStyleFromLevel(this.level, this.isNPC);
       },
     },
   };
-</script>
\ No newline at end of file
+</script>
diff --git a/website/client/components/userMenu/profile.vue b/website/client/components/userMenu/profile.vue
index fdf91a6067..df5a0a924e 100644
--- a/website/client/components/userMenu/profile.vue
+++ b/website/client/components/userMenu/profile.vue
@@ -1,150 +1,148 @@
 <template lang="pug">
-div
-  b-modal#profile(title="Profile", size='lg', :hide-footer="true")
-    .header(slot='modal-header')
-      .profile-actions
-        button.btn.btn-secondary.message-icon(@click='sendMessage()', v-b-tooltip.hover.left="$t('sendMessage')")
-          .svg-icon.message-icon(v-html="icons.message")
-        button.btn.btn-secondary.gift-icon(@click='openSendGemsModal()', v-b-tooltip.hover.bottom="$t('sendGems')")
-          .svg-icon.gift-icon(v-html="icons.gift")
-        button.btn.btn-secondary.remove-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1',
-          @click="blockUser()", v-b-tooltip.hover.right="$t('blockWarning')")
-          .svg-icon.remove-icon(v-html="icons.remove")
-        button.btn.btn-secondary.positive-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
-          @click="unblockUser()", v-b-tooltip.hover.right="$t('unblock')")
-          .svg-icon.positive-icon(v-html="icons.positive")
-        button.btn.btn-secondary.positive-icon(v-if='this.userLoggedIn.contributor.admin && !adminToolsLoaded',
-          @click="loadAdminTools()", v-b-tooltip.hover.right="'Admin - Load Tools'")
-          .svg-icon.positive-icon(v-html="icons.edit")
-        span(v-if='this.userLoggedIn.contributor.admin && adminToolsLoaded')
-          button.btn.btn-secondary.positive-icon(v-if='!hero.flags || (hero.flags && !hero.flags.chatRevoked)',
-            @click="adminRevokeChat()", v-b-tooltip.hover.bottom="'Admin - Revoke Chat Privileges'")
-            .svg-icon.positive-icon(v-html="icons.megaphone")
-          button.btn.btn-secondary.positive-icon(v-if='hero.flags && hero.flags.chatRevoked',
-            @click="adminReinstateChat()", v-b-tooltip.hover.bottom="'Admin - Reinstate Chat Privileges'")
-            .svg-icon.positive-icon(v-html="icons.challenge")
-          button.btn.btn-secondary.positive-icon(v-if='!hero.auth.blocked',
-            @click="adminBlockUser()", v-b-tooltip.hover.right="'Admin - Ban User'")
-            .svg-icon.positive-icon(v-html="icons.lock")
-          button.btn.btn-secondary.positive-icon(v-if='hero.auth.blocked',
-            @click="adminUnblockUser()", v-b-tooltip.hover.right="'Admin - Unblock User'")
-            .svg-icon.positive-icon(v-html="icons.member")
-      .row
-        .col-12
-          member-details(:member="user")
+.profile(v-if='user')
+  .header
+    .profile-actions
+      button.btn.btn-secondary.message-icon(@click='sendMessage()', v-b-tooltip.hover.left="$t('sendMessage')")
+        .svg-icon.message-icon(v-html="icons.message")
+      button.btn.btn-secondary.gift-icon(@click='openSendGemsModal()', v-b-tooltip.hover.bottom="$t('sendGems')")
+        .svg-icon.gift-icon(v-html="icons.gift")
+      button.btn.btn-secondary.remove-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1',
+        @click="blockUser()", v-b-tooltip.hover.right="$t('blockWarning')")
+        .svg-icon.remove-icon(v-html="icons.remove")
+      button.btn.btn-secondary.positive-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
+        @click="unblockUser()", v-b-tooltip.hover.right="$t('unblock')")
+        .svg-icon.positive-icon(v-html="icons.positive")
+      button.btn.btn-secondary.positive-icon(v-if='this.userLoggedIn.contributor.admin && !adminToolsLoaded',
+        @click="loadAdminTools()", v-b-tooltip.hover.right="'Admin - Load Tools'")
+        .svg-icon.positive-icon(v-html="icons.edit")
+      span(v-if='this.userLoggedIn.contributor.admin && adminToolsLoaded')
+        button.btn.btn-secondary.positive-icon(v-if='!hero.flags || (hero.flags && !hero.flags.chatRevoked)',
+          @click="adminRevokeChat()", v-b-tooltip.hover.bottom="'Admin - Revoke Chat Privileges'")
+          .svg-icon.positive-icon(v-html="icons.megaphone")
+        button.btn.btn-secondary.positive-icon(v-if='hero.flags && hero.flags.chatRevoked',
+          @click="adminReinstateChat()", v-b-tooltip.hover.bottom="'Admin - Reinstate Chat Privileges'")
+          .svg-icon.positive-icon(v-html="icons.challenge")
+        button.btn.btn-secondary.positive-icon(v-if='!hero.auth.blocked',
+          @click="adminBlockUser()", v-b-tooltip.hover.right="'Admin - Ban User'")
+          .svg-icon.positive-icon(v-html="icons.lock")
+        button.btn.btn-secondary.positive-icon(v-if='hero.auth.blocked',
+          @click="adminUnblockUser()", v-b-tooltip.hover.right="'Admin - Unblock User'")
+          .svg-icon.positive-icon(v-html="icons.member")
     .row
-      .col-12.text-center.nav
-        .nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
-        .nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
-        .nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
-    #userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
-      .row
-        .col-12.col-md-8
-          .header.mb-3
-            h1 {{user.profile.name}}
-            div
-              .name(v-if='user.auth && user.auth.local && user.auth.local.username') @{{ user.auth.local.username }}
-            div
-              .name {{ user._id }}
-        .col-12.col-md-4
-          button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing') {{ $t('edit') }}
-      .row(v-if='!editing')
-        .col-12.col-md-8
-          .about
-            h2 {{ $t('about') }}
-            p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
-            p(v-else) {{ $t('noDescription') }}
-          .photo
-            h2 {{ $t('photo') }}
-            img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
-            p(v-else) {{ $t('noPhoto') }}
+      .col-12
+        member-details(:member="user")
+  .row
+    .col-12.col-md-6.offset-md-3.text-center.nav
+      .nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
+      .nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
+      .nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
+  #userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
+    .row
+      .col-12.col-md-8
+        .header.mb-3
+          h1 {{user.profile.name}}
+          .name(v-if='user.auth && user.auth.local && user.auth.local.username') @{{ user.auth.local.username }}
+      .col-12.col-md-4
+        button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing', style='float:right;') {{ $t('edit') }}
+    .row(v-if='!editing')
+      .col-12.col-md-8
+        .about.profile-section
+          h2 {{ $t('about') }}
+          p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
+          p(v-else) {{ $t('noDescription') }}
+        .photo.profile-section
+          h2 {{ $t('photo') }}
+          img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
+          p(v-else) {{ $t('noPhoto') }}
 
-        .col-12.col-md-4
-          .info
-            h2 {{ $t('info') }}
-            div
-              strong {{ $t('joined') }}:&nbsp;
-              | {{userJoinedDate}}
-            div
-              strong {{ $t('latestCheckin') }}:&nbsp;
-              | {{userLastLoggedIn}}
-            div
-              strong {{ $t('totalLogins') }}:&nbsp;
-              span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
-            div
-              | {{getProgressDisplay()}}
-              .progress
-                .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
-                  span.sr-only {{ incentivesProgress }}% {{$t('complete')}}
-          // @TODO: Implement in V2 .social
+      .col-12.col-md-4
+        .info.profile-section
+          h2 {{ $t('info') }}
+          .info-item
+            .info-item-label {{ $t('joined') }}:
+            .info-item-value {{userJoinedDate}}
+          .info-item
+            .info-item-label  {{ $t('totalLogins') }}:
+            .info-item-value {{ user.loginIncentives }}
+          .info-item
+            .info-item-label  {{ $t('latestCheckin') }}:
+            .info-item-value {{userLastLoggedIn}}
+          .info-item
+            | {{getProgressDisplay()}}
+            .progress
+              .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
+                span.sr-only {{ incentivesProgress }}% {{$t('complete')}}
+        // @TODO: Implement in V2 .social
 
-      .row(v-if='editing')
-        h1 {{$t('editProfile')}}
-        .col-12
-          .alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
+    .row(v-if='editing')
+      h1 {{$t('editProfile')}}
+      .col-12
+        .alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
 
-          // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
-          .form-group
-            label {{ $t('displayName') }}
-            input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
-          .form-group
-            label {{ $t('photoUrl') }}
-            input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
-          .form-group
-            label {{ $t('about') }}
-            textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
-            // include ../../shared/formatting-help
-          //- .form-group
-          //-   label Facebook
-          //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
-          //- .form-group
-          //-   label Instagram
-          //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
-          //- .form-group
-          //-   label Twitter
-          //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
+        // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
+        .form-group
+          label {{ $t('displayName') }}
+          input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
+        .form-group
+          label {{ $t('photoUrl') }}
+          input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
+        .form-group
+          label {{ $t('about') }}
+          textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
+          // include ../../shared/formatting-help
+        //- .form-group
+        //-   label Facebook
+        //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
+        //- .form-group
+        //-   label Instagram
+        //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
+        //- .form-group
+        //-   label Twitter
+        //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
 
-        .col-12.text-center
-          button.btn.btn-primary(@click='save()') {{ $t("save") }}
-          button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
-    #achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
-      .row(v-for='(category, key) in achievements')
-        h2.col-12.text-center {{ $t(key+'Achievs') }}
-        .col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
-          .box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
-            b-popover(
-              :target="'#' + key + '-achievement'",
-              triggers="hover",
-              placement="top",
-            )
-              h4.popover-content-title {{ achievement.title }}
-              div.popover-content-text(v-html="achievement.text")
-            .achievement(:class='achievement.icon + "2x"', v-if='achievement.earned')
-              .counter.badge.badge-info.stack-count(v-if='achievement.optionalCount') {{achievement.optionalCount}}
-            .achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
-      hr.col-12
-      .row
-        .col-12.col-md-6(v-if='user.achievements.challenges')
-          .achievement-icon.achievement-karaoke
-          h2.text-center {{$t('challengesWon')}}
-          div(v-for='chal in user.achievements.challenges')
-            span(v-markdown='chal')
-            hr
-        .col-12.col-md-6(v-if='user.achievements.quests')
-          .achievement-icon.achievement-alien
-          h2.text-center {{$t('questsCompleted')}}
-          div(v-for='(value, key) in user.achievements.quests')
-            span {{ content.quests[key].text() }} ({{ value }})
-    profileStats(
-      :user='user',
-      v-show='selectedPage === "stats"',
-      :showAllocation='showAllocation()',
-      v-if='user.preferences')
+      .col-12.text-center
+        button.btn.btn-primary(@click='save()') {{ $t("save") }}
+        button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
+  #achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
+    .row(v-for='(category, key) in achievements')
+      h2.col-12.text-center {{ $t(key+'Achievs') }}
+      .col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
+        .box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
+          b-popover(
+            :target="'#' + key + '-achievement'",
+            triggers="hover",
+            placement="top",
+          )
+            h4.popover-content-title {{ achievement.title }}
+            div.popover-content-text(v-html="achievement.text")
+          .achievement(:class='achievement.icon + "2x"', v-if='achievement.earned')
+            .counter.badge.badge-info.stack-count(v-if='achievement.optionalCount') {{achievement.optionalCount}}
+          .achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
+    hr.col-12
+    .row
+      .col-12.col-md-6(v-if='user.achievements.challenges')
+        .achievement-icon.achievement-karaoke
+        h2.text-center {{$t('challengesWon')}}
+        div(v-for='chal in user.achievements.challenges')
+          span(v-markdown='chal')
+          hr
+      .col-12.col-md-6(v-if='user.achievements.quests')
+        .achievement-icon.achievement-alien
+        h2.text-center {{$t('questsCompleted')}}
+        div(v-for='(value, key) in user.achievements.quests')
+          span {{ content.quests[key].text() }} ({{ value }})
+  profileStats(
+    :user='user',
+    v-show='selectedPage === "stats"',
+    :showAllocation='showAllocation()',
+    v-if='user.preferences')
   send-gems-modal(:userReceivingGems='userReceivingGems')
 </template>
 
 <style lang="scss" >
-  #profile {
+  @import '~client/assets/scss/colors.scss';
+
+  .profile {
     .member-details {
       .character-name, small, .small-text {
         color: #878190;
@@ -159,6 +157,20 @@ div
       color: white;
       margin-bottom: 20px;
     }
+
+    .progress-container > .progress {
+      background-color: $gray-500 !important;
+      height: 16px !important;
+      vertical-align: middle !important;
+
+      .progress-bar {
+        height: 16px !important;
+      }
+    }
+
+    .profile-name-character {
+      margin-left: 4px !important;
+    }
   }
 
   .message-icon svg {
@@ -218,7 +230,7 @@ div
   .header {
     h1 {
       color: $purple-200;
-      margin-bottom: 0rem;
+      margin-bottom: 0.2rem;
     }
 
     h4 {
@@ -307,7 +319,65 @@ div
     }
   }
 
+    .member-details {
+      .character-name, small, .small-text {
+        color: #878190;
+      }
 
+      .progress-container > .progress {
+        background-color: $gray-500;
+      }
+    }
+
+    .gearTitle {
+      color: white;
+      margin-bottom: 20px;
+    }
+
+  .profile-section {
+    h2 {
+      overflow: hidden;
+      size: 16px;
+      color: $gray-50;
+    }
+    h2:after {
+      background-color: $gray-500;
+      content: "";
+      display: inline-block;
+      height: 1px;
+      position: relative;
+      vertical-align: middle;
+      width: 90%;
+      left: 16px;
+    }
+  }
+
+  .info {
+
+    .info-item {
+      color: $gray-200;
+      size: 14px;
+      margin-bottom: 8px;
+
+      .info-item-label {
+        font-weight: bold;
+        display: inline-block;
+      }
+
+      .info-item-value {
+        display: inline-block;
+        float: right;
+      }
+    }
+
+    .progress {
+      height: 8px;
+
+      .progress-bar {
+        background-color: $green-10 !important;
+      }
+    }
+  }
 </style>
 
 <script>
@@ -339,6 +409,7 @@ import member from 'assets/svg/member-icon.svg';
 import edit from 'assets/svg/edit.svg';
 
 export default {
+  props: ['userId', 'startingPage'],
   directives: {
     markdown,
   },
@@ -377,20 +448,9 @@ export default {
       selectedPage: 'profile',
       achievements: {},
       content: Content,
+      user: undefined,
     };
   },
-  mounted () {
-    this.$root.$on('habitica:show-profile', (data) => {
-      if (!data.user || !data.startingPage) return;
-      // @TODO: We may be able to remove the need for store
-      this.$store.state.profileUser = data.user;
-      this.$store.state.profileOptions.startingPage = data.startingPage;
-      this.$root.$emit('bv::show::modal', 'profile');
-    });
-  },
-  destroyed () {
-    this.$root.$off('habitica:show-profile');
-  },
   computed: {
     ...mapState({
       userLoggedIn: 'user.data',
@@ -408,34 +468,6 @@ export default {
     costumeItems () {
       return this.user.items.gear.costume;
     },
-    user () {
-      let user = this.userLoggedIn;
-
-      // Reset editing when user is changed. Move to watch or is this good?
-      this.editing = false;
-      this.hero = {};
-      this.adminToolsLoaded = false;
-
-      let profileUser = this.$store.state.profileUser;
-
-      if (profileUser._id && profileUser._id !== this.userLoggedIn._id) {
-        user = profileUser;
-      }
-
-      this.editingProfile.name = user.profile.name;
-      this.editingProfile.imageUrl = user.profile.imageUrl;
-      this.editingProfile.blurb = user.profile.blurb;
-
-      if (!user.achievements.quests) user.achievements.quests = {};
-      if (!user.achievements.challenges) user.achievements.challenges = {};
-      // @TODO: this common code should handle the above
-      this.achievements = achievementsLib.getAchievementsForProfile(user);
-
-      // @TODO For some reason markdown doesn't seem to be handling numbers or maybe undefined?
-      user.profile.blurb = user.profile.blurb ? `${user.profile.blurb}` : '';
-
-      return user;
-    },
     incentivesProgress () {
       return this.getIncentivesProgress();
     },
@@ -457,16 +489,50 @@ export default {
       return this.$store.getters['members:hasClass'](this.userLoggedIn);
     },
   },
+  mounted () {
+    this.loadUser();
+  },
   watch: {
-    startingPageOption () {
-      this.selectedPage = this.$store.state.profileOptions.startingPage;
+    startingPage () {
+      this.selectedPage = this.startingPage;
+    },
+    async userId () {
+      this.loadUser();
     },
   },
   methods: {
+    async loadUser () {
+      let user = this.userLoggedIn;
+
+      // Reset editing when user is changed. Move to watch or is this good?
+      this.editing = false;
+      this.hero = {};
+      this.adminToolsLoaded = false;
+
+      let profileUserId = this.userId;
+
+      if (profileUserId && profileUserId !== this.userLoggedIn._id) {
+        let response = await this.$store.dispatch('members:fetchMember', { memberId: profileUserId });
+        user = response.data.data;
+      }
+
+      this.editingProfile.name = user.profile.name;
+      this.editingProfile.imageUrl = user.profile.imageUrl;
+      this.editingProfile.blurb = user.profile.blurb;
+
+      if (!user.achievements.quests) user.achievements.quests = {};
+      if (!user.achievements.challenges) user.achievements.challenges = {};
+      // @TODO: this common code should handle the above
+      this.achievements = achievementsLib.getAchievementsForProfile(user);
+
+      // @TODO For some reason markdown doesn't seem to be handling numbers or maybe undefined?
+      user.profile.blurb = user.profile.blurb ? `${user.profile.blurb}` : '';
+
+      this.user = user;
+    },
     selectPage (page) {
       this.selectedPage = page;
-      // @TODO: rename this property?
-      this.$store.state.profileOptions.startingPage = page;
+      history.replaceState(null, null, '');
     },
     sendMessage () {
       this.$root.$emit('habitica::new-inbox-message', {
@@ -562,7 +628,6 @@ export default {
     showAllocation () {
       return this.user._id === this.userLoggedIn._id && this.hasClass;
     },
-
   },
 };
 </script>
diff --git a/website/client/components/userMenu/profileModal.vue b/website/client/components/userMenu/profileModal.vue
new file mode 100644
index 0000000000..86dc296b5a
--- /dev/null
+++ b/website/client/components/userMenu/profileModal.vue
@@ -0,0 +1,50 @@
+<template lang="pug">
+  b-modal#profile(size='lg', :hide-footer="true", :hide-header="true", @hidden="onHidden", @shown="onShown()")
+    profile(:userId='userId', :startingPage='startingPage', style="margin-top:24px;")
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .header {
+    width: 100%;
+  }
+</style>
+
+<script>
+  import profile from './profile';
+
+  export default {
+    components: {
+      profile,
+    },
+    data () {
+      return {
+        userId: undefined,
+        startingPage: undefined,
+        path: undefined,
+      };
+    },
+    mounted () {
+      this.$root.$on('habitica:show-profile', (data) => {
+        this.userId = data.userId;
+        this.startingPage = data.startingPage || 'profile';
+        this.path = data.path;
+        this.$root.$emit('bv::show::modal', 'profile');
+      });
+    },
+    destroyed () {
+      this.$root.$off('habitica:show-profile');
+    },
+    methods: {
+      onShown () {
+        history.pushState('', null, this.path);
+      },
+      onHidden () {
+        if (this.$route.path !== window.location.pathname) {
+          this.$router.go(-1);
+        }
+      },
+    },
+  };
+</script>
diff --git a/website/client/components/userMenu/profilePage.vue b/website/client/components/userMenu/profilePage.vue
index 1c7ee048d6..43ef9d2922 100644
--- a/website/client/components/userMenu/profilePage.vue
+++ b/website/client/components/userMenu/profilePage.vue
@@ -1,21 +1,24 @@
 <template lang="pug">
-div
-  // @TODO: profile modal is pulled in on the header. So.. seems a little odd to depend on it that way, but for now let's depend
+  .container
+    .standard-page
+      profile(:userId='userId', :startingPage='startingPage')
 </template>
 
-<script>
-import profile from './profile';
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
 
-export default {
-  components: {
-    profile,
-  },
-  mounted () {
-    // @TODO: Do we need this page?
-    this.$root.$emit('habitica:show-profile', {
-      user: {},
-      startingPage: 'profile',
-    });
-  },
-};
+  .header {
+    width: 100%;
+  }
+</style>
+
+<script>
+  import profile from './profile';
+
+  export default {
+    props: ['userId', 'startingPage'],
+    components: {
+      profile,
+    },
+  };
 </script>
diff --git a/website/client/router/index.js b/website/client/router/index.js
index 2052ded759..167232732b 100644
--- a/website/client/router/index.js
+++ b/website/client/router/index.js
@@ -107,6 +107,15 @@ const router = new VueRouter({
     { name: 'logout', path: '/logout', component: Logout },
     { name: 'resetPassword', path: '/reset-password', component: RegisterLoginReset, meta: {requiresLogin: false} },
     { name: 'tasks', path: '/', component: UserTasks },
+    {
+      name: 'userProfile',
+      path: '/profile/:userId',
+      component: ProfilePage,
+      props: true,
+      children: [
+        { name: 'userProfilePage', path: ':startingPage', component: ProfilePage },
+      ],
+    },
     {
       path: '/inventory',
       component: InventoryContainer,
@@ -354,6 +363,31 @@ router.beforeEach(function routerGuard (to, from, next) {
     page: to.name || to.path,
   });
 
+  if ((to.name === 'userProfile' || to.name === 'userProfilePage') && from.name !== null) {
+    let startingPage = 'profile';
+    if (to.params.startingPage !== undefined) {
+      startingPage = to.params.startingPage;
+    }
+    router.app.$emit('habitica:show-profile', {
+      userId: to.params.userId,
+      startingPage,
+      path: to.path,
+    });
+    return;
+  }
+
+  if ((to.name === 'stats' || to.name === 'achievements' || to.name === 'profile') && from.name !== null) {
+    router.app.$emit('habitica:show-profile', {
+      startingPage: to.name,
+      path: to.path,
+    });
+    return;
+  }
+
+  if (from.name === 'userProfile' || from.name === 'userProfilePage' || from.name === 'stats' || from.name === 'achievements' || from.name === 'profile') {
+    router.app.$root.$emit('bv::hide::modal', 'profile');
+  }
+
   next();
 });