diff --git a/webapp/components/features/ReportList/ReportList.vue b/webapp/components/features/ReportList/ReportList.vue
new file mode 100644
index 000000000..bf971c9bd
--- /dev/null
+++ b/webapp/components/features/ReportList/ReportList.vue
@@ -0,0 +1,109 @@
+<template>
+  <reports-table v-if="reports && reports.length" :reports="reports" @confirm="confirm" />
+  <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
+</template>
+<script>
+import ReportsTable from '~/components/features/ReportsTable/ReportsTable'
+import HcEmpty from '~/components/Empty/Empty'
+import { reportsListQuery, reviewMutation } from '~/graphql/Moderation.js'
+
+export default {
+  components: {
+    ReportsTable,
+    HcEmpty,
+  },
+  data() {
+    return {
+      reports: [],
+    }
+  },
+  methods: {
+    confirm(report) {
+      this.openModal(report)
+    },
+    async confirmCallback(resource) {
+      const { disabled: disable, id: resourceId } = resource
+      this.$apollo
+        .mutate({
+          mutation: reviewMutation(),
+          variables: { disable, resourceId, closed: true },
+        })
+        .then(() => {
+          this.$toast.success(this.$t('moderation.reports.DecisionSuccess'))
+          this.$apollo.queries.reportsList.refetch()
+        })
+        .catch(error => this.$toast.error(error.message))
+    },
+    openModal(report) {
+      const identStart =
+        'moderation.reports.decideModal.' +
+        report.resource.__typename +
+        '.' +
+        (report.resource.disabled ? 'disable' : 'enable')
+      this.$store.commit('modal/SET_OPEN', {
+        name: 'confirm',
+        data: {
+          type: report.resource.__typename,
+          resource: report.resource,
+          modalData: {
+            titleIdent: identStart + '.title',
+            messageIdent: identStart + '.message',
+            messageParams: {
+              name:
+                report.resource.__typename === 'User'
+                  ? report.resource.name
+                  : report.resource.__typename === 'Post'
+                  ? this.$filters.truncate(report.resource.title, 30)
+                  : report.resource.__typename === 'Comment'
+                  ? this.$filters.truncate(
+                      this.$filters.removeHtml(report.resource.contentExcerpt),
+                      30,
+                    )
+                  : '',
+            },
+            buttons: {
+              confirm: {
+                danger: true,
+                icon: report.resource.disabled ? 'eye-slash' : 'eye',
+                textIdent: 'moderation.reports.decideModal.submit',
+                callback: () => {
+                  this.confirmCallback(report.resource)
+                },
+              },
+              cancel: {
+                icon: 'close',
+                textIdent: 'moderation.reports.decideModal.cancel',
+                callback: () => {},
+              },
+            },
+          },
+        },
+      })
+    },
+  },
+  apollo: {
+    reportsList: {
+      query: reportsListQuery(),
+      update({ reports }) {
+        this.reports = reports
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.decision {
+  color: $color-secondary;
+}
+.no-decision {
+  color: $color-warning;
+}
+.ban {
+  color: $color-danger;
+}
+.no-ban {
+  color: $color-success;
+}
+</style>
diff --git a/webapp/components/features/ReportsTable/ReportsTable.vue b/webapp/components/features/ReportsTable/ReportsTable.vue
new file mode 100644
index 000000000..5b62f024c
--- /dev/null
+++ b/webapp/components/features/ReportsTable/ReportsTable.vue
@@ -0,0 +1,210 @@
+<template>
+  <table class="ds-table ds-table-condensed ds-table-bordered" cellspacing="0" cellpadding="0">
+    <colgroup><col width="" /></colgroup>
+    <template v-for="report in reports">
+      <thead
+        :class="[
+          report.closed ? 'decision' : 'no-decision',
+          'ds-table-col',
+          'ds-table-head-col',
+          'ds-table-head-col-border',
+        ]"
+        :key="'thead-' + report.resource.id"
+      >
+        <tr valign="top">
+          <th>
+            {{ $t('moderation.reports.typeRowHeadline') }}
+          </th>
+          <th>
+            {{ $t('moderation.reports.contentRowHeadline') }}
+          </th>
+          <th>
+            {{ $t('moderation.reports.authorRowHeadline') }}
+          </th>
+          <th>
+            {{ $t('moderation.reports.decisionRowHeadline') }}
+          </th>
+        </tr>
+      </thead>
+      <tbody :key="'tbody-' + report.resource.id">
+        <tr valign="top">
+          <td class="ds-table-col ds-table-head-col ds-table-head-col-border">
+            <!-- Icon -->
+            <ds-text color="soft">
+              <ds-icon
+                v-if="report.resource.__typename === 'Post'"
+                v-tooltip="{ report: $t('report.contribution.type'), placement: 'right' }"
+                name="bookmark"
+              />
+              <ds-icon
+                v-else-if="report.resource.__typename === 'Comment'"
+                v-tooltip="{ report: $t('report.comment.type'), placement: 'right' }"
+                name="comments"
+              />
+              <ds-icon
+                v-else-if="report.resource.__typename === 'User'"
+                v-tooltip="{ report: $t('report.user.type'), placement: 'right' }"
+                name="user"
+              />
+              <ds-icon v-if="report.resource.disabled" name="eye-slash" class="ban" />
+              <ds-icon v-else name="eye" class="no-ban" />
+            </ds-text>
+          </td>
+          <td class="ds-table-col ds-table-head-col-border">
+            <!-- reported user or other resource -->
+            <div
+              v-if="
+                report.resource.__typename === 'Post' || report.resource.__typename === 'Comment'
+              "
+            >
+              <nuxt-link
+                :to="{
+                  name: 'post-id-slug',
+                  params: {
+                    id: report.resource.id,
+                    slug:
+                      report.resource.__typename === 'Post'
+                        ? report.resource.slug
+                        : report.resource.post.slug,
+                  },
+                  hash:
+                    report.resource.__typename === 'Comment'
+                      ? `#commentId-${report.resource.id}`
+                      : undefined,
+                }"
+              >
+                <b v-if="report.resource.__typename === 'Post'">
+                  {{ report.resource.title | truncate(100) }}
+                </b>
+                <b v-else>
+                  {{ report.resource.contentExcerpt | removeHtml | truncate(100) }}
+                </b>
+              </nuxt-link>
+            </div>
+            <div v-else>
+              <client-only>
+                <hc-user :user="report.resource" :showAvatar="false" :trunc="30" />
+              </client-only>
+            </div>
+            <!-- <div v-if="report.reviewed">
+              <ds-space margin="x-large"/>
+              <ds-flex gutter="small">
+                <ds-flex-item width="25%">
+                  <b>{{ $t('moderation.reports.previousDecision') }}</b>
+                </ds-flex-item>
+                <ds-flex-item>
+                  <div>
+                    <span v-if="report.resource.disabled">
+                      <ds-icon name="eye-slash" class="ban" />
+                      {{ $t('moderation.reports.disabledAt') }}
+                    </span>
+                    <span v-else>
+                      <ds-icon name="eye" class="no-ban" />
+                      {{ $t('moderation.reports.enabledAt') }}
+                    </span>
+                    <ds-text size="small" color="soft">
+                      <ds-icon name="clock" />
+                      <client-only>
+                        <hc-relative-date-time :date-time="report.updatedAt" />
+                      </client-only>
+                    </ds-text>
+                  </div>
+                </ds-flex-item>
+              </ds-flex>
+              <ds-space margin-bottom="x-small" />
+            </div> -->
+          </td>
+          <!-- contentBelongsToUser -->
+          <td class="ds-table-col ds-table-head-col-border">
+            <client-only>
+              <hc-user
+                v-if="report.resource.__typename !== 'User'"
+                :user="report.resource.author"
+                :showAvatar="false"
+                :trunc="30"
+              />
+              <span v-else>—</span>
+            </client-only>
+          </td>
+          <td class="ds-table-col ds-table-head-col-border">
+            <!-- latestClaim.closed -->
+            <b v-if="report.closed">
+              {{ $t('moderation.reports.decided') }}
+            </b>
+            <ds-button
+              v-else
+              danger
+              class="confirm"
+              :icon="report.resource.disabled ? 'eye-slash' : 'eye'"
+              @click="confirm(report)"
+            >
+              {{ $t('moderation.reports.decideButton') }}
+            </ds-button>
+            <!-- reviewed -->
+            <div v-if="report.reviewed">
+              <br />
+              <div v-if="report.resource.disabled">
+                <ds-icon name="eye-slash" class="ban" />
+                {{ $t('moderation.reports.disabledBy') }}
+              </div>
+              <div v-else>
+                <ds-icon name="eye" class="no-ban" />
+                {{ $t('moderation.reports.enabledBy') }}
+              </div>
+              <client-only>
+                <hc-user
+                  :user="report.reviewed[0].moderator"
+                  :showAvatar="false"
+                  :trunc="30"
+                  :date-time="report.updatedAt"
+                  positionDatetime="below"
+                />
+              </client-only>
+            </div>
+            <div v-else>
+              <br />
+              <div v-if="report.resource.disabled">
+                <ds-icon name="eye-slash" class="ban" />
+                {{ $t('moderation.reports.disabled') }}
+              </div>
+              <div v-else>
+                <ds-icon name="eye" class="no-ban" />
+                {{ $t('moderation.reports.enabled') }}
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td class="ds-table-col ds-table-head-col-border"></td>
+          <td class="ds-table-col ds-table-head-col-border" colspan="3">
+            <div>
+              <ds-space margin-bottom="base" />
+              <filed-table :filed="report.filed" />
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </template>
+  </table>
+</template>
+<script>
+// import HcRelativeDateTime from '~/components/RelativeDateTime'
+import HcUser from '~/components/User/User'
+import FiledTable from '~/components/generic/FiledTable/FiledTable'
+
+export default {
+  components: {
+    // HcRelativeDateTime,
+    HcUser,
+    FiledTable,
+  },
+  props: {
+    reports: { type: Array, default: () => [] },
+  },
+  methods: {
+    confirm(report) {
+      this.$emit('confirm', report)
+    },
+  },
+}
+</script>
diff --git a/webapp/components/generic/FiledTable/FiledTable.vue b/webapp/components/generic/FiledTable/FiledTable.vue
new file mode 100644
index 000000000..cc33ae505
--- /dev/null
+++ b/webapp/components/generic/FiledTable/FiledTable.vue
@@ -0,0 +1,44 @@
+<template>
+  <ds-table :data="filed" :fields="reportFields" condensed>
+    <template #submitter="scope">
+      <ds-space margin-bottom="x-large">
+        <client-only>
+          <hc-user
+            :user="scope.row.submitter"
+            :showAvatar="false"
+            :trunc="30"
+            :date-time="scope.row.createdAt"
+            :positionDatetime="'below'"
+          />
+        </client-only>
+      </ds-space>
+    </template>
+    <template #reasonCategory="scope">
+      {{ $t('report.reason.category.options.' + scope.row.reasonCategory) }}
+    </template>
+    <template #reasonDescription="scope">
+      {{ scope.row.reasonDescription.length ? scope.row.reasonDescription : '—' }}
+    </template>
+  </ds-table>
+</template>
+<script>
+import HcUser from '~/components/User/User'
+
+export default {
+  components: {
+    HcUser,
+  },
+  props: {
+    filed: { type: Array, default: () => [] },
+  },
+  computed: {
+    reportFields() {
+      return {
+        submitter: this.$t('moderation.reports.submitter'),
+        reasonCategory: this.$t('moderation.reports.reasonCategory'),
+        reasonDescription: this.$t('moderation.reports.reasonDescription'),
+      }
+    },
+  },
+}
+</script>
diff --git a/webapp/graphql/Moderation.js b/webapp/graphql/Moderation.js
index 0b15265d8..da2054d66 100644
--- a/webapp/graphql/Moderation.js
+++ b/webapp/graphql/Moderation.js
@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-export const reportListQuery = () => {
+export const reportsListQuery = () => {
   // no limit for the moment like before: "reports(first: 20, orderBy: createdAt_desc)"
   return gql`
     query {
@@ -113,6 +113,7 @@ export const reviewMutation = () => {
     mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
       review(resourceId: $resourceId, disable: $disable, closed: $closed) {
         disable
+        closed
       }
     }
   `
diff --git a/webapp/pages/moderation/index.vue b/webapp/pages/moderation/index.vue
index c5632f999..bb08a15a1 100644
--- a/webapp/pages/moderation/index.vue
+++ b/webapp/pages/moderation/index.vue
@@ -1,329 +1,16 @@
 <template>
   <ds-card space="small">
     <ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading>
-    <table
-      v-if="reports && reports.length"
-      class="ds-table ds-table-condensed ds-table-bordered"
-      cellspacing="0"
-      cellpadding="0"
-    >
-      <colgroup><col width="" /></colgroup>
-      <template v-for="report in reports">
-        <thead
-          :class="[
-            report.closed ? 'decision' : 'no-decision',
-            'ds-table-col',
-            'ds-table-head-col',
-            'ds-table-head-col-border',
-          ]"
-          :key="'thead-' + report.resource.id"
-        >
-          <tr valign="top">
-            <th>
-              {{ $t('moderation.reports.typeRowHeadline') }}
-            </th>
-            <th>
-              {{ $t('moderation.reports.contentRowHeadline') }}
-            </th>
-            <th>
-              {{ $t('moderation.reports.authorRowHeadline') }}
-            </th>
-            <th>
-              {{ $t('moderation.reports.decisionRowHeadline') }}
-            </th>
-          </tr>
-        </thead>
-        <tbody :key="'tbody-' + report.resource.id">
-          <tr valign="top">
-            <td class="ds-table-col ds-table-head-col ds-table-head-col-border">
-              <!-- Icon -->
-              <ds-text color="soft">
-                <ds-icon
-                  v-if="report.resource.__typename === 'Post'"
-                  v-tooltip="{ report: $t('report.contribution.type'), placement: 'right' }"
-                  name="bookmark"
-                />
-                <ds-icon
-                  v-else-if="report.resource.__typename === 'Comment'"
-                  v-tooltip="{ report: $t('report.comment.type'), placement: 'right' }"
-                  name="comments"
-                />
-                <ds-icon
-                  v-else-if="report.resource.__typename === 'User'"
-                  v-tooltip="{ report: $t('report.user.type'), placement: 'right' }"
-                  name="user"
-                />
-                <ds-icon v-if="report.resource.disabled" name="eye-slash" class="ban" />
-                <ds-icon v-else name="eye" class="no-ban" />
-              </ds-text>
-            </td>
-            <td class="ds-table-col ds-table-head-col-border">
-              <!-- reported user or other resource -->
-              <div
-                v-if="
-                  report.resource.__typename === 'Post' || report.resource.__typename === 'Comment'
-                "
-              >
-                <nuxt-link
-                  :to="{
-                    name: 'post-id-slug',
-                    params: {
-                      id: report.resource.id,
-                      slug:
-                        report.resource.__typename === 'Post'
-                          ? report.resource.slug
-                          : report.resource.post.slug,
-                    },
-                    hash:
-                      report.resource.__typename === 'Comment'
-                        ? `#commentId-${report.resource.id}`
-                        : undefined,
-                  }"
-                >
-                  <b v-if="report.resource.__typename === 'Post'">
-                    {{ report.resource.title | truncate(100) }}
-                  </b>
-                  <b v-else>
-                    {{ report.resource.contentExcerpt | removeHtml | truncate(100) }}
-                  </b>
-                </nuxt-link>
-              </div>
-              <div v-else>
-                <hc-user :user="report.resource" :showAvatar="false" :trunc="30" />
-              </div>
-            </td>
-            <!-- contentBelongsToUser -->
-            <td class="ds-table-col ds-table-head-col-border">
-              <hc-user
-                v-if="report.resource.__typename !== 'User'"
-                :user="report.resource.author"
-                :showAvatar="false"
-                :trunc="30"
-              />
-              <span v-else>—</span>
-            </td>
-            <td class="ds-table-col ds-table-head-col-border">
-              <!-- latestClaim.closed -->
-              <b v-if="report.closed">
-                {{ $t('moderation.reports.decided') }}
-              </b>
-              <ds-button
-                v-else
-                danger
-                class="confirm"
-                :icon="report.resource.disabled ? 'eye-slash' : 'eye'"
-                @click="confirm(report)"
-              >
-                {{ $t('moderation.reports.decideButton') }}
-              </ds-button>
-              <!-- reviewed -->
-              <div v-if="report.reviewed">
-                <br />
-                <div v-if="report.resource.disabled">
-                  <ds-icon name="eye-slash" class="ban" />
-                  {{ $t('moderation.reports.disabledBy') }}
-                </div>
-                <div v-else>
-                  <ds-icon name="eye" class="no-ban" />
-                  {{ $t('moderation.reports.enabledBy') }}
-                </div>
-                <hc-user
-                  :user="report.reviewed[0].moderator"
-                  :showAvatar="false"
-                  :trunc="30"
-                  :date-time="report.updatedAt"
-                  positionDatetime="below"
-                />
-              </div>
-              <div v-else>
-                <br />
-                <div v-if="report.resource.disabled">
-                  <ds-icon name="eye-slash" class="ban" />
-                  {{ $t('moderation.reports.disabled') }}
-                </div>
-                <div v-else>
-                  <ds-icon name="eye" class="no-ban" />
-                  {{ $t('moderation.reports.enabled') }}
-                </div>
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td class="ds-table-col ds-table-head-col-border"></td>
-            <td class="ds-table-col ds-table-head-col-border" colspan="3">
-              <template>
-                <div :key="report.id">
-                  <!-- previousDecision -->
-                  <div v-if="report.reviewed">
-                    <ds-flex gutter="small">
-                      <ds-flex-item width="25%">
-                        <b>{{ $t('moderation.reports.previousDecision') }}</b>
-                      </ds-flex-item>
-                      <ds-flex-item>
-                        <div>
-                          <span v-if="report.resource.disabled">
-                            <ds-icon name="eye-slash" class="ban" />
-                            {{ $t('moderation.reports.disabledAt') }}
-                          </span>
-                          <span v-else>
-                            <ds-icon name="eye" class="no-ban" />
-                            {{ $t('moderation.reports.enabledAt') }}
-                          </span>
-                          <ds-text size="small" color="soft">
-                            <ds-icon name="clock" />
-                            <client-only>
-                              <hc-relative-date-time :date-time="report.updatedAt" />
-                            </client-only>
-                          </ds-text>
-                        </div>
-                      </ds-flex-item>
-                    </ds-flex>
-                    <ds-space margin-bottom="x-small" />
-                  </div>
-                  <ds-table :data="report.filed" :fields="reportFields" condensed>
-                    <!-- submitter -->
-                    <template slot="submitter" slot-scope="scope">
-                      <hc-user
-                        :user="scope.row.submitter"
-                        :showAvatar="false"
-                        :trunc="30"
-                        :date-time="scope.row.createdAt"
-                        :positionDatetime="'below'"
-                      />
-                    </template>
-                    <!-- reasonCategory -->
-                    <template slot="reasonCategory" slot-scope="scope">
-                      {{ $t('report.reason.category.options.' + scope.row.reasonCategory) }}
-                    </template>
-                    <!-- reasonDescription -->
-                    <template slot="reasonDescription" slot-scope="scope">
-                      {{ scope.row.reasonDescription.length ? scope.row.reasonDescription : '—' }}
-                    </template>
-                  </ds-table>
-                  <ds-space margin-bottom="base" />
-                </div>
-              </template>
-            </td>
-          </tr>
-        </tbody>
-      </template>
-    </table>
-    <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
+    <report-list />
   </ds-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
-import HcRelativeDateTime from '~/components/RelativeDateTime'
-import HcUser from '~/components/User/User'
-import { reportListQuery, reviewMutation } from '~/graphql/Moderation.js'
+import ReportList from '~/components/features/ReportList/ReportList'
 
 export default {
   components: {
-    HcEmpty,
-    HcRelativeDateTime,
-    HcUser,
-  },
-  data() {
-    return {
-      reports: [],
-    }
-  },
-  computed: {
-    reportFields() {
-      return {
-        submitter: this.$t('moderation.reports.submitter'),
-        reasonCategory: this.$t('moderation.reports.reasonCategory'),
-        reasonDescription: this.$t('moderation.reports.reasonDescription'),
-      }
-    },
-  },
-  methods: {
-    confirm(report) {
-      this.openModal(report)
-    },
-    async confirmCallback(resourceId) {
-      this.$apollo
-        .mutate({
-          mutation: reviewMutation(),
-          variables: { resourceId, closed: true },
-        })
-        .then(() => {
-          this.$toast.success(this.$t('moderation.reports.DecisionSuccess'))
-          this.$apollo.queries.reports.refetch()
-        })
-        .catch(error => this.$toast.error(error.message))
-    },
-    openModal(report) {
-      const identStart =
-        'moderation.reports.decideModal.' +
-        report.resource.__typename +
-        '.' +
-        (report.resource.disabled ? 'disable' : 'enable')
-      this.$store.commit('modal/SET_OPEN', {
-        name: 'confirm',
-        data: {
-          type: report.resource.__typename,
-          resource: report.resource,
-          modalData: {
-            titleIdent: identStart + '.title',
-            messageIdent: identStart + '.message',
-            messageParams: {
-              name:
-                report.resource.__typename === 'User'
-                  ? report.resource.name
-                  : report.resource.__typename === 'Post'
-                  ? this.$filters.truncate(report.resource.title, 30)
-                  : report.resource.__typename === 'Comment'
-                  ? this.$filters.truncate(
-                      this.$filters.removeHtml(report.resource.contentExcerpt),
-                      30,
-                    )
-                  : '',
-            },
-            buttons: {
-              confirm: {
-                danger: true,
-                icon: report.resource.disabled ? 'eye-slash' : 'eye',
-                textIdent: 'moderation.reports.decideModal.submit',
-                callback: () => {
-                  this.confirmCallback(report.resource.id)
-                },
-              },
-              cancel: {
-                icon: 'close',
-                textIdent: 'moderation.reports.decideModal.cancel',
-                callback: () => {},
-              },
-            },
-          },
-        },
-      })
-    },
-  },
-  apollo: {
-    reportsList: {
-      query: reportListQuery(),
-      update({ reports }) {
-        this.reports = reports
-      },
-      fetchPolicy: 'cache-and-network',
-    },
+    ReportList,
   },
 }
 </script>
-
-<style lang="scss">
-.decision {
-  color: $color-secondary;
-}
-.no-decision {
-  color: $color-warning;
-}
-.ban {
-  color: $color-danger;
-}
-.no-ban {
-  color: $color-success;
-}
-</style>