diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index c0d0ab62..45ed53c1 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -47,6 +47,9 @@
               <b-dropdown-item to="/bookmarks">
                 Bookmarks
               </b-dropdown-item>
+              <b-dropdown-item v-if="isLoggedIn" to="/settings">
+                Settings
+              </b-dropdown-item>
               <b-dropdown-item @click.prevent="logoutHandler">
                 Logout
               </b-dropdown-item>
@@ -215,7 +218,7 @@ export default {
 
 .button-submit
   min-width auto
-  margin-left 15px
+  margin-left 10px
   font-weight 700
 
   .fa-rss
@@ -327,7 +330,7 @@ export default {
   .register
     display flex
     align-items center
-    margin-left 5px
+    margin-left 10px
 
   .logo-img
     max-height 30px
diff --git a/src/components/profile/ActivityHeader.vue b/src/components/profile/ActivityHeader.vue
index e29d3796..9bfd3c1b 100644
--- a/src/components/profile/ActivityHeader.vue
+++ b/src/components/profile/ActivityHeader.vue
@@ -7,8 +7,8 @@
 <style lang="stylus" scoped>
 .activity-header
   position relative
+  padding-bottom 0.8rem
   font-size 20px
-  padding 2rem 0 0.8rem
   font-weight 600
 
 </style>
diff --git a/src/components/profile/ProfileDetails.vue b/src/components/profile/ProfileDetails.vue
index 97aef65d..020c77f8 100644
--- a/src/components/profile/ProfileDetails.vue
+++ b/src/components/profile/ProfileDetails.vue
@@ -1,287 +1,173 @@
 <template>
-  <div class="display-details">
-    <div v-if="userData" class="user-details">
-      <div class="row-name">
-        <button
-          v-if="ownProfile"
-          class="button-submit button-submit-reverse"
-          style="margin-bottom:1rem;"
-          @click="profileEdit">
-          Edit Profile
-        </button>
-        <h3 class="display-name">
-          {{ displayName }} {{ displayLastName }}
-        </h3>
+  <div>
+    <div class="display-details">
+      <div class="crop-image">
+        <img class="profile-img" :src="errorImg || avatarUrl" @error="imgOnError">
+      </div>
+      <div v-if="userData" class="user-details">
+        <div class="row-name">
+          <h3 class="display-name">
+            {{ displayName }} {{ displayLastName }}
+          </h3>
+          <router-link
+            v-if="ownProfile"
+            class="button-submit button-submit-reverse"
+            to="/edit-profile">
+            <i class="fa fa-pencil" />
+            <span>Edit Profile</span>
+          </router-link>
+        </div>
+
+        <p>{{ displayBio }}</p>
       </div>
-      <p class="display-bio text-muted">
-        {{ displayBio }}
-      </p>
-      <p class="display-website" v-if="userData.website">
-        <a
-          :href="userData.website | externalUrl"
-          target="_blank"
-          rel="external nofollow">
-          {{ userData.website | host }}
-        </a>
-      </p>
-      <p class="display-website" v-if="userData.twitter">
-        <a :href="`https://twitter.com/${userData.twitter}`" target="_blank">
-        @{{ userData.twitter }}
-        </a>
-      </p>
     </div>
-    <div class="crop-image">
-      <img class="profile-img" :src="errorImg || avatarUrl" @error="imgOnError">
+
+    <div class="profile-footer" v-if="hasConnections">
+      <label class="text-muted">Connect:</label>
+
+      <a
+        v-if="userData.twitter"
+        :href="`https://twitter.com/${userData.twitter}`"
+        :title="userData.twitter"
+        target="_blank"
+        rel="external nofollow">
+        <i class="fa fa-twitter fa-2x" />
+      </a>
+
+      <a
+        v-if="userData.website"
+        :href="userData.website | externalUrl"
+        :title="userData.website | host"
+        target="_blank"
+        rel="external nofollow">
+        <i class="fa fa-globe fa-2x" />
+      </a>
     </div>
   </div>
 </template>
 
 <script>
-  import modal from '@/components/ModalComponent'
-  import { mapState, mapActions, mapGetters } from "vuex";
-
-  export default {
-    name: 'profile-details',
-    props: {
-      userData: {
-        type: Object,
-        default: function () {
-          return {
-            _id: '',
-            username: '',
-            avatarUrl: '',
-            bio: '',
-            name: '',
-            lastName: '',
-            website: '',
-            twitter: ''
-          }
+import { mapState, mapActions, mapGetters } from "vuex";
+
+export default {
+  name: 'profile-details',
+  props: {
+    userData: {
+      type: Object,
+      default: function () {
+        return {
+          _id: '',
+          username: '',
+          avatarUrl: '',
+          bio: '',
+          name: '',
+          lastName: '',
+          website: '',
+          twitter: ''
         }
-      },
-      ownProfile: {
-        type: Boolean,
-        default: false
-      }
-    },
-    components: {
-      modal,
-    },
-    data () {
-      return {
-        isModalVisible: false,
-        userTopics: [],
-        searchTopic: '',
-        checkedTopics: [],
-        topics:[],
-        isOpen: false,
-        modalTopics: [],
-        errorImg: ''
       }
     },
-    mounted () {
-      document.addEventListener('click', this.handleClickOutside)
-    },
-    destroyed() {
-      document.removeEventListener('click', this.handleClickOutside);
-    },
-    computed: {
-      ...mapGetters(["isLoggedIn"]),
-      ...mapState({
-        displayName () {
-          return this.userData.name || this.userData.username
-        },
-        displayLastName () {
-          return this.userData.lastName || ''
-        },
-        displayBio () {
-          return this.userData.bio || `${this.displayName} is still writing their biography`
-        },
-        avatarUrl(state) {
-          return (this.userData) ? this.userData.avatarUrl || state.placeholderAvatar : state.placeholderAvatar
-        },
-        publicLink (state) {
-          if (!this.userData || !this.userData.name) return null;
-          return `/profile/${this.userData._id}`
-        }
-      })
-    },
-    methods: {
-      ...mapActions(['getUserTopics','getSearchedTopics','addTopicToUser', 'fetchPublicProfileData']),
-      logoutHandler () {
-        this.$auth.logout()
-        this.$router.replace('/')
-      },
-      setResult(item) {
-        const topic = _.find(this.modalTopics, (x) => ( x._id === item._id ))
-        if (!topic) {
-          this.modalTopics.push(item);
-          this.checkedTopics.push(item._id);
-        }
-      },
-      profileEdit() {
-        this.$router.push('/edit-profile')
-      },
-      debounceSearchRequest: _.debounce(function () {
-        this.getSearchedTopics(this.searchTopic)
-      }, 500),
-      handleClickOutside(evt) {
-        if (this.$el.contains(evt.target)) {
-          this.isOpen = false;
-        }
-      },
-      goTo(slug){
-        this.$router.push(`/topics/${slug}`)
-      },
-      onChange() {
-        this.isOpen = true;
-        this.getSuggestedTopics()
-      },
-      getSuggestedTopics() {
-        if(this.searchTopic !== '') {
-          this.debounceSearchRequest()
-        }
-      },
-      imgOnError(event) {
-        this.errorImg = 'https://s3-us-west-2.amazonaws.com/sd-profile-pictures/profile-icon-9.png'
-      },
-      showModal() {
-        this.checkedTopics = []
-        this.userTopics.map((item) => {
-          this.modalTopics.push(item)
-        })
-        this.$store.state.topics.user.map((item) => {
-          this.checkedTopics.push(item._id)
-        })
-        this.isModalVisible = true;
-        $("body").addClass("modal-open")
+    ownProfile: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      isModalVisible: false,
+      userTopics: [],
+      searchTopic: '',
+      checkedTopics: [],
+      topics:[],
+      isOpen: false,
+      modalTopics: [],
+      errorImg: ''
+    }
+  },
+
+  computed: {
+    ...mapGetters(["isLoggedIn"]),
+
+    ...mapState({
+      displayName () {
+        return this.userData.name || this.userData.username
       },
-      closeModal() {
-        this.modalTopics = []
-        this.isModalVisible = false
-        this.searchTopic = ''
-        $("body").removeClass("modal-open")
+      displayLastName () {
+        return this.userData.lastName || ''
       },
-      getTopics() {
-        this.getUserTopics()
+      displayBio () {
+        return this.userData.bio || `${this.displayName} is still writing their biography`
       },
-      selectTopicsToUser() {
-        const selectedTopics = []
-        this.checkedTopics.map((id) => {
-          selectedTopics.push(id)
-        })
-        const userTopics = {
-          userId: this.$store.state.me._id,
-          topics: selectedTopics
-        }
-        this.addTopicToUser(userTopics).then(this.getTopics).then(this.closeModal)
+      avatarUrl(state) {
+        return (this.userData) ? this.userData.avatarUrl || state.placeholderAvatar : state.placeholderAvatar
       },
-      filterItems: function() {
-        const app = this
-        this.userTopics = this.$store.state.topics.user
-        this.topics = this.$store.state.topics.searchedAllTopics
-        if(this.topics !== null){
-          return this.topics
-        }
+      publicLink (state) {
+        if (!this.userData || !this.userData.name) return null;
+        return `/profile/${this.userData._id}`
       }
-    }
+    }),
+
+    hasConnections () {
+      return (this.userData && (this.userData.twitter || this.userData.website))
+    },
+  },
+
+  methods: {
+    ...mapActions([
+      'getUserTopics',
+      'getSearchedTopics',
+      'addTopicToUser',
+      'fetchPublicProfileData'
+    ]),
+
+    imgOnError(event) {
+      this.errorImg = 'https://s3-us-west-2.amazonaws.com/sd-profile-pictures/profile-icon-9.png'
+    },
   }
+}
 </script>
 
 <style scoped lang="stylus">
 @import '../../css/variables'
+
 .display-details
   display flex
-  justify-content space-between
-  margin-left auto
-  margin-right auto
+  justify-content stretch
+  margin 0 auto 1rem
   padding 10px
 
 .row-name
   display flex
-  flex-direction column
   align-items flex-start
-  max-width 400px
+  margin-bottom 1rem
 
-  .button-submit
-    max-height 30px
-    min-width 90px
-
-  .button-submit-reverse
-    background-color inherit
-    border 1px solid primary-color
-    padding 5px 10px
-    color primary-color
+.display-name
+  flex-grow 1
 
-@media (max-width 450px)
-  .display-details
-    flex-direction column-reverse
-    justify-content center
-
-  .user-details
-    margin 15px 0
-    text-align center !important
-
-    .display-name
-      margin 0 auto !important
-
-  .crop-image
-    margin-left auto !important
-    margin auto
+.button-submit
+  min-width auto
+  height auto
+  text-align center
+  line-heigt 30px
+  padding 6px 12px
 
-  .button-submit
-    margin-left auto !important
-    margin 10px auto
+  span
+    margin-left 4px
 
-  .row-name
-    flex-direction column-reverse
-    justify-content center
-
-@media (max-width 750px)
-  .user-topics
-    overflow auto
-    white-space nowrap
-    flex-wrap nowrap!important
-
-.user-topics-header
-  margin 20px 0
-  display flex
-  align-items center
+  &:hover
+    color #fff
+    text-decoration none
+    background-color #222
 
-  .user-topics
-    display flex
-    align-items center
-    max-width 100%
-    flex-wrap wrap
-
-    .topics
-      background-color primary-color
-      color white
-      margin 2px 0
-      margin-right 5px
-      padding 5px
-      border-radius 5px
-      cursor pointer
-
-.btn-link
-  color #ccc
-  background none
-  border none
-  outline none
-  cursor pointer
-  font-weight 500
-  padding-left 15px
-
-.profile
-  padding-top 2rem
-  justify-content center
-
-.wrapper
-  margin-left auto
-  margin-right auto
-  padding 10px
+.button-submit-reverse
+  color primary-color
+  background-color inherit
+  border 1px solid primary-color
 
 .user-details
-  text-align left
+  flex-grow 1
+  padding 0 1rem
 
   .display-name
     font-weight 600
@@ -300,222 +186,45 @@
     max-width 400px
 
 .crop-image
-  background-position center
-  background-size: cover
-  background-repeat no-repeat
-  border-radius 50%
-  min-width 100px
-  width 100px
-  height 100px
-  margin-left 15px
   overflow hidden
-  transition all .5s ease
-
-  &:hover
-    width 120px
-    height 120px
+  width 128px
+  min-width 128px
+  height 128px
+  margin-top 0.4rem
+  margin-right 1rem
+  border-radius 64px
 
 .profile-img
   width inherit
 
-.edit-link
-  padding 10px
-  text-align left
-  margin 0 auto
-
-  a
-    color primary-color
-
-.autocomplete
-  max-width 500px
-  margin auto
-
-  .absolute
-    background white
-    z-index 1000
-    height auto!important
-    position absolute
-
-.search-label
-  width 100%
-  cursor pointer
-
-  &:hover
-    color primary-color
-
-body.modal-open
-  overflow hidden
-
-.btn-modal
-  background-color primary-color
-  color white
-  margin-right 5px
-  padding 5px
-  border-radius 0 5px 5px 0
-  border 1px solid #c4c4c4
-  cursor pointer
-  outline none
-
-.btn-modal-secondary
-  background-color white
-  color black
-  margin-right 5px
-  padding 5px
-  border none
-  cursor pointer
-  outline none
-
-h2
-  margin 0
-  color black
-  font-size 1.5rem
-
-.post-topics-header
-  margin 15px 20px
-  display flex
-  align-items center
-
-  .post-topics
-    display flex
-    align-items center
-    max-width 70%
-    flex-wrap wrap
-
-    .topics
-      background-color primary-color
-      color white
-      margin 2px 0
-      margin-right 5px
-      padding 5px
-      border-radius 5px
-      border 1px solid #c4c4c4
-
-.search-bar
-  justify-content center
-  flex 1
-  display flex
-  align-items center
-
-  input
-    max-width 500px
-    flex 1
-    border-radius 5px
-    padding 5px
-    font-weight 100
-    color #C4C4C4
-    border 1px solid #ccc
-
-    &:focus
-      outline none
-      color #495057
-      background-color #fff
-      border-color: #edeaff
-      outline 0
-      box-shadow 0 0 0 0.2rem rgba(133, 106, 255, 0.25)
-
-.container
-  width auto
+.profile-footer
   display flex
   align-items center
-  position relative
-  padding-left 35px
-  margin-bottom 12px
-  margin-top 12px
-  cursor pointer
-  font-size 16px
-  -webkit-user-select none
-  -moz-user-select none
-  -ms-user-select none
-
-  input
-    position absolute
-    opacity 0
-    cursor pointer
-    height 0
-    width 0
-
-  .checkmark
-    position absolute
-    left 0
-    height 20px
-    width 20px
-    background-color #eee
-
-.container:hover input ~ .checkmark
-  background-color #ccc
-
-.container input:checked ~ .checkmark
-  background-color primary-color
-
-.checkmark:after
-  content ""
-  position absolute
-  display none
-
-.container input:checked ~ .checkmark:after
-  display block
-
-.container .checkmark:after
-  left 7px
-  top 3px
-  width 6px
-  height 12px
-  border 2px solid white
-  border-width 0 3px 3px 0
-  -webkit-transform rotate(45deg)
-  -ms-transform rotate(45deg)
-  transform rotate(45deg)
-
-.no-topic
-  display flex
-  flex-direction column
-  overflow auto
-  overflow-x hidden
-  width 100%
-  height 100%
-  max-height 250px
-  max-width 500px
-  margin auto
-  padding 0
-  padding 5px
-
-.popular-topics
-  display flex
-  flex-direction column
-  overflow auto
-  overflow-x hidden
-  width 100%
-  height 100%
-  max-height 250px
-  max-width 500px
-  margin auto
-  padding 0
-  border-radius 5px
-  border 1px solid #c4c4c4
-  padding 10px
-  list-style none
-
-.popular-topic
-  justify-content center
-  text-align left
+  justify-content flex-start
+  margin-bottom 2rem
+  padding 1rem 10px
+  border-top 1px solid #e9ecef
+  border-bottom 1px solid #e9ecef
 
-.popular-topics::-webkit-scrollbar
-  width 5px
+  .fa-twitter:hover
+    color #1da1f2
 
-.popular-topics::-webkit-scrollbar-track
-  background #f1f1f1
+  .fa-globe:hover
+    color #a591ff
 
-.popular-topics::-webkit-scrollbar-thumb
-  background #d0c6ff
+  label
+    margin-bottom 0
 
-.popular-topics::-webkit-scrollbar-thumb:hover
-  background #555
+  & > *
+    margin-right 1.5rem
 
-.public-link
-  text-decoration none
-  color primary-color
+@media (max-width 750px)
+  .crop-image
+    width 64px
+    min-width 64px
+    height 64px
 
-  &:hover
-    font-weight bold
+  .button-submit span
+    display none
 
 </style>
diff --git a/src/components/profile/UpdateProfile.vue b/src/components/profile/UpdateProfile.vue
index e5ab1cbc..88b3ae2d 100644
--- a/src/components/profile/UpdateProfile.vue
+++ b/src/components/profile/UpdateProfile.vue
@@ -2,24 +2,25 @@
   <div>
     <div class="row">
       <form class="col-md-6 offset-md-3" v-on:submit.prevent="submit">
-        <div class="row">
-        </div>
+
         <h1>Edit Profile</h1>
+
         <div class="crop-edit-image" v-if="showExistingAvatarUrl">
           <img class="edit-profile-img" :src="avatarUrl" />
         </div>
 
         <div class="form-group">
           <label for="emailInput">Email address</label>
+
           <input type="email"
-          id="emailInput"
-          v-model="email"
-          v-validate="{ required: false, email: true}"
-          disabled
-          name="email"
-          class="form-control"
-          aria-describedby="emailHelp"
-          placeholder="youremail@email.com">
+            id="emailInput"
+            v-model="email"
+            v-validate="{ required: false, email: true}"
+            disabled
+            name="email"
+            class="form-control"
+            aria-describedby="emailHelp"
+            placeholder="youremail@email.com" />
 
           <div v-show="errors.has('email')" class="alert alert-danger">
             {{ errors.first("email") }}
@@ -41,14 +42,14 @@
 
         <div class="form-group">
           <label for="nameInput">Name <span class="public-info"/></label>
-          <input type="text" 
-          v-model="name"
-          name="name"
-          id="nameInput"
-          class="form-control"
-          v-validate="'required'"
-          aria-describedby="nameHelp"
-          placeholder="Alex">
+          <input type="text"
+            v-model="name"
+            name="name"
+            id="nameInput"
+            class="form-control"
+            v-validate="'required'"
+            aria-describedby="nameHelp"
+            placeholder="Alex" />
 
           <div v-show="errors.has('name')" class="alert alert-danger">
             {{ errors.first("name") }}
@@ -57,14 +58,14 @@
 
         <div class="form-group">
           <label for="LastNameInput">Last name <span class="public-info"/></label>
-          <input type="text" 
-          v-model="lastName"
-          name="lastName"
-          id="LastNameInput"
-          class="form-control"
-          v-validate="'required'"
-          aria-describedby="lastNameHelp"
-          placeholder="Smith">
+          <input type="text"
+            v-model="lastName"
+            name="lastName"
+            id="LastNameInput"
+            class="form-control"
+            v-validate="'required'"
+            aria-describedby="lastNameHelp"
+            placeholder="Smith" />
 
           <div v-show="errors.has('LastName')" class="alert alert-danger">
             {{ errors.first("LastName") }}
@@ -73,13 +74,13 @@
 
         <div class="form-group">
           <label for="twitterInput">Twitter account <span class="public-info"/></label>
-          <input type="text" 
-          v-model="twitter"
-          name="twitter"
-          id="twitterInput"
-          class="form-control"
-          aria-describedby="twitterHelp"
-          placeholder="alexsmith">
+          <input type="text"
+            v-model="twitter"
+            name="twitter"
+            id="twitterInput"
+            class="form-control"
+            aria-describedby="twitterHelp"
+            placeholder="alexsmith" />
 
           <div v-show="errors.has('twitter')" class="alert alert-danger">
             {{ errors.first("twitter") }}
@@ -88,29 +89,35 @@
 
         <div class="form-group">
           <label for="bioInput">Bio <span class="public-info"/></label>
-          <input type="text" 
-          v-model="bio"
-          id="bioInput"
-          class="form-control"
-          aria-describedby="bioHelp"
-          placeholder="A short bio">
+          <b-form-textarea
+            v-model="bio"
+            id="bioInput"
+            class="form-control"
+            aria-describedby="bioHelp"
+            rows="2"
+            max-rows="6"
+            placeholder="A short bio" />
         </div>
 
         <div class="form-group">
           <label for="websiteInput">Website</label>
-          <input type="text" 
-          v-model="website"
-          id="websiteInput"
-          class="form-control"
-          aria-describedby="websiteHelp"
-          placeholder="yourWebsite.com">
+          <input type="text"
+            v-model="website"
+            id="websiteInput"
+            class="form-control"
+            aria-describedby="websiteHelp"
+            placeholder="yourWebsite.com" />
         </div>
 
         <button
-        class="button-submit" @click.prevent="submit" :disabled="loading">
+          class="button-submit"
+          @click.prevent="submit"
+          :disabled="loading">
           Update
         </button>
+
         {{msg}}
+
         <spinner :show="loading"></spinner>
       </form>
     </div>
@@ -200,9 +207,11 @@ export default {
       this.$validator.validateAll().then((result) => {
         if (result) {
           this.loading = true
+
           const { bio, website, name, id, lastName, twitter } = this
           const cleanTwitter = (twitter) ? twitter.replace('@','') : null
           let updatePromise = null
+
           if (this.file) {
             updatePromise = this.uploadAvatarImage({ imageFile: this.file })
               .then((imageSuccess) => {
@@ -218,10 +227,10 @@ export default {
               })
               .catch((error) => {
                 console.log('Error uploading', error)
-                this.$toasted.error('Error uploading', { 
+                this.$toasted.error('Error uploading', {
                     singleton: true,
-                    theme: "bubble", 
-                    position: "bottom-center", 
+                    theme: "bubble",
+                    position: "bottom-center",
                     duration : 700
                 })
               })
@@ -249,10 +258,10 @@ export default {
             })
             .catch((error) => {
               console.log('Error Updaating', error)
-              this.$toasted.error('There was a problem updating your profile', { 
+              this.$toasted.error('There was a problem updating your profile', {
                   singleton: true,
-                  theme: "bubble", 
-                  position: "bottom-center", 
+                  theme: "bubble",
+                  position: "bottom-center",
                   duration : 700
               })
             })
@@ -264,28 +273,48 @@ export default {
   }
 }
 </script>
+
 <style lang="stylus">
-  @import '../../css/variables'
-  .fileInput
-    padding 3px !important
-    display ruby-text-container
-  .edit-profile-img
-    display: inline;
-    height: 100%;
-    width: auto;
-
-  .crop-edit-image
-    background-position 50%
-    background-repeat no-repeat
-    border-radius 50%
-    margin 15px 0
-    width 100px
-    height 100px
-    overflow hidden
-  
-  .public-info
-    color light-grey
-
-  .public-info:before
-    content "*Public"
+@import '../../css/variables'
+
+.fileInput
+  padding 3px !important
+  display ruby-text-container
+
+.edit-profile-img
+  display: inline;
+  height: 100%;
+  width: auto;
+
+.crop-edit-image
+  background-position 50%
+  background-repeat no-repeat
+  border-radius 50%
+  margin 15px 0
+  width 100px
+  height 100px
+  overflow hidden
+
+.public-info
+  color light-grey
+
+.public-info:before
+  content "*Public"
+
+input.form-control::-webkit-input-placeholder {
+  color light-grey
+}
+
+input.form-control::-moz-placeholder {
+  color light-grey
+}
+
+input.form-control:-ms-input-placeholder {
+  color light-grey
+}
+
+input.form-control:-moz-placeholder {
+  color light-grey
+}
+
 </style>
diff --git a/src/views/profile/ProfileActivities.vue b/src/views/profile/ProfileActivities.vue
index c001b93c..4745201b 100644
--- a/src/views/profile/ProfileActivities.vue
+++ b/src/views/profile/ProfileActivities.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="display-activities" v-if="activities">
-    <activity-header>Last {{activityDays}} Days of Activities</activity-header>
+    <activity-header>Latest from {{userData.name}}</activity-header>
     <div v-for="(items, date) in activities" class="activity-group" :key="date">
       <div class="activity-group-date">{{groupDateFormat(date)}}</div>
       <div class="activity-group-content">
@@ -93,7 +93,7 @@ export default {
       if (act.activityType === 'topicPageChange') {
         return 'Made changes in topic'
       }
-      
+
       if (act.activityType === 'topicPagePublish') {
         return 'Published topic'
       }
diff --git a/src/views/profile/ProfileView.vue b/src/views/profile/ProfileView.vue
index ce4f6b7c..8e9eb409 100644
--- a/src/views/profile/ProfileView.vue
+++ b/src/views/profile/ProfileView.vue
@@ -6,31 +6,25 @@
     <div v-else-if="error" class="bg-danger">
       Error: {{ error }}
     </div>
-    <div v-else class="row">
-
-      <div class="profile-view col-md-8">
-        <profile-details
-          :userData="me"
-          :ownProfile="true" />
-
-        <div class="profile-footer">
-          <label class="text-muted">Settings:</label>
-          <router-link to="/settings" class="settings">E-mail</router-link>
+    <div v-else>
+
+      <profile-details
+        :userData="me"
+        :ownProfile="true" />
+
+      <div class="row">
+        <div class="profile-item col-md-8">
+          <profile-activities
+            :userData="me"
+            :activities="activities"
+            :activityDays="activityDays" />
         </div>
 
-        <profile-activities
-          :userData="me"
-          :activities="activities"
-          :activityDays="activityDays" />
+        <div class="profile-item col-md-4">
+          <profile-topics v-if="me" :user="me" />
+        </div>
       </div>
 
-      <div class="profile-view col-md-4">
-        <profile-badges
-          :userData="me"
-          :badges="badges" />
-
-        <profile-topics v-if="me" :user="me" />
-      </div>
     </div>
   </div>
 </template>
@@ -38,7 +32,6 @@
 <script type="text/javascript">
 import { mapActions, mapState } from 'vuex'
 import ProfileDetails from '@/components/profile/ProfileDetails'
-import ProfileBadges from './ProfileBadges'
 import ProfileActivities from './ProfileActivities'
 import ProfileTopics from './ProfileTopics'
 import Spinner from '@/components/Spinner'
@@ -48,7 +41,6 @@ export default {
 
   components: {
     ProfileDetails,
-    ProfileBadges,
     ProfileActivities,
     ProfileTopics,
     Spinner
@@ -76,7 +68,7 @@ export default {
           state.me.subscription.active
         )
       },
-    })
+    }),
   },
 
   watch: {
@@ -95,8 +87,12 @@ export default {
     ]),
 
     async fetchData () {
-      if (!this.me || !this.me._id) return;
+      if (!this.me || !this.me._id) {
+        return;
+      }
+
       this.loading = true
+
       try {
         const response = await this.fetchPublicActivities({ userId: this.me._id })
 
@@ -123,23 +119,11 @@ export default {
   text-align center
   margin 5vh 0
 
-.profile-footer
-  padding-left 10px
-
-  & > *
-    margin-right 10px
-
-.settings
-  display inline-block
-  font-weight 600
-
-  &:hover
-    color primary-color
-
 .bg-danger
   text-align center
   color #ffffff
   padding 10px
   font-size 16px
   font-weight 600
+
 </style>
diff --git a/src/views/profile/PublicProfileView.vue b/src/views/profile/PublicProfileView.vue
index 6cebaaff..b86b6169 100644
--- a/src/views/profile/PublicProfileView.vue
+++ b/src/views/profile/PublicProfileView.vue
@@ -2,20 +2,23 @@
   <div class="container">
     <div v-if="loading" class="profile-loading"><spinner :show="loading"/></div>
     <div v-else-if="error" class="bg-danger"> Error: {{ error }}</div>
-    <div v-else class="row">
-      <div class="col-md-8">
-        <profile-details
-          :userData="user" />
-        <profile-activities
-          :userData="user"
-          :activities="activities"
-          :activityDays="activityDays" />
-      </div>
-      <div class="col-md-4">
-        <profile-badges
-          :userData="user"
-          :badges="badges" />
+    <div v-else>
+
+      <profile-details :userData="user" />
+
+      <div class="row">
+        <div class="profile-item col-md-8">
+          <profile-activities
+            :userData="user"
+            :activities="activities"
+            :activityDays="activityDays" />
+        </div>
+
+        <div class="profile-item col-md-4">
+          <profile-topics v-if="user" :user="user" />
+        </div>
       </div>
+
     </div>
   </div>
 </template>
@@ -24,15 +27,15 @@
 import { mapActions, mapState } from 'vuex'
 import ProfileDetails from '@/components/profile/ProfileDetails'
 import ProfileActivities from './ProfileActivities'
-import ProfileBadges from './ProfileBadges'
+import ProfileTopics from './ProfileTopics'
 import Spinner from '@/components/Spinner'
 
 export default {
   name: 'public-profile-view',
   components: {
     ProfileDetails,
-    ProfileBadges,
     ProfileActivities,
+    ProfileTopics,
     Spinner
   },
   data () {
@@ -86,7 +89,12 @@ export default {
 }
 </script>
 <style lang="stylus" scoped>
-  .container
-    .profile-loading
-      text-align center
+.container
+  .profile-loading
+    text-align center
+
+@media (max-width 750px)
+  .profile-item
+    margin-bottom 2rem
+
 </style>