diff --git a/src/frontend/package.json b/src/frontend/package.json
index 6a34df6..84cbeb3 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -27,6 +27,7 @@
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/tsconfig": "^0.7.0",
+    "daisyui": "^5.0.6",
     "eslint": "^9.18.0",
     "eslint-plugin-oxlint": "^0.15.6",
     "eslint-plugin-vue": "^9.32.0",
diff --git a/src/frontend/pnpm-lock.yaml b/src/frontend/pnpm-lock.yaml
index e59525b..ec9a6f3 100644
--- a/src/frontend/pnpm-lock.yaml
+++ b/src/frontend/pnpm-lock.yaml
@@ -39,6 +39,9 @@ importers:
       '@vue/tsconfig':
         specifier: ^0.7.0
         version: 0.7.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+      daisyui:
+        specifier: ^5.0.6
+        version: 5.0.6
       eslint:
         specifier: ^9.18.0
         version: 9.20.1(jiti@2.4.2)
@@ -960,6 +963,9 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  daisyui@5.0.6:
+    resolution: {integrity: sha512-/e/9Gw/2y9oawBJlWkJMSEhRXdmfOLvcPl+6q/x2rPEdIVOtebs1t3ex2vwySl9vCRs1GGNBKCiL+P60Ps/wUw==}
+
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
@@ -2704,6 +2710,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  daisyui@5.0.6: {}
+
   de-indent@1.0.2: {}
 
   debug@4.4.0:
diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index 1d03793..577b037 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+import { ref, watchEffect, watch } from 'vue';
 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) {
+function calculateUserTimes(response, selectedEvent) {
   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;
@@ -29,10 +28,12 @@ function calculateUserTimes(response) {
     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') {
+      if (events[i].event === selectedEvent[0]) {
         // 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) {
+          // if same event or leave event
+          if (events[j].event === selectedEvent[1] && events[j].channel.id === events[i].channel.id || events[j].event === "leave" && events[j].channel.id === events[i].channel.id) {
+            // if (events[j].event === selectedEvent[1] && 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;
@@ -62,14 +63,13 @@ function calculateUserTimes(response) {
 const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase;
 const events = ref([])
 const userTimes = ref([])
+const selectedEvent = ref([])
 const guild = ref("756605475960914200")
-watchEffect(async () => {
+watch(selectedEvent, 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)
+  let processedData = calculateUserTimes(events!.value, selectedEvent.value);
   userTimes.value = processedData;
 })
 
@@ -79,11 +79,11 @@ watchEffect(async () => {
 <template>
 
   <main>
-    <!-- <select v-model="guild"> -->
-    <!--   <option v-for="guild in guild_map" :option="guild.id"> -->
-    <!--     {{ guild.name }} -->
-    <!--   </option> -->
-    <!-- </select> -->
+    <select class="select" v-model="selectedEvent">
+      <option :value="['deafen', 'undeafen']">Deafen</option>
+      <option :value="['mute', 'unmute']">Mute</option>
+      <option :value="['join', 'leave']">Time in VC</option>
+    </select>
     <!-- <div v-for="event in events"> -->
     <!-- <Stats :event="event" /> -->
     <!-- </div> -->
diff --git a/src/frontend/src/assets/main.css b/src/frontend/src/assets/main.css
index daabacd..d52e53a 100644
--- a/src/frontend/src/assets/main.css
+++ b/src/frontend/src/assets/main.css
@@ -1,5 +1,40 @@
 @import "tailwindcss";
+@plugin "daisyui";
 
+@plugin "daisyui/theme" {
+  name: "black";
+  default: false;
+  prefersdark: false;
+  color-scheme: "dark";
+  --color-base-100: oklch(0% 0 0);
+  --color-base-200: oklch(19% 0 0);
+  --color-base-300: oklch(22% 0 0);
+  --color-base-content: oklch(87.609% 0 0);
+  --color-primary: oklch(35% 0 0);
+  --color-primary-content: oklch(100% 0 0);
+  --color-secondary: oklch(35% 0 0);
+  --color-secondary-content: oklch(100% 0 0);
+  --color-accent: oklch(35% 0 0);
+  --color-accent-content: oklch(100% 0 0);
+  --color-neutral: oklch(35% 0 0);
+  --color-neutral-content: oklch(100% 0 0);
+  --color-info: oklch(45.201% 0.313 264.052);
+  --color-info-content: oklch(89.04% 0.062 264.052);
+  --color-success: oklch(51.975% 0.176 142.495);
+  --color-success-content: oklch(90.395% 0.035 142.495);
+  --color-warning: oklch(96.798% 0.211 109.769);
+  --color-warning-content: oklch(19.359% 0.042 109.769);
+  --color-error: oklch(62.795% 0.257 29.233);
+  --color-error-content: oklch(12.559% 0.051 29.233);
+  --radius-selector: 0rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
 :root {
   @apply bg-gray-900 text-stone-50;
 }