diff --git a/backend/src/schema/types/type/User.gql b/backend/src/schema/types/type/User.gql
index 1287aa45f..6836f16fe 100644
--- a/backend/src/schema/types/type/User.gql
+++ b/backend/src/schema/types/type/User.gql
@@ -56,14 +56,14 @@ type User {
   contributionsCount: Int! @cypher(
     statement: """
       MATCH (this)-[:WROTE]->(r:Post)
-      WHERE (NOT exists(r.deleted) OR r.deleted = false)
-      AND (NOT exists(r.disabled) OR r.disabled = false)
+      WHERE NOT r.deleted = true AND NOT r.disabled = true
       RETURN COUNT(r)
     """
   )
 
   comments: [Comment]! @relation(name: "WROTE", direction: "OUT")
   commentsCount: Int! @cypher(statement: "MATCH (this)-[:WROTE]->(r:Comment) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(r)")
+  commentedCount: Int! @cypher(statement: "MATCH (this)-[:WROTE]->(r:Comment)-[:COMMENTS]->(p:Post) WHERE NOT r.deleted = true AND NOT r.disabled = true AND NOT p.deleted = true AND NOT p.disabled = true RETURN COUNT(DISTINCT(p))")
 
   shouted: [Post]! @relation(name: "SHOUTED", direction: "OUT")
   shoutedCount: Int! @cypher(statement: "MATCH (this)-[:SHOUTED]->(r:Post) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)")
@@ -77,4 +77,4 @@ type User {
 
   badges: [Badge]! @relation(name: "REWARDED", direction: "IN")
   badgesCount: Int! @cypher(statement: "MATCH (this)<-[:REWARDED]-(r:Badge) RETURN COUNT(r)")
-}
\ No newline at end of file
+}
diff --git a/webapp/components/LoadMore.vue b/webapp/components/LoadMore.vue
index 3d583ef50..ff8d4e6c4 100644
--- a/webapp/components/LoadMore.vue
+++ b/webapp/components/LoadMore.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-space margin-top="large" style="text-align: center">
+  <ds-space class="load-more" margin-top="large" style="text-align: center">
     <ds-button :loading="loading" icon="arrow-down" ghost @click="$emit('click')">
       {{ $t('actions.loadMore') }}
     </ds-button>
diff --git a/webapp/graphql/UserProfile/Post.js b/webapp/graphql/UserProfile/Post.js
new file mode 100644
index 000000000..c33572a9e
--- /dev/null
+++ b/webapp/graphql/UserProfile/Post.js
@@ -0,0 +1,38 @@
+import gql from 'graphql-tag'
+
+export default i18n => {
+  const lang = i18n.locale().toUpperCase()
+  return gql(`
+    query Post($filter: _PostFilter, $first: Int, $offset: Int) {
+      Post(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
+        id
+        slug
+        title
+        contentExcerpt
+        shoutedCount
+        commentsCount
+        deleted
+        image
+        createdAt
+        disabled
+        deleted
+        categories {
+          id
+          name
+          icon
+        }
+        author {
+          id
+          slug
+          avatar
+          name
+          disabled
+          deleted
+          location {
+            name: name${lang}
+          }
+        }
+      }
+    }
+  `)
+}
diff --git a/webapp/graphql/UserProfileQuery.js b/webapp/graphql/UserProfile/User.js
similarity index 63%
rename from webapp/graphql/UserProfileQuery.js
rename to webapp/graphql/UserProfile/User.js
index 16e7e1440..5bfe0510f 100644
--- a/webapp/graphql/UserProfileQuery.js
+++ b/webapp/graphql/UserProfile/User.js
@@ -1,10 +1,10 @@
 import gql from 'graphql-tag'
 
-export default app => {
-  const lang = app.$i18n.locale().toUpperCase()
+export default i18n => {
+  const lang = i18n.locale().toUpperCase()
   return gql(`
-    query User($slug: String!, $first: Int, $offset: Int) {
-      User(slug: $slug) {
+    query User($id: ID!) {
+      User(id: $id) {
         id
         slug
         name
@@ -24,7 +24,7 @@ export default app => {
         }
         badgesCount
         shoutedCount
-        commentsCount
+        commentedCount
         followingCount
         following(first: 7) {
           id
@@ -69,35 +69,6 @@ export default app => {
           }
         }
         contributionsCount
-        contributions(first: $first, offset: $offset, orderBy: createdAt_desc) {
-          id
-          slug
-          title
-          contentExcerpt
-          shoutedCount
-          commentsCount
-          deleted
-          image
-          createdAt
-          disabled
-          deleted
-          categories {
-            id
-            name
-            icon
-          }
-          author {
-            id
-            slug
-            avatar
-            name
-            disabled
-            deleted
-            location {
-              name: name${lang}
-            }
-          }
-        }
         socialMedia {
           id
           url
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index f2d1e7415..6f7bb3299 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -172,11 +172,6 @@
     }
   },
   "common": {
-    "your": {
-      "post": "Dein Beitrag ::: Deine Beiträge",
-      "comment": "Dein Kommentar ::: Deine Kommentare",
-      "shout": "Deine Empfehlung ::: Deine Empfehlungen"
-    },
     "post": "Beitrag ::: Beiträge",
     "comment": "Kommentar ::: Kommentare",
     "letsTalk": "Miteinander reden",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 093393045..8544498b7 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -172,11 +172,6 @@
     }
   },
   "common": {
-    "your": {
-      "post": "Your Post ::: Your Posts",
-      "comment": "Your Comment ::: Your Comments",
-      "shout": "Your Shout ::: Your Shouts"
-    },
     "post": "Post ::: Posts",
     "comment": "Comment ::: Comments",
     "letsTalk": "Let`s Talk",
diff --git a/webapp/pages/profile/_id/_slug.spec.js b/webapp/pages/profile/_id/_slug.spec.js
index d79f9b885..1bb0eea2e 100644
--- a/webapp/pages/profile/_id/_slug.spec.js
+++ b/webapp/pages/profile/_id/_slug.spec.js
@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { config, mount, shallowMount, createLocalVue } from '@vue/test-utils'
 import ProfileSlug from './_slug.vue'
 import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
@@ -7,6 +7,11 @@ const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.filter('date', d => d)
+
+config.stubs['no-ssr'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
 
 describe('ProfileSlug', () => {
   let wrapper
@@ -19,8 +24,14 @@ describe('ProfileSlug', () => {
         id: 'p23',
         name: 'It is a post',
       },
-      $t: jest.fn(),
-      // If you mocking router, than don't use VueRouter with lacalVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
+      $t: jest.fn(t => t),
+      // If you mocking router, than don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
+      $route: {
+        params: {
+          id: '4711',
+          slug: 'john-doe',
+        },
+      },
       $router: {
         history: {
           push: jest.fn(),
@@ -31,6 +42,7 @@ describe('ProfileSlug', () => {
         error: jest.fn(),
       },
       $apollo: {
+        loading: false,
         mutate: jest.fn().mockResolvedValue(),
       },
     }
@@ -60,7 +72,7 @@ describe('ProfileSlug', () => {
           beforeEach(jest.runAllTimers)
 
           it('emits "deletePost"', () => {
-            expect(wrapper.emitted().deletePost.length).toBe(1)
+            expect(wrapper.emitted().deletePost).toHaveLength(1)
           })
 
           it('does not go to index (main) page', () => {
@@ -78,4 +90,128 @@ describe('ProfileSlug', () => {
       })
     })
   })
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(ProfileSlug, {
+        mocks,
+        localVue,
+      })
+    }
+
+    describe('given an authenticated user', () => {
+      beforeEach(() => {
+        mocks.$filters = {
+          removeLinks: c => c,
+        }
+        mocks.$store = {
+          getters: {
+            'auth/user': {
+              id: 'u23',
+            },
+          },
+        }
+      })
+
+      describe('given a user for the profile', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+          wrapper.setData({
+            User: [
+              {
+                id: 'u3',
+                name: 'Bob the builder',
+                contributionsCount: 6,
+                shoutedCount: 7,
+                commentedCount: 8,
+              },
+            ],
+          })
+        })
+
+        it('displays name of the user', () => {
+          expect(wrapper.text()).toContain('Bob the builder')
+        })
+
+        describe('load more button', () => {
+          const aPost = {
+            title: 'I am a post',
+            content: 'This is my content',
+            contentExcerpt: 'This is my content',
+          }
+
+          describe('currently no posts available (e.g. after tab switching)', () => {
+            beforeEach(() => {
+              wrapper.setData({
+                Post: null,
+              })
+            })
+
+            it('displays no "load more" button', () => {
+              expect(wrapper.find('.load-more').exists()).toBe(false)
+            })
+
+            describe('apollo client in `loading` state', () => {
+              beforeEach(() => {
+                wrapper.vm.$apollo.loading = true
+              })
+
+              it('never displays more than one loading spinner', () => {
+                expect(wrapper.findAll('.ds-spinner')).toHaveLength(1)
+              })
+
+              it('displays a loading spinner below the posts list', () => {
+                expect(wrapper.find('.user-profile-posts-list .ds-spinner').exists()).toBe(true)
+              })
+            })
+          })
+
+          describe('pagination returned less posts than available', () => {
+            beforeEach(() => {
+              const posts = [1, 2, 3, 4, 5].map(id => {
+                return { ...aPost, id }
+              })
+
+              wrapper.setData({
+                Post: posts,
+              })
+            })
+
+            it('displays a "load more" button', () => {
+              expect(wrapper.find('.load-more').exists()).toBe(true)
+            })
+
+            describe('apollo client in `loading` state', () => {
+              beforeEach(() => {
+                wrapper.vm.$apollo.loading = true
+              })
+
+              it('never displays more than one loading spinner', () => {
+                expect(wrapper.findAll('.ds-spinner')).toHaveLength(1)
+              })
+
+              it('displays a loading spinner below the posts list', () => {
+                expect(wrapper.find('.load-more .ds-spinner').exists()).toBe(true)
+              })
+            })
+          })
+
+          describe('pagination returned as many posts as available', () => {
+            beforeEach(() => {
+              const posts = [1, 2, 3, 4, 5, 6].map(id => {
+                return { ...aPost, id }
+              })
+
+              wrapper.setData({
+                Post: posts,
+              })
+            })
+
+            it('displays no "load more" button', () => {
+              expect(wrapper.find('.load-more').exists()).toBe(false)
+            })
+          })
+        })
+      })
+    })
+  })
 })
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index eedcd199b..60f539ac7 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -142,69 +142,50 @@
           </ds-card>
         </ds-space>
       </ds-flex-item>
+
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
-        <ds-flex :width="{ base: '100%' }" gutter="small">
+        <ds-flex class="user-profile-posts-list" :width="{ base: '100%' }" gutter="small">
           <ds-flex-item class="profile-top-navigation">
             <ds-card class="ds-tab-nav">
-              <ds-flex>
-                <ds-flex-item
-                  v-tooltip="{
-                    content: $t('common.your.post', null, user.contributionsCount),
-                    placement: 'right',
-                    delay: { show: 500 },
-                  }"
-                  class="ds-tab-nav-item pointer ds-tab-nav-item-active"
-                  @click="tabActivity('posts', $event)"
-                >
-                  <ds-space margin="small">
-                    <!-- TODO: find better solution for rendering errors -->
-                    <no-ssr>
-                      <ds-number :label="$t('common.post', null, user.contributionsCount)">
-                        <hc-count-to slot="count" :end-val="user.contributionsCount" />
-                      </ds-number>
-                    </no-ssr>
-                  </ds-space>
-                </ds-flex-item>
-                <ds-flex-item
-                  v-tooltip="{
-                    content: $t('common.your.comment', null, user.commentsCount),
-                    placement: 'right',
-                    delay: { show: 500 },
-                  }"
-                  class="ds-tab-nav-item pointer"
-                  @click="tabActivity('commented', $event)"
-                >
-                  <ds-space margin="small">
-                    <!-- TODO: find better solution for rendering errors -->
-
-                    <no-ssr>
-                      <ds-number :label="$t('profile.commented')">
-                        <hc-count-to slot="count" :end-val="user.commentsCount" />
-                      </ds-number>
-                    </no-ssr>
-                  </ds-space>
-                </ds-flex-item>
-
-                <ds-flex-item
-                  v-tooltip="{
-                    content: $t('common.your.shout', null, user.shoutedCount),
-                    placement: 'right',
-                    delay: { show: 500 },
-                  }"
-                  class="ds-tab-nav-item pointer"
-                >
-                  <ds-space margin="small">
-                    <!-- TODO: find better solution for rendering errors -->
-                    <no-ssr>
-                      <ds-number :label="$t('profile.shouted')">
-                        <hc-count-to slot="count" :end-val="user.shoutedCount" />
-                      </ds-number>
-                    </no-ssr>
-                  </ds-space>
-                </ds-flex-item>
-              </ds-flex>
+              <ul class="Tabs">
+                <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'post' }">
+                  <a @click="handleTab('post')">
+                    <ds-space margin="small">
+                      <no-ssr placeholder="Loading...">
+                        <ds-number :label="$t('common.post', null, user.contributionsCount)">
+                          <hc-count-to slot="count" :end-val="user.contributionsCount" />
+                        </ds-number>
+                      </no-ssr>
+                    </ds-space>
+                  </a>
+                </li>
+                <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'comment' }">
+                  <a @click="handleTab('comment')">
+                    <ds-space margin="small">
+                      <no-ssr placeholder="Loading...">
+                        <ds-number :label="$t('profile.commented')">
+                          <hc-count-to slot="count" :end-val="user.commentedCount" />
+                        </ds-number>
+                      </no-ssr>
+                    </ds-space>
+                  </a>
+                </li>
+                <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'shout' }">
+                  <a @click="handleTab('shout')">
+                    <ds-space margin="small">
+                      <no-ssr placeholder="Loading...">
+                        <ds-number :label="$t('profile.shouted')">
+                          <hc-count-to slot="count" :end-val="user.shoutedCount" />
+                        </ds-number>
+                      </no-ssr>
+                    </ds-space>
+                  </a>
+                </li>
+                <li class="Tabs__presentation-slider" role="presentation"></li>
+              </ul>
             </ds-card>
           </ds-flex-item>
+
           <ds-flex-item style="text-align: center">
             <ds-button
               v-if="myProfile"
@@ -216,15 +197,23 @@
               primary
             />
           </ds-flex-item>
+
           <template v-if="activePosts.length">
             <hc-post-card
               v-for="(post, index) in activePosts"
               :key="post.id"
               :post="post"
               :width="{ base: '100%', md: '100%', xl: '50%' }"
-              @deletePost="user.contributions.splice(index, 1)"
+              @deletePost="Post.splice(index, 1)"
             />
           </template>
+          <template v-else-if="$apollo.loading">
+            <ds-flex-item>
+              <ds-section centered>
+                <ds-spinner size="base"></ds-spinner>
+              </ds-section>
+            </ds-flex-item>
+          </template>
           <template v-else>
             <ds-flex-item :width="{ base: '100%' }">
               <hc-empty margin="xx-large" icon="file" />
@@ -252,6 +241,17 @@ import HcUpload from '~/components/Upload'
 import HcAvatar from '~/components/Avatar/Avatar.vue'
 import PostMutationHelpers from '~/mixins/PostMutationHelpers'
 
+import PostQuery from '~/graphql/UserProfile/Post.js'
+import UserQuery from '~/graphql/UserProfile/User.js'
+
+const tabToFilterMapping = ({ tab, id }) => {
+  return {
+    post: { author: { id } },
+    comment: { comments_some: { author: { id } } },
+    shout: { shoutedBy_some: { id } },
+  }[tab]
+}
+
 export default {
   components: {
     User,
@@ -271,16 +271,28 @@ export default {
     mode: 'out-in',
   },
   data() {
+    const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
     return {
       User: [],
+      Post: [],
       voted: false,
       page: 1,
       pageSize: 6,
+      tabActive: 'post',
+      filter,
     }
   },
   computed: {
+    hasMore() {
+      const total = {
+        post: this.user.contributionsCount,
+        shout: this.user.shoutedCount,
+        comment: this.user.commentedCount,
+      }[this.tabActive]
+      return this.Post && this.Post.length < total
+    },
     myProfile() {
-      return this.$route.params.slug === this.$store.getters['auth/user'].slug
+      return this.$route.params.id === this.$store.getters['auth/user'].id
     },
     followedByCount() {
       let count = Number(this.user.followedByCount) || 0
@@ -292,16 +304,11 @@ export default {
     offset() {
       return (this.page - 1) * this.pageSize
     },
-    hasMore() {
-      return (
-        this.user.contributions && this.user.contributions.length < this.user.contributionsCount
-      )
-    },
     activePosts() {
-      if (!this.user.contributions) {
+      if (!this.Post) {
         return []
       }
-      return this.uniq(this.user.contributions.filter(post => !post.deleted))
+      return this.uniq(this.Post.filter(post => !post.deleted))
     },
     socialMediaLinks() {
       const { socialMedia = [] } = this.user
@@ -327,6 +334,11 @@ export default {
     },
   },
   methods: {
+    handleTab(tab) {
+      this.tabActive = tab
+      this.Post = null
+      this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
+    },
     uniq(items, field = 'id') {
       return uniqBy(items, field)
     },
@@ -338,19 +350,16 @@ export default {
       // this.page++
       // Fetch more data and transform the original result
       this.page++
-      this.$apollo.queries.User.fetchMore({
+      this.$apollo.queries.Post.fetchMore({
         variables: {
-          slug: this.$route.params.slug,
+          filter: this.filter,
           first: this.pageSize,
           offset: this.offset,
         },
         // Transform the previous result with new data
         updateQuery: (previousResult, { fetchMoreResult }) => {
-          let output = { User: this.User }
-          output.User[0].contributions = [
-            ...previousResult.User[0].contributions,
-            ...fetchMoreResult.User[0].contributions,
-          ]
+          let output = { Post: this.Post }
+          output.Post = [...previousResult.Post, ...fetchMoreResult.Post]
           return output
         },
         fetchPolicy: 'cache-and-network',
@@ -358,19 +367,28 @@ export default {
     },
   },
   apollo: {
-    User: {
+    Post: {
       query() {
-        return require('~/graphql/UserProfileQuery.js').default(this)
+        return PostQuery(this.$i18n)
       },
       variables() {
         return {
-          slug: this.$route.params.slug,
+          filter: this.filter,
           first: this.pageSize,
           offset: 0,
         }
       },
       fetchPolicy: 'cache-and-network',
     },
+    User: {
+      query() {
+        return UserQuery(this.$i18n)
+      },
+      variables() {
+        return { id: this.$route.params.id }
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>
@@ -380,8 +398,48 @@ export default {
   cursor: pointer;
 }
 
-.ds-tab-nav .ds-card-content .ds-tab-nav-item:hover {
-  border-bottom: 3px solid #c9c6ce;
+.Tab {
+  border-collapse: collapse;
+  padding-bottom: 5px;
+}
+.Tab:hover {
+  border-bottom: 2px solid #c9c6ce;
+}
+
+.Tabs {
+  position: relative;
+  background-color: #fff;
+  &:after {
+    content: ' ';
+    display: table;
+    clear: both;
+  }
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  &__tab {
+    float: left;
+    width: 33.333%;
+    text-align: center;
+    &:first-child.active ~ .Tabs__presentation-slider {
+      left: 0;
+    }
+    &:nth-child(2).active ~ .Tabs__presentation-slider {
+      left: 33.333%;
+    }
+    &:nth-child(3).active ~ .Tabs__presentation-slider {
+      left: calc(33.333% * 2);
+    }
+  }
+  &__presentation-slider {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 33.333%;
+    height: 2px;
+    background-color: #17b53f;
+    transition: left 0.25s;
+  }
 }
 
 .profile-avatar.ds-avatar {