diff --git a/package.json b/package.json
index 36d058b6..9848fecd 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "jszip": "3.1.5",
     "lodash": "^4.17.11",
     "lodash.debounce": "^4.0.8",
+    "moment": "^2.24.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "screenfull": "4.0.0",
diff --git a/src/api/reports.js b/src/api/reports.js
index c4d6e84a..e9687a01 100644
--- a/src/api/reports.js
+++ b/src/api/reports.js
@@ -1,14 +1,22 @@
-import { reports } from './reportsData'
+import request from '@/utils/request'
+import { getToken } from '@/utils/auth'
+import { baseName } from './utils'
 
-export function fetchReports(index, size) {
-  const response = reports.slice(index, index + size)
-  return response
+export async function fetchReports(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/reports`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
 }
 
-export function deleteNote(reportId, noteId) {
-  const updatedNotes = reports
-    .find(report => report.id === reportId)
-    .notes
-    .filter(note => note.id !== noteId)
-  return updatedNotes
-}
+// export function deleteNote(reportId, noteId) {
+//   const updatedNotes = reports
+//     .find(report => report.id === reportId)
+//     .notes
+//     .filter(note => note.id !== noteId)
+//   return updatedNotes
+// }
+
+const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}
diff --git a/src/store/modules/reports.js b/src/store/modules/reports.js
index f6d9fc16..01d48027 100644
--- a/src/store/modules/reports.js
+++ b/src/store/modules/reports.js
@@ -1,4 +1,4 @@
-import { fetchReports, deleteNote } from '@/api/reports'
+import { fetchReports } from '@/api/reports'
 
 const reports = {
   state: {
@@ -22,27 +22,27 @@ const reports = {
     }
   },
   actions: {
-    async FetchReports({ commit, state, getters }) {
+    async FetchReports({ commit, getters }) {
       commit('SET_LOADING', true)
-      const response = fetchReports(state.indexOfLastShownReport, state.size)
+      const response = await fetchReports(getters.authHost, getters.token)
 
-      commit('SET_REPORTS', response)
+      commit('SET_REPORTS', response.data.reports)
       commit('SET_INDEX')
       commit('SET_LOADING', false)
-    },
-    async AddNote({ commit, state, getters }, { reportId, note }) {
-      const report = state.fetchedReports.find(report => report.id === reportId)
-      report.notes = [...report.notes, note]
-      const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
-      commit('SET_REPORT', { reportIndex, report })
-    },
-    async DeleteNote({ commit, state }, { reportId, noteId }) {
-      const response = deleteNote(reportId, noteId)
-      const report = state.fetchedReports.find(report => report.id === reportId)
-      report.notes = response
-      const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
-      commit('SET_REPORT', { reportIndex, report })
     }
+    // async AddNote({ commit, state, getters }, { reportId, note }) {
+    //   const report = state.fetchedReports.find(report => report.id === reportId)
+    //   report.notes = [...report.notes, note]
+    //   const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
+    //   commit('SET_REPORT', { reportIndex, report })
+    // },
+    // async DeleteNote({ commit, state }, { reportId, noteId }) {
+    //   const response = deleteNote(reportId, noteId)
+    //   const report = state.fetchedReports.find(report => report.id === reportId)
+    //   report.notes = response
+    //   const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
+    //   commit('SET_REPORT', { reportIndex, report })
+    // }
   }
 }
 
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 1321aa65..c5278256 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -72,9 +72,6 @@ const users = {
       commit('SWAP_USER', updatedUser)
     },
     async FetchUsers({ commit, state, getters }, { page }) {
-      const filters = Object.keys(state.filters).filter(filter => state.filters[filter]).join()
-      const response = await fetchUsers(filters, getters.authHost, getters.token, page)
-
       commit('SET_LOADING', true)
 
       const filters = Object.keys(state.filters).filter(filter => state.filters[filter]).join()
diff --git a/src/views/reports/components/TimelineItem.vue b/src/views/reports/components/TimelineItem.vue
index 60ab7aa9..d6a65bb1 100644
--- a/src/views/reports/components/TimelineItem.vue
+++ b/src/views/reports/components/TimelineItem.vue
@@ -1,19 +1,23 @@
 <template>
-  <el-timeline-item :timestamp="item.timestamp" placement="top" class="timeline-item-container">
+  <el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container">
     <el-card>
       <div class="header-container">
-        <h4>{{ item.header }}</h4>
-        <el-button plain size="small" @click="toggleNoteInput">{{ $t('reports.reply') }}</el-button>
+        <h4>Report on {{ report.account.acct }}</h4>
+        <div>
+          <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
+          <el-button plain size="small" @click="toggleNoteInput">{{ $t('reports.reply') }}</el-button>
+        </div>
       </div>
-      <p>{{ item.content }}</p>
+      <h5 class="id">#{{ report.id }}</h5>
+      <p>{{ report.content }}</p>
       <el-collapse v-model="showNotes">
         <el-collapse-item :title="$t('reports.showNotes')" name="showNotes">
-          <div v-if="item.notes.length > 0">
-            <div v-for="note in item.notes" :key="note.id">
+          <div v-if="report.statuses.length > 0">
+            <div v-for="note in report.statuses" :key="note.id">
               <el-card :body-style="{ padding: '6px 14px 0 14px' }" class="note">
                 <div class="header-container">
                   <h4>{{ $t('reports.from') }} {{ note.author }}</h4>
-                  <i class="el-icon-close" @click="deleteNote(item.id, note.id)"/>
+                  <i class="el-icon-close" @click="deleteNote(report.id, note.id)"/>
                 </div>
                 <p class="timestamp">{{ note.timestamp }}</p>
                 <p>{{ note.text }}</p>
@@ -30,7 +34,7 @@
             <i class="el-icon-close" @click="toggleNoteInput"/>
           </div>
           <el-input v-model="note" :rows="2" type="textarea" autofocus/>
-          <el-button class="submit-button" plain size="small" @click="addNewNote(item.id)">{{ $t('reports.submit') }}</el-button>
+          <el-button class="submit-button" plain size="small" @click="addNewNote(report.id)">{{ $t('reports.submit') }}</el-button>
         </div>
       </el-collapse>
     </el-card>
@@ -39,11 +43,12 @@
 
 <script>
 import i18n from '@/lang'
+import * as moment from 'moment'
 
 export default {
   name: 'TimelineItem',
   props: {
-    item: {
+    report: {
       type: Object,
       required: true
     }
@@ -56,9 +61,6 @@ export default {
     }
   },
   methods: {
-    toggleNoteInput() {
-      this.$data.showNewNoteInput = !this.$data.showNewNoteInput
-    },
     addNewNote(reportId) {
       if (this.$data.note.length < 2) {
         this.$message('Note must contain at least 2 characters')
@@ -88,6 +90,25 @@ export default {
           message: i18n.t('reports.deleteCanceled')
         })
       })
+    },
+    capitalizeFirstLetter(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1)
+    },
+    getStateType(state) {
+      switch (state) {
+        case 'closed':
+          return 'info'
+        case 'resolved':
+          return 'success'
+        default:
+          return ''
+      }
+    },
+    parseTimestamp(timestamp) {
+      return moment(timestamp).format('YYYY-MM-DD HH:mm')
+    },
+    toggleNoteInput() {
+      this.$data.showNewNoteInput = !this.$data.showNewNoteInput
     }
   }
 }
@@ -122,6 +143,10 @@ export default {
     justify-content: space-between;
     align-items: baseline;
   }
+  .id {
+    color: gray;
+    margin: 0;
+  }
   .new-note {
     p {
       font-size: 13px;
diff --git a/src/views/reports/index.vue b/src/views/reports/index.vue
index 322f9b54..f02d7fc7 100644
--- a/src/views/reports/index.vue
+++ b/src/views/reports/index.vue
@@ -3,7 +3,7 @@
     <h1>{{ $t('reports.reports') }}</h1>
     <div class="block">
       <el-timeline class="timeline">
-        <timeline-item v-loading="loading" v-for="item in reports" :item="item" :key="item.id"/>
+        <timeline-item v-loading="loading" v-for="report in reports" :report="report" :key="report.id"/>
       </el-timeline>
     </div>
   </div>
diff --git a/yarn.lock b/yarn.lock
index e6bf827d..49ed8fee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6645,6 +6645,11 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@
   dependencies:
     minimist "0.0.8"
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"