diff --git a/webapp/components/Category/index.vue b/webapp/components/Category/index.vue
index af602d4d0..028d8c4a4 100644
--- a/webapp/components/Category/index.vue
+++ b/webapp/components/Category/index.vue
@@ -13,7 +13,7 @@ export default {
   name: 'HcCategory',
   props: {
     icon: { type: String, required: true },
-    name: { type: String, required: true }
+    name: { type: String, default: '' }
   }
 }
 </script>
diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index acddba5d6..cde334bfd 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -1,73 +1,76 @@
 <template>
   <ds-card
-    :header="post.title"
     :image="post.image"
     :class="{'post-card': true, 'disabled-content': post.disabled}"
   >
+    <!-- Post Link Target -->
     <nuxt-link
       class="post-link"
       :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
     >
       {{ post.title }}
     </nuxt-link>
-    <!-- eslint-disable vue/no-v-html -->
-    <!-- TODO: replace editor content with tiptap render view -->
-    <ds-space margin-bottom="large">
-      <div
-        class="hc-editor-content"
-        v-html="excerpt"
-      />
-    </ds-space>
-    <!-- eslint-enable vue/no-v-html -->
-    <ds-space>
-      <ds-text
-        v-if="post.createdAt"
-        align="right"
-        size="small"
-        color="soft"
-      >
-        {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
-      </ds-text>
-    </ds-space>
-    <ds-space
-      margin="small"
-      style="position: absolute; bottom: 44px;"
-    >
-      <!-- TODO: find better solution for rendering errors -->
+    <ds-space margin-bottom="small" />
+    <!-- Username, Image & Date of Post -->
+    <div>
       <no-ssr>
         <hc-user
           :user="post.author"
           :trunc="35"
+          :date-time="post.createdAt"
         />
       </no-ssr>
-    </ds-space>
+      <hc-ribbon :text="$t('post.name')" />
+    </div>
+    <ds-space margin-bottom="small" />
+    <!-- Post Title -->
+    <ds-heading
+      tag="h3"
+      no-margin
+    >
+      {{ post.title }}
+    </ds-heading>
+    <ds-space margin-bottom="small" />
+    <!-- Post Content Excerpt -->
+    <!-- eslint-disable vue/no-v-html -->
+    <!-- TODO: replace editor content with tiptap render view -->
+    <div
+      class="hc-editor-content"
+      v-html="excerpt"
+    />
+    <!-- eslint-enable vue/no-v-html -->
+    <!-- Footer o the Post -->
     <template slot="footer">
       <div style="display: inline-block; opacity: .5;">
-        <ds-icon
+        <!-- Categories -->
+        <hc-category
           v-for="category in post.categories"
           :key="category.id"
           v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
-          :name="category.icon"
-        />&nbsp;
+          :icon="category.icon"
+        />
       </div>
-      <div style="display: inline-block; float: right">
-        <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
-          <ds-icon name="bullhorn" />
-          <small>{{ post.shoutedCount }}</small>
-        </span>
-        &nbsp;
-        <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
-          <ds-icon name="comments" />
-          <small>{{ post.commentsCount }}</small>
-        </span>
-        <no-ssr>
+      <no-ssr>
+        <div style="display: inline-block; float: right">
+          <!-- Shouts Count -->
+          <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
+            <ds-icon name="bullhorn" />
+            <small>{{ post.shoutedCount }}</small>
+          </span>
+          &nbsp;
+          <!-- Comments Count -->
+          <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
+            <ds-icon name="comments" />
+            <small>{{ post.commentsCount }}</small>
+          </span>
+          <!-- Menu -->
           <content-menu
             resource-type="contribution"
             :resource="post"
             :is-owner="isAuthor"
           />
-        </no-ssr>
-      </div>
+        </div>
+      </no-ssr>
     </template>
   </ds-card>
 </template>
@@ -75,13 +78,17 @@
 <script>
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
-import { randomBytes } from 'crypto'
+import HcCategory from '~/components/Category'
+import HcRibbon from '~/components/Ribbon'
+// import { randomBytes } from 'crypto'
 import { mapGetters } from 'vuex'
 
 export default {
   name: 'HcPostCard',
   components: {
     HcUser,
+    HcCategory,
+    HcRibbon,
     ContentMenu
   },
   props: {
diff --git a/webapp/components/Ribbon/index.spec.js b/webapp/components/Ribbon/index.spec.js
new file mode 100644
index 000000000..8c6507e88
--- /dev/null
+++ b/webapp/components/Ribbon/index.spec.js
@@ -0,0 +1,37 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Ribbon from './index'
+
+const localVue = createLocalVue()
+
+describe('Ribbon', () => {
+  let text
+
+  let Wrapper = () => {
+    return shallowMount(Ribbon, {
+      localVue,
+      propsData: {
+        text
+      }
+    })
+  }
+
+  describe('given String for Text', () => {
+    beforeEach(() => {
+      text = 'Peter Pan'
+    })
+
+    it('shows Text', () => {
+      expect(Wrapper().text()).toContain('Peter Pan')
+    })
+  })
+
+  describe('given no String for Text', () => {
+    beforeEach(() => {
+      text = undefined
+    })
+
+    it('shows empty Text', () => {
+      expect(Wrapper().text()).toContain('')
+    })
+  })
+})
diff --git a/webapp/components/Ribbon/index.vue b/webapp/components/Ribbon/index.vue
new file mode 100644
index 000000000..783bf974f
--- /dev/null
+++ b/webapp/components/Ribbon/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="ribbon">
+    <small>{{ text }}</small>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HcRibbon',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.ribbon {
+  $card-shadow: 0px 12px 26px -4px rgba(0, 0, 0, 0.1);
+  //position: absolute;
+  position: relative;
+  right: -31px;
+  top: -31px;
+
+  font-size: 0.9em;
+  font-weight: bold;
+  padding: 6px 6px;
+  color: #fff;
+  background-color: $background-color-secondary-active;
+  float: right;
+  border-radius: 2px 0 0 2px;
+  box-shadow: $card-shadow;
+  z-index: 11;
+  // border:           1px solid #ccc;
+  &:before {
+    content: ' ';
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: 0;
+    bottom: -6px;
+    border-width: 3px 4px 3px 3px;
+    border-style: solid;
+    border-color: $background-color-secondary transparent transparent
+      $background-color-secondary;
+  }
+}
+</style>
diff --git a/webapp/components/User/index.vue b/webapp/components/User/index.vue
index 240c9dd6d..105a79f8c 100644
--- a/webapp/components/User/index.vue
+++ b/webapp/components/User/index.vue
@@ -55,7 +55,7 @@
             style="display: inline;"
           >
             <ds-text
-              align="right"
+              align="left"
               size="small"
               color="soft"
             >
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 96f87cd9d..e45bd9cba 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -135,6 +135,14 @@
     "takeAction": {
       "name": "Aktiv werden"
     },
+    "delete": {
+      "submit": "Löschen",
+      "cancel": "Abbrechen",
+      "success": "Beitrag erfolgreich gelöscht",
+      "title": "Beitrag löschen",
+      "type": "Beitrag",
+      "message": "Möchtest Du wirklich den Beitrag \"<b>{name}</b>\" löschen?"
+    },
     "comment": {
       "submit": "Kommentiere",
       "submitted": "Kommentar Gesendet"
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 87538eb6d..ad04f8421 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -70,30 +70,6 @@
         :is-shouted="post.shoutedByCurrentUser"
         :post-id="post.id"
       />
-      <!-- Categories -->
-      <ds-icon
-        v-for="category in post.categories"
-        :key="category.id"
-        v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
-        :name="category.icon"
-        size="large"
-      />&nbsp;
-      <ds-space margin-bottom="small" />
-      <!-- Tags -->
-      <template v-if="post.tags && post.tags.length">
-        <ds-space margin="xx-small" />
-        <div class="tags">
-          <ds-icon name="tags" />
-          <ds-tag
-            v-for="tag in post.tags"
-            :key="tag.id"
-          >
-            <ds-icon name="tag" />
-            {{ tag.name }}
-          </ds-tag>
-        </div>
-      </template>
-      <ds-space margin="small" />
       <!-- Comments -->
       <ds-section slot="footer">
         <hc-comment-list :post="post" />