diff --git a/webapp/components/Category/index.vue b/webapp/components/Category/index.vue
index 8e4014086..ebbaae584 100644
--- a/webapp/components/Category/index.vue
+++ b/webapp/components/Category/index.vue
@@ -30,6 +30,7 @@ export default {
   }
 }
 .filterActive {
-  background-color: $color-success-active;
+  color: $color-primary-inverse;
+  background-color: $color-primary-active;
 }
 </style>
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 73b721202..7eb5fa87c 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -26,7 +26,7 @@
         v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, post.id)"
       >
         <div class="categories" v-if="categoriesActive">
-          <hc-category
+          <category
             v-for="category in post.categories"
             :key="category.id"
             v-tooltip="{
@@ -81,11 +81,11 @@
 </template>
 
 <script>
-import UserTeaser from '~/components/UserTeaser/UserTeaser'
+import Category from '~/components/Category'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import HcRibbon from '~/components/Ribbon'
-import HcCategory from '~/components/Category'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+import HcRibbon from '~/components/Ribbon'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import { mapGetters } from 'vuex'
 import PostMutations from '~/graphql/PostMutations'
 import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
@@ -93,11 +93,11 @@ import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostH
 export default {
   name: 'PostTeaser',
   components: {
-    UserTeaser,
-    HcCategory,
-    HcRibbon,
+    Category,
     ContentMenu,
     CounterIcon,
+    HcRibbon,
+    UserTeaser,
   },
   props: {
     post: {