diff --git a/webapp/components/Category/Readme.md b/webapp/components/Category/Readme.md
new file mode 100644
index 000000000..50e07f966
--- /dev/null
+++ b/webapp/components/Category/Readme.md
@@ -0,0 +1,7 @@
+### Example
+
+Category "IT, Internet & Data Privacy" with icon "mouse-cursor"
+
+```
+<hc-category icon="mouse-pointer" name="IT, Internet & Data Privacy" />
+```
\ No newline at end of file
diff --git a/webapp/components/Category/index.spec.js b/webapp/components/Category/index.spec.js
new file mode 100644
index 000000000..149f96189
--- /dev/null
+++ b/webapp/components/Category/index.spec.js
@@ -0,0 +1,35 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Styleguide from '@human-connection/styleguide'
+import Category from './index'
+
+const localVue = createLocalVue()
+localVue.use(Styleguide)
+
+describe('Category', () => {
+  let icon
+  let name
+
+  let Wrapper = () => {
+    return shallowMount(Category, {
+      localVue,
+      propsData: {
+        icon,
+        name
+      }
+    })
+  }
+
+  describe('given Strings for Icon and Name', () => {
+    beforeEach(() => {
+      icon = 'mouse-cursor'
+      name = 'Peter'
+    })
+
+    it('shows Name', () => {
+      expect(Wrapper().text()).toContain('Peter')
+    })
+    it('shows Icon Svg', () => {
+      expect(Wrapper().contains('svg'))
+    })
+  })
+})
diff --git a/webapp/components/Category.vue b/webapp/components/Category/index.vue
similarity index 100%
rename from webapp/components/Category.vue
rename to webapp/components/Category/index.vue
diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 71043e90d..13edc9c0d 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -4,16 +4,15 @@
       style="padding-left: 40px; font-weight: bold;"
       color="soft"
     >
-      <ds-icon name="ban" /> {{ this.$t('comment.content.unavailable-placeholder') }}
+      <ds-icon name="ban" />
+      {{ this.$t('comment.content.unavailable-placeholder') }}
     </ds-text>
   </div>
   <div
     v-else
     :class="{'comment': true, 'disabled-content': (comment.deleted || comment.disabled)}"
   >
-    <ds-space
-      margin-bottom="x-small"
-    >
+    <ds-space margin-bottom="x-small">
       <hc-user :user="author" />
     </ds-space>
     <no-ssr>
@@ -32,13 +31,13 @@
       style="padding-left: 40px;"
       v-html="comment.contentExcerpt"
     />
-  <!-- eslint-enable vue/no-v-html -->
+    <!-- eslint-enable vue/no-v-html -->
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import HcUser from '~/components/User.vue'
+import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 
 export default {
diff --git a/webapp/components/PostCard.vue b/webapp/components/PostCard.vue
index 87f56e7e3..4bb1e4693 100644
--- a/webapp/components/PostCard.vue
+++ b/webapp/components/PostCard.vue
@@ -72,7 +72,7 @@
 </template>
 
 <script>
-import HcUser from '~/components/User.vue'
+import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 import { randomBytes } from 'crypto'
 
diff --git a/webapp/components/RelativeDateTime/index.vue b/webapp/components/RelativeDateTime/index.vue
index d512497f5..1f9ca2bda 100644
--- a/webapp/components/RelativeDateTime/index.vue
+++ b/webapp/components/RelativeDateTime/index.vue
@@ -12,7 +12,7 @@ const locales = {
   fr,
   es,
   pt
-  //pl
+  // pl
 }
 
 export default {
diff --git a/webapp/components/Tag/Readme.md b/webapp/components/Tag/Readme.md
new file mode 100644
index 000000000..359f2487d
--- /dev/null
+++ b/webapp/components/Tag/Readme.md
@@ -0,0 +1,7 @@
+### Example
+
+Tag "Liebe"
+
+```
+<hc-tag name="Liebe" />
+```
\ No newline at end of file
diff --git a/webapp/components/Tag/index.spec.js b/webapp/components/Tag/index.spec.js
new file mode 100644
index 000000000..20267e375
--- /dev/null
+++ b/webapp/components/Tag/index.spec.js
@@ -0,0 +1,29 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Styleguide from '@human-connection/styleguide'
+import Tag from './index'
+
+const localVue = createLocalVue()
+localVue.use(Styleguide)
+
+describe('Tag', () => {
+  let name
+
+  let Wrapper = () => {
+    return shallowMount(Tag, {
+      localVue,
+      propsData: {
+        name
+      }
+    })
+  }
+
+  describe('given a String for Name', () => {
+    beforeEach(() => {
+      name = 'Liebe'
+    })
+
+    it('shows Name', () => {
+      expect(Wrapper().text()).toContain('Liebe')
+    })
+  })
+})
diff --git a/webapp/components/Tag.vue b/webapp/components/Tag/index.vue
similarity index 100%
rename from webapp/components/Tag.vue
rename to webapp/components/Tag/index.vue
diff --git a/webapp/components/User.spec.js b/webapp/components/User/index.spec.js
similarity index 97%
rename from webapp/components/User.spec.js
rename to webapp/components/User/index.spec.js
index 0bbf13529..9f45ae83a 100644
--- a/webapp/components/User.spec.js
+++ b/webapp/components/User/index.spec.js
@@ -1,5 +1,5 @@
 import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
-import User from './User.vue'
+import User from './index'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import VTooltip from 'v-tooltip'
@@ -15,7 +15,7 @@ localVue.use(Styleguide)
 
 localVue.filter('truncate', filter)
 
-describe('User.vue', () => {
+describe('User', () => {
   let wrapper
   let Wrapper
   let propsData
diff --git a/webapp/components/User.vue b/webapp/components/User/index.vue
similarity index 100%
rename from webapp/components/User.vue
rename to webapp/components/User/index.vue
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index d7d87c6f4..b72faa850 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -79,14 +79,6 @@
         size="large"
       />&nbsp;
       <ds-space margin-bottom="small" />
-      <!--<div class="tags">
-      <ds-icon name="compass" /> <ds-tag
-        v-for="category in post.categories"
-        :key="category.id"
-      >
-        {{ category.name }}
-      </ds-tag>
-      </div>-->
       <!-- Tags -->
       <template v-if="post.tags && post.tags.length">
         <ds-space margin="xx-small" />
@@ -140,10 +132,10 @@
 <script>
 import gql from 'graphql-tag'
 
-import HcCategory from '~/components/Category.vue'
-import HcTag from '~/components/Tag.vue'
+import HcCategory from '~/components/Category'
+import HcTag from '~/components/Tag'
 import ContentMenu from '~/components/ContentMenu'
-import HcUser from '~/components/User.vue'
+import HcUser from '~/components/User'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import HcEmpty from '~/components/Empty.vue'
 import Comment from '~/components/Comment.vue'
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 38bf847a2..2eed6ac04 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -291,7 +291,7 @@
 <script>
 import uniqBy from 'lodash/uniqBy'
 
-import User from '~/components/User.vue'
+import User from '~/components/User'
 import HcPostCard from '~/components/PostCard.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'