diff --git a/src/pages/ListIncidents.vue b/src/pages/ListIncidents.vue
index 02a169f96..ca6de3c3e 100644
--- a/src/pages/ListIncidents.vue
+++ b/src/pages/ListIncidents.vue
@@ -1,60 +1,61 @@
 <template>
-    <div>
-        <h1>Incident Reports</h1>
-        <div v-if="isLoading">Loading...</div>
-        <div v-else-if="incidentReports.length">
-            <div v-for="report in incidentReports" :key="report._id">
+  <div>
+    <h1>Incident Reports</h1>
+    <div v-if="isLoading">Loading...</div>
+    <div v-else-if="filteredReports.length">
+      <div v-for="report in filteredReports" :key="report._id" class="big-padding">
 
-                <h3>{{ formatDate(report._createdDate) }}</h3>
-                <hr>
-                <h4>{{ report._title }}</h4>
-                <p>{{ report._content }}</p>
-                <hr><br><br>
+        <h3>{{ formatDate(report._createdDate) }}</h3>
+        <hr>
+        <h4>{{ report._title }}</h4>
+        <p>{{ report._content }}</p>
+        <hr><br><br>
 
-            </div>
-        </div>
-        <p v-else>No incident reports found or an error occurred.</p>
+      </div>
     </div>
+    <p v-else>No incident reports found or an error occurred.</p>
+  </div>
 </template>
 
-
 <script>
 export default {
-    data() {
-        return {
-            incidentReports: [],
-            isLoading: false,
-            error: null,
-        };
+  data() {
+    return {
+      incidentReports: [],
+      isLoading: false,
+      error: null,
+    };
+  },
+  mounted() {
+    this.fetchIncidentReports();
+  },
+  methods: {
+    async fetchIncidentReports() {
+      this.isLoading = true;
+      try {
+        const response = await fetch("/api/incident-reports"); // Replace with your API endpoint
+        const data = await response.json();
+        this.incidentReports = data;
+      } catch (error) {
+        this.error = error;
+        console.error("Error fetching incident reports:", error);
+      } finally {
+        this.isLoading = false;
+      }
     },
-    mounted() {
-        this.fetchIncidentReports();
+    formatDate(dateString) {
+      const date = new Date(dateString);
+      return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
     },
-    methods: {
-        async fetchIncidentReports() {
-            this.isLoading = true;
-            try {
-                const response = await fetch("/api/incident-reports"); // Replace with your API endpoint
-                const data = await response.json();
-                this.incidentReports = data;
-                console.log(data);
-            } catch (error) {
-                this.error = error;
-                console.error("Error fetching incident reports:", error);
-            } finally {
-                this.isLoading = false;
-                this.filteredReports = this.incidentReports.slice(-25); // Get the last 25 reports
-            }
-        },
-        formatDate(dateString) { const date = new Date(dateString); return date.toLocaleDateString('en-US', { year: 'numeric',month: 'long',day: 'numeric' });
-    },
-    },
-    computed: {
-        filteredReports() {
-            // You can implement additional filtering/sorting logic here
-            return this.incidentReports.slice(-25);
-        },
+  },
+  computed: {
+    filteredReports() {
+      return this.incidentReports
+        .slice() // Create a copy to avoid mutating the original array
+        .sort((a, b) => new Date(b._createdDate) - new Date(a._createdDate))
+        .slice(-25); // Get the last 25 sorted reports
     },
+  },
 };
 </script>
 <style>