diff --git a/src/pages/index.vue b/src/pages/index.vue
index 8d4a7818..f0d7e227 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -50,6 +50,8 @@ const clientsStore = useClientsStore();
 
 const intervalId = ref<NodeJS.Timeout | null>(null);
 
+clientsStore.refresh();
+
 onMounted(() => {
   // TODO?: replace with websocket or similar
   intervalId.value = setInterval(() => {
diff --git a/src/stores/clients.ts b/src/stores/clients.ts
index 2faccf35..62ddc61b 100644
--- a/src/stores/clients.ts
+++ b/src/stores/clients.ts
@@ -24,8 +24,8 @@ export const useClientsStore = defineStore('Clients', () => {
   const clientsPersist = ref<Record<string, ClientPersist>>({});
 
   async function refresh({ updateCharts = false } = {}) {
-    const _clients = await api.getClients();
-    clients.value = _clients.map((client) => {
+    const { data: _clients } = await api.getClients();
+    const transformedClients = _clients.value?.map((client) => {
       let avatar = undefined;
       if (client.name.includes('@') && client.name.includes('.')) {
         avatar = `https://gravatar.com/avatar/${sha256(client.name.toLowerCase().trim())}.jpg`;
@@ -106,6 +106,7 @@ export const useClientsStore = defineStore('Clients', () => {
         hoverRx: clientPersist.hoverRx,
       };
     });
+    clients.value = transformedClients ?? null;
   }
   return { clients, clientsPersist, refresh };
 });
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 820f5ead..cb517af2 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -24,6 +24,7 @@ class API {
   }
 
   async getSession() {
+    // TODO?: use useFetch
     return $fetch('/api/session', {
       method: 'get',
     });
@@ -43,19 +44,9 @@ class API {
   }
 
   async getClients() {
-    return $fetch('/api/wireguard/client', {
+    return useFetch('/api/wireguard/client', {
       method: 'get',
-    }).then((clients) =>
-      clients.map((client) => ({
-        ...client,
-        createdAt: new Date(client.createdAt),
-        updatedAt: new Date(client.updatedAt),
-        latestHandshakeAt:
-          client.latestHandshakeAt !== null
-            ? new Date(client.latestHandshakeAt)
-            : null,
-      }))
-    );
+    });
   }
 
   async createClient({ name }: { name: string }) {
@@ -117,8 +108,12 @@ class API {
   }
 }
 
-export type WGClient = Awaited<
+type WGClientReturn = Awaited<
   ReturnType<typeof API.prototype.getClients>
->[number];
+>['data']['value'];
+
+export type WGClient = WGClientReturn extends (infer U)[] | undefined
+  ? U
+  : never;
 
 export default new API();