diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index a5e57d1..1d03793 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -4,15 +4,76 @@ import PocketBase from "pocketbase";
 import { guilds, type TypedPocketBase } from './types/global.ts';
 import "./assets/main.css"
 import Stats from './components/stats.vue';
+
+
+function calculateUserTimes(response) {
+  const userEvents = {};
+  const userTimes = {}; // Changed to object to store total time per user
+  console.log(response[0].channel.id as string)
+  // 1. Group events by user ID
+  response.forEach(item => {
+    const userId = item.member.id;
+    if (!userEvents[userId]) {
+      userEvents[userId] = [];
+    }
+    userEvents[userId].push(item);
+  }
+  );
+
+  // 2. Calculate time differences for each user
+  for (const userId in userEvents) {
+    const events = userEvents[userId];
+    let totalTimeMs = 0; // Initialize total time for the user
+
+    // Sort events by timestamp to ensure correct order
+    events.sort((a, b) => new Date(a.created).getTime() - new Date(b.created).getTime());
+
+    for (let i = 0; i < events.length; i++) {
+      if (events[i].event === 'deafen') {
+        // Find the next 'leave' event for the same user and channel
+        for (let j = i + 1; j < events.length; j++) {
+          if (events[j].event === 'undeafen' && events[j].channel.id === events[i].channel.id) {
+            const joinTime = new Date(events[i].created).getTime();
+            const leaveTime = new Date(events[j].created).getTime();
+            const timeInChannelMs = leaveTime - joinTime;
+
+            totalTimeMs += timeInChannelMs; // Accumulate time for the user
+            i = j; // Advance the outer loop to the 'leave' event
+            break; // Break the inner loop after finding a matching 'leave'
+          }
+        }
+      }
+    }
+
+    // Store total time for the user
+    userTimes[userId] = {
+      userId: userId,
+      userName: events[0].member.name, // Assuming all events have the same username
+      totalTimeMs: totalTimeMs
+    };
+  }
+  const userTimesArray = Object.values(userTimes);
+  userTimesArray.sort((a, b) => b.totalTimeMs - a.totalTimeMs);
+  // Convert the userTimes object into an array for easier display
+  return userTimesArray;
+}
+
+
 const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase;
 const events = ref([])
+const userTimes = ref([])
 const guild = ref("756605475960914200")
 watchEffect(async () => {
   events.value = await pb.collection("vc_stats").getFullList({
     filter: pb.filter(`guild.id ~ ${guild.value}`)
-  }
-  )
+  })
+  console.log(events.value)
+  let processedData = calculateUserTimes(events!.value, ["756605475960914150"], ["1103776777312149595"]);
+  console.log(processedData)
+  userTimes.value = processedData;
 })
+
+
 </script>
 
 <template>
@@ -23,8 +84,15 @@ watchEffect(async () => {
     <!--     {{ guild.name }} -->
     <!--   </option> -->
     <!-- </select> -->
-    <div v-for="event in events">
-      <Stats :event="event" />
+    <!-- <div v-for="event in events"> -->
+    <!-- <Stats :event="event" /> -->
+    <!-- </div> -->
+
+    <div v-for="timeData in userTimes" :key="timeData.userid">
+      <p>
+        User: {{ timeData.userName }} ({{ timeData.userId }})
+      </p>
+      <p>Time in Channel: {{ timeData.totalTimeMs / 1000 / 60 / 60 }} hours</p>
     </div>
   </main>
 </template>
diff --git a/src/frontend/src/scripts/util.ts b/src/frontend/src/scripts/util.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/frontend/src/types/global.ts b/src/frontend/src/types/global.ts
index 21f0647..852d57d 100644
--- a/src/frontend/src/types/global.ts
+++ b/src/frontend/src/types/global.ts
@@ -45,17 +45,17 @@ export enum guilds {
   "acns" = "1045094089198145500"
 }
 export type channel = {
-  id: int
+  id: string
   name: string
 }
 export type guild = {
   icon: string
-  id: int
+  id: string
   name: guilds
 }
 export type member = {
   avatar: string
-  id: int
+  id: string
   name: string
 }
 export type VcStatsRecord = {