diff --git a/webapp/components/features/ReportRow/ReportRow.spec.js b/webapp/components/features/ReportRow/ReportRow.spec.js
new file mode 100644
index 000000000..ff0d51f5f
--- /dev/null
+++ b/webapp/components/features/ReportRow/ReportRow.spec.js
@@ -0,0 +1,187 @@
+import { config, mount, RouterLinkStub } from '@vue/test-utils'
+import Vuex from 'vuex'
+import ReportRow from './ReportRow.vue'
+import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon'
+import { reports } from '~/components/features/ReportsList/ReportsList.story.js'
+
+const localVue = global.localVue
+
+config.stubs['client-only'] = '<span><slot /></span>'
+
+describe('ReportRow', () => {
+  let propsData, mocks, stubs, getters, wrapper
+
+  beforeEach(() => {
+    propsData = {}
+    mocks = {
+      $t: jest.fn(string => string),
+    }
+    stubs = {
+      NuxtLink: RouterLinkStub,
+    }
+    getters = {
+      'auth/user': () => {
+        return { slug: 'awesome-user' }
+      },
+      'auth/isModerator': () => true,
+    }
+  })
+
+  describe('given a report ', () => {
+    const Wrapper = () => {
+      const store = new Vuex.Store({
+        getters,
+      })
+      return mount(ReportRow, { propsData, mocks, stubs, localVue, store })
+    }
+
+    describe('has not been closed', () => {
+      let confirmButton
+      beforeEach(() => {
+        propsData = { ...propsData, report: reports[1] }
+        wrapper = Wrapper()
+        confirmButton = wrapper.find('.ds-button-danger')
+      })
+
+      it('renders a confirm button', () => {
+        expect(confirmButton.exists()).toBe(true)
+      })
+
+      it('emits confirm event', () => {
+        confirmButton.trigger('click')
+        expect(wrapper.emitted('confirm-report')).toHaveLength(1)
+      })
+    })
+
+    describe('has been closed', () => {
+      beforeEach(() => {
+        propsData = { ...propsData, report: reports[2] }
+        wrapper = Wrapper()
+      })
+
+      it('renders a decided text', () => {
+        const decidedTitle = wrapper
+          .findAll('.title')
+          .filter(title => title.text() === 'moderation.reports.decided')
+        expect(decidedTitle.exists()).toBe(true)
+      })
+    })
+
+    describe('has not been reviewed', () => {
+      beforeEach(() => {
+        propsData = { ...propsData, report: reports[1] }
+        wrapper = Wrapper()
+      })
+
+      it('renders its current status', () => {
+        expect(wrapper.find('.status-line').text()).toEqual('moderation.reports.enabled')
+      })
+    })
+
+    describe('has been reviewed', () => {
+      describe('and disabled', () => {
+        beforeEach(() => {
+          propsData = { ...propsData, report: reports[2] }
+          wrapper = Wrapper()
+        })
+        it('renders the disabled icon', () => {
+          expect(
+            wrapper
+              .find('.status-line')
+              .find(BaseIcon)
+              .props().name,
+          ).toEqual('eye-slash')
+        })
+
+        it('renders its current status', () => {
+          expect(wrapper.find('.status-line').text()).toEqual('moderation.reports.disabledBy')
+        })
+      })
+
+      describe('and enabled', () => {
+        beforeEach(() => {
+          propsData = { ...propsData, report: reports[0] }
+          wrapper = Wrapper()
+        })
+        it('renders the enabled icon', () => {
+          expect(
+            wrapper
+              .find('.status-line')
+              .find(BaseIcon)
+              .props().name,
+          ).toEqual('eye')
+        })
+
+        it('renders its current status', () => {
+          expect(wrapper.find('.status-line').text()).toEqual('moderation.reports.enabledBy')
+        })
+
+        it('renders the moderator who reviewed the resource', () => {
+          const username = wrapper.find('[data-test="report-reviewer"]')
+          expect(username.text()).toContain('@moderator')
+        })
+      })
+    })
+
+    describe('concerns a Comment', () => {
+      beforeEach(() => {
+        propsData = { ...propsData, report: reports[0] }
+        wrapper = Wrapper()
+      })
+
+      it('renders a comments icon', () => {
+        const commentsIcon = wrapper.find(BaseIcon).props().name
+        expect(commentsIcon).toEqual('comments')
+      })
+
+      it('renders a link to the post, with the comment contentExcerpt', () => {
+        const postLink = wrapper.find('.title')
+        expect(postLink.text()).toEqual('@peter-lustig Lorem ipsum dolor sit amet, …')
+      })
+
+      it('renders the author', () => {
+        const userSlug = wrapper.find('[data-test="report-author"]')
+        expect(userSlug.text()).toContain('@louie')
+      })
+    })
+
+    describe('concerns a Post', () => {
+      beforeEach(() => {
+        propsData = { ...propsData, report: reports[1] }
+        wrapper = Wrapper()
+      })
+
+      it('renders a bookmark icon', () => {
+        const postIcon = wrapper.find(BaseIcon).props().name
+        expect(postIcon).toEqual('bookmark')
+      })
+
+      it('renders a link to the post', () => {
+        const postLink = wrapper.find('.title')
+        expect(postLink.text()).toEqual("I'm a bigoted post!")
+      })
+
+      it('renders the author', () => {
+        const username = wrapper.find('[data-test="report-author"]')
+        expect(username.text()).toContain('@dagobert')
+      })
+    })
+
+    describe('concerns a User', () => {
+      beforeEach(() => {
+        propsData = { ...propsData, report: reports[2] }
+        wrapper = Wrapper()
+      })
+
+      it('renders a user icon', () => {
+        const userIcon = wrapper.find(BaseIcon).props().name
+        expect(userIcon).toEqual('user')
+      })
+
+      it('renders a link to the user profile', () => {
+        const userLink = wrapper.find('[data-test="report-content"]')
+        expect(userLink.text()).toContain('@abusive-user')
+      })
+    })
+  })
+})
diff --git a/webapp/components/features/ReportRow/ReportRow.vue b/webapp/components/features/ReportRow/ReportRow.vue
new file mode 100644
index 000000000..cc81ae018
--- /dev/null
+++ b/webapp/components/features/ReportRow/ReportRow.vue
@@ -0,0 +1,183 @@
+<template>
+  <tbody class="report-row">
+    <tr>
+      <!-- Icon Column -->
+      <td class="ds-table-col">
+        <base-icon :name="iconName" :title="iconLabel" />
+      </td>
+
+      <!-- Number of Filed Reports Column -->
+      <td class="ds-table-col">
+        <span class="user-count">
+          {{ $t('moderation.reports.numberOfUsers', { count: report.filed.length }) }}
+        </span>
+        <ds-button size="small" @click="showFiledReports = !showFiledReports">
+          {{ $t('moderation.reports.moreDetails') }}
+        </ds-button>
+      </td>
+
+      <!-- Content Column -->
+      <td class="ds-table-col" data-test="report-content">
+        <client-only v-if="isUser">
+          <hc-user :user="report.resource" :showAvatar="false" :trunc="30" />
+        </client-only>
+        <nuxt-link v-else class="title" :to="linkTarget">
+          {{ linkText | truncate(50) }}
+        </nuxt-link>
+      </td>
+
+      <!-- Author Column -->
+      <td class="ds-table-col" data-test="report-author">
+        <client-only v-if="!isUser">
+          <hc-user :user="report.resource.author" :showAvatar="false" :trunc="30" />
+        </client-only>
+        <span v-else>—</span>
+      </td>
+
+      <!-- Status Column -->
+      <td class="ds-table-col" data-test="report-reviewer">
+        <span class="status-line">
+          <base-icon :name="statusIconName" :class="isDisabled ? '--disabled' : '--enabled'" />
+          {{ statusText }}
+        </span>
+        <client-only v-if="report.reviewed">
+          <hc-user
+            :user="moderatorOfLatestReview"
+            :showAvatar="false"
+            :trunc="30"
+            :date-time="report.updatedAt"
+          />
+        </client-only>
+      </td>
+
+      <!-- Decision Column -->
+      <td class="ds-table-col">
+        <span v-if="report.closed" class="title">
+          {{ $t('moderation.reports.decided') }}
+        </span>
+        <ds-button
+          v-else
+          danger
+          data-test="confirm"
+          size="small"
+          :icon="statusIconName"
+          @click="$emit('confirm-report')"
+        >
+          {{ $t('moderation.reports.decideButton') }}
+        </ds-button>
+      </td>
+    </tr>
+
+    <tr class="row">
+      <td colspan="100%">
+        <filed-reports-table :filed="report.filed" v-if="showFiledReports" />
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<script>
+import FiledReportsTable from '~/components/features/FiledReportsTable/FiledReportsTable'
+import HcUser from '~/components/User/User'
+
+export default {
+  components: {
+    FiledReportsTable,
+    HcUser,
+  },
+  props: {
+    report: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showFiledReports: false,
+    }
+  },
+  computed: {
+    isPost() {
+      return this.report.resource.__typename === 'Post'
+    },
+    isComment() {
+      return this.report.resource.__typename === 'Comment'
+    },
+    isUser() {
+      return this.report.resource.__typename === 'User'
+    },
+    isDisabled() {
+      return this.report.resource.disabled
+    },
+    iconName() {
+      if (this.isPost) return 'bookmark'
+      else if (this.isComment) return 'comments'
+      else if (this.isUser) return 'user'
+      else return null
+    },
+    iconLabel() {
+      if (this.isPost) return this.$t('report.contribution.type')
+      else if (this.isComment) return this.$t('report.comment.type')
+      else if (this.isUser) return this.$t('report.user.type')
+      else return null
+    },
+    linkTarget() {
+      const { id, slug } = this.isComment ? this.report.resource.post : this.report.resource
+      return {
+        name: 'post-id-slug',
+        params: { id, slug },
+        hash: this.isComment ? `#commentId-${this.report.resource.id}` : '',
+      }
+    },
+    linkText() {
+      return (
+        this.report.resource.title || this.$filters.removeHtml(this.report.resource.contentExcerpt)
+      )
+    },
+    statusIconName() {
+      return this.isDisabled ? 'eye-slash' : 'eye'
+    },
+    statusText() {
+      if (!this.report.reviewed) return this.$t('moderation.reports.enabled')
+      else if (this.isDisabled) return this.$t('moderation.reports.disabledBy')
+      else return this.$t('moderation.reports.enabledBy')
+    },
+    moderatorOfLatestReview() {
+      return this.report.reviewed[0].moderator
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.report-row {
+  &:nth-child(2n + 1) {
+    background-color: $color-neutral-95;
+  }
+
+  .title {
+    font-weight: $font-weight-bold;
+  }
+
+  .status-line {
+    display: inline-flex;
+
+    > .base-icon {
+      margin-right: $space-xx-small;
+    }
+  }
+
+  .user-count {
+    display: block;
+    margin-bottom: $space-xx-small;
+  }
+
+  .--disabled {
+    color: $color-danger;
+  }
+
+  .--enabled {
+    color: $color-success;
+  }
+}
+</style>