diff --git a/backend/yarn.lock b/backend/yarn.lock
index 5bce265dc..7d036529a 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -5595,7 +5595,7 @@ jest-environment-node@^25.2.6:
     jest-util "^25.2.6"
     semver "^6.3.0"
 
-jest-get-type@^25.2.6:
+jest-get-type@^25.2.1, jest-get-type@^25.2.6:
   version "25.2.6"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
   integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
@@ -5792,7 +5792,7 @@ jest-snapshot@^25.2.7:
     pretty-format "^25.2.6"
     semver "^6.3.0"
 
-jest-util@^25.2.6:
+jest-util@^25.2.3, jest-util@^25.2.6:
   version "25.2.6"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.2.6.tgz#3c1c95cdfd653126728b0ed861a86610e30d569c"
   integrity sha512-gpXy0H5ymuQ0x2qgl1zzHg7LYHZYUmDEq6F7lhHA8M0eIwDB2WteOcCnQsohl9c/vBKZ3JF2r4EseipCZz3s4Q==
@@ -7467,7 +7467,7 @@ prettier@~2.0.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.2.tgz#1ba8f3eb92231e769b7fcd7cb73ae1b6b74ade08"
   integrity sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg==
 
-pretty-format@^25.2.6:
+pretty-format@^25.2.3, pretty-format@^25.2.6:
   version "25.2.6"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.2.6.tgz#542a1c418d019bbf1cca2e3620443bc1323cb8d7"
   integrity sha512-DEiWxLBaCHneffrIT4B+TpMvkV9RNvvJrd3lY9ew1CEQobDzEXmYT1mg0hJhljZty7kCc10z13ohOFAE8jrUDg==
diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js
index 85b49f631..4bc685d62 100644
--- a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js
+++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js
@@ -26,6 +26,13 @@ storiesOf('Generic/CounterIcon', module)
     `,
   }))
 
+  .add('soft', () => ({
+    components: { CounterIcon },
+    template: `
+      <counter-icon icon="bell" :count="42" soft />
+    `,
+  }))
+
   .add('count is 0', () => ({
     components: { CounterIcon },
     template: `
diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
index 00b4b9c53..0d97921ce 100644
--- a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
+++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
@@ -11,6 +11,7 @@ export default {
     icon: { type: String, required: true },
     count: { type: Number, required: true },
     danger: { type: Boolean, default: false },
+    soft: { type: Boolean, default: false },
   },
   computed: {
     cappedCount() {
@@ -18,7 +19,8 @@ export default {
     },
     counterClass() {
       let counterClass = 'count'
-      if (this.danger) counterClass += ' --danger'
+      if (this.soft) counterClass += ' --soft'
+      else if (this.danger) counterClass += ' --danger'
       if (this.count === 0) counterClass += ' --inactive'
 
       return counterClass
@@ -58,6 +60,11 @@ export default {
     &.--inactive {
       background-color: $color-neutral-60;
     }
+
+    &.--soft {
+      background-color: $color-neutral-90;
+      color: $text-color-soft;
+    }
   }
 }
 </style>
diff --git a/webapp/components/generic/SearchPost/SearchPost.spec.js b/webapp/components/generic/SearchPost/SearchPost.spec.js
index 713171078..6128c006e 100644
--- a/webapp/components/generic/SearchPost/SearchPost.spec.js
+++ b/webapp/components/generic/SearchPost/SearchPost.spec.js
@@ -1,11 +1,11 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import SearchPost from './SearchPost.vue'
 
 const localVue = global.localVue
 localVue.filter('dateTime', (d) => d)
 
 describe('SearchPost.vue', () => {
-  let mocks, wrapper, propsData
+  let mocks, wrapper, propsData, counts
   beforeEach(() => {
     mocks = {
       $t: jest.fn((string) => string),
@@ -22,43 +22,32 @@ describe('SearchPost.vue', () => {
       },
     }
     wrapper = Wrapper()
+    counts = wrapper.find('.search-post > .metadata > .counts')
   })
 
   const Wrapper = () => {
-    return shallowMount(SearchPost, { mocks, localVue, propsData })
+    return mount(SearchPost, { mocks, localVue, propsData })
   }
 
   describe('shallowMount', () => {
     it('renders post title', () => {
-      expect(wrapper.find('.search-option-label').text()).toMatch('Post Title')
+      expect(wrapper.find('.search-post > .label').text()).toMatch('Post Title')
     })
 
     it('renders post commentsCount', () => {
-      expect(
-        wrapper
-          .find('.search-post-meta')
-          .findAll('span')
-          .filter((item) => item.text() === '3')
-          .exists(),
-      ).toBe(true)
+      expect(counts.text()).toContain(propsData.option.commentsCount)
     })
 
     it('renders post shoutedCount', () => {
-      expect(
-        wrapper
-          .find('.search-post-meta')
-          .findAll('span')
-          .filter((item) => item.text() === '6')
-          .exists(),
-      ).toBe(true)
+      expect(counts.text()).toContain(propsData.option.shoutedCount)
     })
 
     it('renders post author', () => {
-      expect(wrapper.find('.search-post-author').text()).toContain('Post Author')
+      expect(wrapper.find('.search-post > .metadata').text()).toContain('Post Author')
     })
 
     it('renders post createdAt', () => {
-      expect(wrapper.find('.search-post-author').text()).toContain('23.08.2019')
+      expect(wrapper.find('.search-post > .metadata').text()).toContain('23.08.2019')
     })
   })
 })
diff --git a/webapp/components/generic/SearchPost/SearchPost.vue b/webapp/components/generic/SearchPost/SearchPost.vue
index 3da6056ba..079322097 100644
--- a/webapp/components/generic/SearchPost/SearchPost.vue
+++ b/webapp/components/generic/SearchPost/SearchPost.vue
@@ -1,34 +1,23 @@
 <template>
-  <ds-flex class="search-post">
-    <ds-flex-item class="search-option-label">
-      <ds-text>{{ option.title | truncate(70) }}</ds-text>
-    </ds-flex-item>
-    <ds-flex-item class="search-option-meta" width="280px">
-      <ds-flex>
-        <ds-flex-item>
-          <ds-text size="small" color="softer" class="search-post-meta">
-            <span class="comments-count">
-              {{ option.commentsCount }}
-              <base-icon name="comments" />
-            </span>
-            <span class="shouted-count">
-              {{ option.shoutedCount }}
-              <base-icon name="bullhorn" />
-            </span>
-          </ds-text>
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-text size="small" color="softer" align="right" class="search-post-author">
-            {{ option.author.name | truncate(32) }} -
-            {{ option.createdAt | dateTime('dd.MM.yyyy') }}
-          </ds-text>
-        </ds-flex-item>
-      </ds-flex>
-    </ds-flex-item>
-  </ds-flex>
+  <section class="search-post">
+    <p class="label">{{ option.title | truncate(70) }}</p>
+    <div class="metadata">
+      <span class="counts">
+        <counter-icon icon="comments" :count="option.commentsCount" soft />
+        <counter-icon icon="bullhorn" :count="option.shoutedCount" soft />
+      </span>
+      {{ option.author.name | truncate(32) }} - {{ option.createdAt | dateTime('dd.MM.yyyy') }}
+    </div>
+  </section>
 </template>
+
 <script>
+import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+
 export default {
+  components: {
+    CounterIcon,
+  },
   name: 'SearchPost',
   props: {
     option: { type: Object, required: true },
@@ -37,35 +26,23 @@ export default {
 </script>
 <style lang="scss">
 .search-post {
-  width: 100%;
-}
-.search-option-label {
-  align-self: center;
-  padding-left: $space-x-small;
-}
-.search-option-meta {
-  align-self: center;
-  .ds-flex {
+  display: flex;
+
+  > .label {
+    flex-grow: 1;
+    padding: 0 $space-x-small;
+  }
+
+  > .metadata {
+    display: flex;
     flex-direction: column;
+    align-items: flex-end;
+    color: $text-color-softer;
+    font-size: $font-size-small;
+
+    > .counts > .counter-icon {
+      margin: 0 $space-x-small;
+    }
   }
 }
-.search-post-meta {
-  float: right;
-  padding-top: 2px;
-  white-space: nowrap;
-  word-wrap: none;
-  .base-icon {
-    vertical-align: sub;
-  }
-}
-.shouted-count {
-  width: 36px;
-  display: inline-block;
-  text-align: right;
-  font-weight: $font-weight-bold;
-}
-.comments-count {
-  text-align: right;
-  font-weight: $font-weight-bold;
-}
 </style>
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.story.js b/webapp/components/generic/SearchableInput/SearchableInput.story.js
index 4b5c42e3b..2c51fabbf 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.story.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.story.js
@@ -13,7 +13,7 @@ export const searchResults = [
     title: 'User Post by Jenny',
     value: 'User Post by Jenny',
     shoutedCount: 0,
-    commentCount: 4,
+    commentsCount: 4,
     createdAt: '2019-11-13T03:03:16.155Z',
     author: {
       id: 'u3',
@@ -28,7 +28,7 @@ export const searchResults = [
     title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
     value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
     shoutedCount: 0,
-    commentCount: 0,
+    commentsCount: 0,
     createdAt: '2019-11-13T03:00:45.478Z',
     author: {
       id: 'u6',
@@ -43,7 +43,7 @@ export const searchResults = [
     title: 'This is post #7',
     value: 'This is post #7',
     shoutedCount: 1,
-    commentCount: 1,
+    commentsCount: 1,
     createdAt: '2019-11-13T03:00:23.098Z',
     author: {
       id: 'u6',
@@ -58,7 +58,7 @@ export const searchResults = [
     title: 'This is post #12',
     value: 'This is post #12',
     shoutedCount: 0,
-    commentCount: 12,
+    commentsCount: 12,
     createdAt: '2019-11-13T03:00:23.098Z',
     author: {
       id: 'u6',