diff --git a/src/ui/Highscore.vue b/src/ui/Highscore.vue
index 3f671f1..25a45e6 100644
--- a/src/ui/Highscore.vue
+++ b/src/ui/Highscore.vue
@@ -10,13 +10,15 @@
 </template>
 
 <script>
+
+import { highscoreStatistics } from "@/api";
+
 export default {
   data() {
     return { highscore: [] };
   },
   async mounted() {
-    let _response = await fetch("/api/highscore/statistics");
-    let response = await _response.json();
+    let response = await highscoreStatistics();
     response.sort((a, b) => {
       return a.wins.length > b.wins.length ? -1 : 1;
     });
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index b55a20b..4d43f6b 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -35,6 +35,9 @@
   </div>
 </template>
 <script>
+
+import { colorStatistics } from "@/api";
+
 export default {
   data() {
     return {
@@ -54,8 +57,7 @@ export default {
     };
   },
   async mounted() {
-    let _response = await fetch("/api/purchase/statistics/color");
-    let response = await _response.json();
+    let response = await colorStatistics();
     this.red = response.red;
     this.blue = response.blue;
     this.green = response.green;
diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue
index 259be94..78bb5d7 100644
--- a/src/ui/Wines.vue
+++ b/src/ui/Wines.vue
@@ -35,6 +35,7 @@
 <script>
 import { event } from "vue-analytics";
 import Wine from "@/ui/Wine";
+import { overallWineStatistics } from "@/api";
 
 export default {
   components: {
@@ -44,8 +45,7 @@ export default {
     return { wines: [], clickedWine: null, wineOpen: false };
   },
   async mounted() {
-    let _response = await fetch("/api/wines/statistics/overall");
-    let response = await _response.json();
+    let response = await overallWineStatistics();
 
     response.sort();
     response = response