diff --git a/src/components/metrics/UniqueSessions.tsx b/src/components/metrics/UniqueSessions.tsx
index d39405a6..8f0cba3b 100644
--- a/src/components/metrics/UniqueSessions.tsx
+++ b/src/components/metrics/UniqueSessions.tsx
@@ -1,27 +1,39 @@
-import { Container, Text } from '@umami/react-zen';
-import { useMemo } from 'react';
-import { useWebsiteEventsQuery } from '@/components/hooks';
+import { Container, Loading, Text } from '@umami/react-zen';
+import { useWebsiteStatsQuery } from '@/components/hooks';
 
-const UniqueSessions = ({ websiteId }) => {
-  const query = useWebsiteEventsQuery(websiteId, { view: 'all' });
+interface UniqueSessionsProps {
+  websiteId: string;
+}
 
-  const uniqueSessionCount = useMemo(() => {
-    if (!query?.data?.data) return 0;
+const UniqueSessions = ({ websiteId }: UniqueSessionsProps) => {
+  const { data, isLoading, error } = useWebsiteStatsQuery(websiteId);
 
-    const uniqueSessions = new Set(query.data.data.map((event: any) => event.sessionId));
+  const renderContent = () => {
+    if (isLoading) {
+      return <Loading icon="dots" />;
+    }
 
-    return uniqueSessions.size;
-  }, [query?.data?.data]);
+    if (error) {
+      return (
+        <Text size="5" color="red">
+          Error loading data
+        </Text>
+      );
+    }
+
+    return (
+      <Text size="5" className="text-white mr-3" weight="bold">
+        {data?.visitors ?? 0}
+      </Text>
+    );
+  };
 
   return (
     <Container className="flex items-center gap-8">
       <Text size="5" color="gray">
         Unique Sessions:
       </Text>
-      <Text size="5" className="text-white mr-3" weight="bold">
-        {' '}
-        {uniqueSessionCount}
-      </Text>
+      {renderContent()}
     </Container>
   );
 };