diff --git a/components/Charts.vue b/components/Charts.vue
new file mode 100644
index 0000000..d15a7ca
--- /dev/null
+++ b/components/Charts.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {Bar} from 'vue-chartjs'
+import type {StatExport} from "~/server/utils/api/stats";
+
+const props = defineProps<{ url: string, mode: string }>();
+
+const {data} = await useFetch<StatExport>(props.url, {query: {mode: props.mode}});
+let downloadData = computed(() => {
+  if (data.value) {
+    return data.value
+  }
+
+  return {
+    labels: [],
+    data: []
+  }
+})
+
+const chartData = computed(() => {
+  return {
+    labels: downloadData.value.labels,
+    datasets: downloadData.value.data
+  }
+})
+
+const chartOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    x: {
+      stacked: true,
+      grid: {
+        color: "#1b1a1e"
+      },
+      ticks: {
+        color: "#8a8a8c"
+      }
+    },
+    y: {
+      stacked: true,
+      grid: {
+        color: "#1b1a1e"
+      },
+
+      ticks: {
+        color: "#8a8a8c"
+      }
+    }
+  },
+  plugins: {
+    legend: {
+      labels: {
+        color: "#8a8a8c"
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <Bar
+      :data="chartData"
+      :options="chartOptions"
+  />
+</template>
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index b77bc8b..c40dc2a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -24,9 +24,9 @@ const countUrls = [
     <NuxtLink id="header" href="/">
       Modrinth Statistics
     </NuxtLink>
-    <div>
-      <DropDownLink :urls="downloadUrls" title="Downloads"/>
-      <DropDownLink :urls="countUrls" title="Counts"/>
+    <div id="links">
+      <DropDownLink :urls="downloadUrls" title="Mod Downloads"/>
+      <DropDownLink :urls="countUrls" title="Mod Counts"/>
     </div>
     <button @click="onUpdateData">
       update Data
@@ -54,6 +54,11 @@ const countUrls = [
     font-size: xx-large;
   }
 
+  #links {
+    display: flex;
+    gap: 25px;
+  }
+
   button {
     color: black;
   }
diff --git a/pages/counts/[mode].vue b/pages/counts/[mode].vue
index 5663da6..e20a28c 100644
--- a/pages/counts/[mode].vue
+++ b/pages/counts/[mode].vue
@@ -1,66 +1,8 @@
 <script setup lang="ts">
-import {Bar} from 'vue-chartjs'
-
+import Charts from "~/components/Charts.vue";
 const route = useRoute();
-
-const {data} = await useFetch("/api/counts", {query: {mode: route.params.mode}});
-let downloadData = computed(() => {
-  if (data.value) {
-    return data.value
-  }
-
-  return {
-    labels: [],
-    data: []
-  }
-})
-
-const chartData = computed(() => {
-  return {
-    labels: downloadData.value.labels,
-    datasets: downloadData.value.data
-  }
-})
-
-const chartOptions = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-  scales: {
-    x: {
-      stacked: true,
-      grid: {
-        color: "#1b1a1e"
-      },
-      ticks: {
-        color: "#8a8a8c"
-      }
-    },
-    y: {
-      stacked: true,
-      grid: {
-        color: "#1b1a1e"
-      },
-
-      ticks: {
-        color: "#8a8a8c"
-      }
-    }
-  },
-  plugins: {
-    legend: {
-      labels: {
-        color: "#8a8a8c"
-      }
-    }
-  }
-})
 </script>
 
 <template>
-  <Bar
-      :data="chartData"
-      :options="chartOptions"
-  />
-</template>
-<style scoped>
-</style>
\ No newline at end of file
+  <Charts :mode="route.params.mode as string" url="/api/counts"/>
+</template>
\ No newline at end of file
diff --git a/pages/downloads/[mode].vue b/pages/downloads/[mode].vue
index 1823a5d..217dd23 100644
--- a/pages/downloads/[mode].vue
+++ b/pages/downloads/[mode].vue
@@ -1,66 +1,9 @@
 <script setup lang="ts">
-import {Bar} from 'vue-chartjs'
+import Charts from "~/components/Charts.vue";
 
 const route = useRoute();
-
-const {data} = await useFetch("/api/downloads", {query: {mode: route.params.mode}});
-let downloadData = computed(() => {
-  if (data.value) {
-    return data.value
-  }
-
-  return {
-    labels: [],
-    data: []
-  }
-})
-
-const chartData = computed(() => {
-  return {
-    labels: downloadData.value.labels,
-    datasets: downloadData.value.data
-  }
-})
-
-const chartOptions = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-  scales: {
-    x: {
-      stacked: true,
-      grid: {
-        color: "#1b1a1e"
-      },
-      ticks: {
-        color: "#8a8a8c"
-      }
-    },
-    y: {
-      stacked: true,
-      grid: {
-        color: "#1b1a1e"
-      },
-
-      ticks: {
-        color: "#8a8a8c"
-      }
-    }
-  },
-  plugins: {
-    legend: {
-      labels: {
-        color: "#8a8a8c"
-      }
-    }
-  }
-})
 </script>
 
 <template>
-  <Bar
-      :data="chartData"
-      :options="chartOptions"
-  />
-</template>
-<style scoped>
-</style>
\ No newline at end of file
+  <Charts :mode="route.params.mode as string" url="/api/downloads"/>
+</template>
\ No newline at end of file
diff --git a/server/api/counts.ts b/server/api/counts.ts
index b710bac..e22aede 100644
--- a/server/api/counts.ts
+++ b/server/api/counts.ts
@@ -1,50 +1,6 @@
-import {Stats} from "~/server/utils/types/stats";
+import {exportStats, StatExport} from "~/server/utils/api/stats";
 
-type result = {
-    labels: string[]
-    data: {
-        label: string
-        backgroundColor: string,
-        data: number[]
-    }[]
-}
-
-export default defineEventHandler(async (event): Promise<result> => {
-    const storage = useStorage("statistics");
-    let query = getQuery(event);
-
-    let stats
-
-    switch (query.mode) {
-        case "minor" :
-            stats = await storage.getItem<Stats>("versionStatsMinor")
-            break
-        case "all" :
-            stats = await storage.getItem<Stats>("versionStatsAll")
-            break
-        default:
-            stats = await storage.getItem<Stats>("versionStatsMajor")
-    }
-
-    if (!stats) {
-        // todo - error message
-        return {
-            labels: [],
-            data: []
-        }
-    }
-
-    return {
-        labels: stats.versions,
-        data: stats.data.map(value => {
-            return {
-                label: value.name,
-                backgroundColor: getColorForLauncher(value.name),
-                data: value.values.map((stat) => {
-                    return stat.count
-                })
-            }
-        })
-    }
+export default defineEventHandler(async (event): Promise<StatExport> => {
+    return exportStats(event, value => value.count)
 })
 
diff --git a/server/api/downloads.ts b/server/api/downloads.ts
index 2e3802f..f04e29a 100644
--- a/server/api/downloads.ts
+++ b/server/api/downloads.ts
@@ -1,50 +1,7 @@
 import {Stats} from "~/server/utils/types/stats";
+import {exportStats, StatExport} from "~/server/utils/api/stats";
 
-type result = {
-    labels: string[]
-    data: {
-        label: string
-        backgroundColor: string,
-        data: number[]
-    }[]
-}
-
-export default defineEventHandler(async (event): Promise<result> => {
-    const storage = useStorage("statistics");
-    let query = getQuery(event);
-
-    let stats
-
-    switch (query.mode) {
-        case "minor" :
-            stats = await storage.getItem<Stats>("versionStatsMinor")
-            break
-        case "all" :
-            stats = await storage.getItem<Stats>("versionStatsAll")
-            break
-        default:
-            stats = await storage.getItem<Stats>("versionStatsMajor")
-    }
-
-    if (!stats) {
-        // todo - error message
-        return {
-            labels: [],
-            data: []
-        }
-    }
-
-    return {
-        labels: stats.versions,
-        data: stats.data.map(value => {
-            return {
-                label: value.name,
-                backgroundColor: getColorForLauncher(value.name),
-                data: value.values.map((stat) => {
-                    return stat.downloads
-                })
-            }
-        })
-    }
+export default defineEventHandler(async (event): Promise<StatExport> => {
+    return exportStats(event, value => value.count)
 })
 
diff --git a/server/utils/api/stats.ts b/server/utils/api/stats.ts
new file mode 100644
index 0000000..df4dab3
--- /dev/null
+++ b/server/utils/api/stats.ts
@@ -0,0 +1,50 @@
+import {Stats, StatsValue} from "~/server/utils/types/stats";
+import {H3Event} from "h3";
+
+export type StatExport = {
+    labels: string[]
+    data: {
+        label: string
+        backgroundColor: string,
+        data: number[]
+    }[]
+}
+
+export async function exportStats(event: H3Event, fn: (value: StatsValue) => number): Promise<StatExport> {
+    const storage = useStorage("statistics");
+    let query = getQuery(event);
+
+    let stats
+
+    switch (query.mode) {
+        case "minor" :
+            stats = await storage.getItem<Stats>("versionStatsMinor")
+            break
+        case "all" :
+            stats = await storage.getItem<Stats>("versionStatsAll")
+            break
+        default:
+            stats = await storage.getItem<Stats>("versionStatsMajor")
+    }
+
+    if (!stats) {
+        // todo - error message
+        return {
+            labels: [],
+            data: []
+        }
+    }
+
+    return {
+        labels: stats.versions,
+        data: stats.data.map(value => {
+            return {
+                label: value.name,
+                backgroundColor: getColorForLauncher(value.name),
+                data: value.values.map((stat) => {
+                    return fn(stat)
+                })
+            }
+        })
+    }
+}
\ No newline at end of file
diff --git a/server/utils/types/stats.ts b/server/utils/types/stats.ts
index 4e3e077..e947af5 100644
--- a/server/utils/types/stats.ts
+++ b/server/utils/types/stats.ts
@@ -2,6 +2,8 @@ export type Stats = {
     versions: string[]
     data: {
         name: string
-        values: { downloads: number, count: number }[]
+        values: StatsValue[]
     }[]
-}
\ No newline at end of file
+}
+
+export type StatsValue = { downloads: number, count: number }
\ No newline at end of file