From 7886c3f3931e3421edcc3052c44ba51a43f08639 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sat, 22 Mar 2025 03:48:18 -0700
Subject: [PATCH] Renamed query hooks. Fixed conversion bugs.

---
 src/app/(main)/App.tsx                        |  4 +-
 src/app/(main)/MenuBar.tsx                    |  1 +
 src/app/(main)/Nav.tsx                        |  4 +-
 src/app/(main)/dashboard/DashboardPage.tsx    |  4 +-
 src/app/(main)/profile/ProfileSettings.tsx    |  6 +-
 src/app/(main)/reports/ReportsDataTable.tsx   |  4 +-
 src/app/(main)/reports/ReportsHeader.tsx      |  6 +-
 src/app/(main)/reports/ReportsPage.tsx        |  4 +-
 src/app/(main)/reports/ReportsTable.tsx       |  6 +-
 .../reports/[reportId]/BaseParameters.tsx     |  6 +-
 .../[reportId]/FieldFilterEditForm.tsx        |  4 +-
 src/app/(main)/reports/[reportId]/Report.tsx  |  4 +-
 .../reports/[reportId]/ReportHeader.tsx       |  5 +-
 .../(main)/reports/[reportId]/ReportPage.tsx  |  4 +-
 .../(main)/reports/create/ReportTemplates.tsx |  4 +-
 .../reports/event-data/EventDataTable.tsx     | 12 +--
 .../(main)/reports/journey/JourneyView.tsx    | 19 ++--
 .../reports/revenue/RevenueParameters.tsx     |  6 +-
 .../(main)/reports/revenue/RevenueTable.tsx   | 36 +++----
 src/app/(main)/settings/SettingsLayout.tsx    |  4 +-
 .../(main)/settings/teams/TeamLeaveButton.tsx |  4 +-
 .../(main)/settings/teams/TeamsDataTable.tsx  |  6 +-
 src/app/(main)/settings/teams/TeamsHeader.tsx |  4 +-
 .../settings/users/UserDeleteButton.tsx       |  4 +-
 .../(main)/settings/users/UsersDataTable.tsx  |  4 +-
 .../settings/users/[userId]/UserEditForm.tsx  |  4 +-
 .../settings/users/[userId]/UserProvider.tsx  |  4 +-
 .../settings/websites/WebsitesHeader.tsx      |  4 +-
 .../websites/WebsitesSettingsPage.tsx         |  4 +-
 .../settings/websites/WebsitesTable.tsx       |  4 +-
 .../websites/[websiteId]/WebsiteData.tsx      | 14 ++-
 .../[websiteId]/WebsiteTransferForm.tsx       |  6 +-
 .../(main)/teams/[teamId]/TeamProvider.tsx    |  4 +-
 .../[teamId]/settings/TeamSettingsLayout.tsx  |  4 +-
 .../settings/members/TeamMembersDataTable.tsx |  4 +-
 .../settings/members/TeamMembersPage.tsx      |  4 +-
 .../settings/members/TeamMembersTable.tsx     |  4 +-
 .../[teamId]/settings/team/TeamDetails.tsx    |  4 +-
 .../websites/TeamWebsitesDataTable.tsx        |  4 +-
 .../settings/websites/TeamWebsitesPage.tsx    |  4 +-
 .../settings/websites/TeamWebsitesTable.tsx   |  4 +-
 src/app/(main)/websites/WebsitesPage.tsx      |  4 +-
 .../websites/[websiteId]/WebsiteChart.tsx     |  7 +-
 .../websites/[websiteId]/WebsiteChartList.tsx |  4 +-
 .../[websiteId]/WebsiteHeader.module.css      | 62 ------------
 .../websites/[websiteId]/WebsiteHeader.tsx    | 94 +++----------------
 .../[websiteId]/WebsiteMetricsBar.tsx         | 14 +--
 .../websites/[websiteId]/WebsiteProvider.tsx  |  4 +-
 .../websites/[websiteId]/WebsiteTabs.tsx      | 58 ++++++++++++
 .../[websiteId]/events/EventProperties.tsx    | 26 ++---
 .../[websiteId]/events/EventsDataTable.tsx    |  4 +-
 .../[websiteId]/events/EventsMetricsBar.tsx   |  4 +-
 .../[websiteId]/events/EventsPage.tsx         | 10 +-
 .../[websiteId]/events/EventsTable.tsx        | 28 +++---
 .../[websiteId]/realtime/RealtimeUrls.tsx     | 10 +-
 .../realtime/WebsiteRealtimePage.tsx          |  4 +-
 .../reports/WebsiteReportsPage.tsx            |  4 +-
 .../sessions/SessionProperties.tsx            | 24 +++--
 .../sessions/SessionsDataTable.tsx            |  4 +-
 .../sessions/SessionsMetricsBar.tsx           |  4 +-
 .../[websiteId]/sessions/SessionsPage.tsx     | 14 ++-
 .../[websiteId]/sessions/SessionsTable.tsx    | 48 +++++-----
 .../[websiteId]/sessions/SessionsWeekly.tsx   | 14 ++-
 .../sessions/[sessionId]/SessionActivity.tsx  |  4 +-
 .../sessions/[sessionId]/SessionData.tsx      |  4 +-
 .../[sessionId]/SessionDetailsPage.tsx        |  4 +-
 src/app/share/[...shareId]/SharePage.tsx      |  4 +-
 src/components/hooks/index.ts                 | 57 ++++++-----
 ...taEvents.ts => useEventDataEventsQuery.ts} |  2 +-
 ...ties.ts => useEventDataPropertiesQuery.ts} |  2 +-
 ...taValues.ts => useEventDataValuesQuery.ts} |  2 +-
 .../queries/{useLogin.ts => useLoginQuery.ts} |  2 +-
 .../{useRealtime.ts => useRealtimeQuery.ts}   |  2 +-
 .../{useReport.ts => useReportQuery.ts}       |  2 +-
 .../{useReports.ts => useReportsQuery.ts}     |  2 +-
 ...enueValues.ts => useRevenueValuesQuery.ts} |  2 +-
 ...Activity.ts => useSessionActivityQuery.ts} |  2 +-
 ...es.ts => useSessionDataPropertiesQuery.ts} |  2 +-
 ...eSessionData.ts => useSessionDataQuery.ts} |  2 +-
 ...Values.ts => useSessionDataValuesQuery.ts} |  2 +-
 ...useShareToken.ts => useShareTokenQuery.ts} |  2 +-
 ...eTeamMembers.ts => useTeamMembersQuery.ts} |  2 +-
 .../queries/{useTeam.ts => useTeamQuery.ts}   |  2 +-
 ...eamWebsites.ts => useTeamWebsitesQuery.ts} |  2 +-
 .../queries/{useTeams.ts => useTeamsQuery.ts} |  2 +-
 .../queries/{useUser.ts => useUserQuery.ts}   |  2 +-
 .../queries/{useUsers.ts => useUsersQuery.ts} |  2 +-
 ...siteEvents.ts => useWebsiteEventsQuery.ts} |  2 +-
 ...ries.ts => useWebsiteEventsSeriesQuery.ts} |  2 +-
 ...teMetrics.ts => useWebsiteMetricsQuery.ts} |  2 +-
 ...geviews.ts => useWebsitePageviewsQuery.ts} |  2 +-
 .../{useWebsite.ts => useWebsiteQuery.ts}     |  2 +-
 ...teSession.ts => useWebsiteSessionQuery.ts} |  2 +-
 ...tats.ts => useWebsiteSessionStatsQuery.ts} |  5 +-
 ...Sessions.ts => useWebsiteSessionsQuery.ts} |  5 +-
 ...ly.ts => useWebsiteSessionsWeeklyQuery.ts} |  2 +-
 ...ebsiteStats.ts => useWebsiteStatsQuery.ts} |  2 +-
 ...siteValues.ts => useWebsiteValuesQuery.ts} |  2 +-
 src/components/hooks/queries/useWebsites.ts   |  4 +-
 .../hooks/{queries => }/useConfig.ts          |  0
 src/components/hooks/useGlobalState.ts        |  2 +-
 src/components/hooks/useNavigation.ts         | 14 +--
 src/components/hooks/useTeamUrl.ts            | 12 ---
 src/components/input/ProfileButton.tsx        |  4 +-
 src/components/input/RefreshButton.tsx        |  9 +-
 src/components/input/TeamsButton.tsx          |  8 +-
 src/components/metrics/EventsChart.tsx        |  4 +-
 src/components/metrics/MetricsBar.tsx         |  2 +-
 src/components/metrics/MetricsTable.tsx       | 24 ++---
 src/components/metrics/WorldMap.tsx           |  4 +-
 110 files changed, 423 insertions(+), 489 deletions(-)
 delete mode 100644 src/app/(main)/websites/[websiteId]/WebsiteHeader.module.css
 create mode 100644 src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
 rename src/components/hooks/queries/{useEventDataEvents.ts => useEventDataEventsQuery.ts} (92%)
 rename src/components/hooks/queries/{useEventDataProperties.ts => useEventDataPropertiesQuery.ts} (92%)
 rename src/components/hooks/queries/{useEventDataValues.ts => useEventDataValuesQuery.ts} (94%)
 rename src/components/hooks/queries/{useLogin.ts => useLoginQuery.ts} (94%)
 rename src/components/hooks/queries/{useRealtime.ts => useRealtimeQuery.ts} (91%)
 rename src/components/hooks/queries/{useReport.ts => useReportQuery.ts} (98%)
 rename src/components/hooks/queries/{useReports.ts => useReportsQuery.ts} (87%)
 rename src/components/hooks/queries/{useRevenueValues.ts => useRevenueValuesQuery.ts} (78%)
 rename src/components/hooks/queries/{useSessionActivity.ts => useSessionActivityQuery.ts} (92%)
 rename src/components/hooks/queries/{useSessionDataProperties.ts => useSessionDataPropertiesQuery.ts} (92%)
 rename src/components/hooks/queries/{useSessionData.ts => useSessionDataQuery.ts} (78%)
 rename src/components/hooks/queries/{useSessionDataValues.ts => useSessionDataValuesQuery.ts} (93%)
 rename src/components/hooks/queries/{useShareToken.ts => useShareTokenQuery.ts} (91%)
 rename src/components/hooks/queries/{useTeamMembers.ts => useTeamMembersQuery.ts} (88%)
 rename src/components/hooks/queries/{useTeam.ts => useTeamQuery.ts} (81%)
 rename src/components/hooks/queries/{useTeamWebsites.ts => useTeamWebsitesQuery.ts} (87%)
 rename src/components/hooks/queries/{useTeams.ts => useTeamsQuery.ts} (89%)
 rename src/components/hooks/queries/{useUser.ts => useUserQuery.ts} (73%)
 rename src/components/hooks/queries/{useUsers.ts => useUsersQuery.ts} (91%)
 rename src/components/hooks/queries/{useWebsiteEvents.ts => useWebsiteEventsQuery.ts} (93%)
 rename src/components/hooks/queries/{useWebsiteEventsSeries.ts => useWebsiteEventsSeriesQuery.ts} (92%)
 rename src/components/hooks/queries/{useWebsiteMetrics.ts => useWebsiteMetricsQuery.ts} (96%)
 rename src/components/hooks/queries/{useWebsitePageviews.ts => useWebsitePageviewsQuery.ts} (93%)
 rename src/components/hooks/queries/{useWebsite.ts => useWebsiteQuery.ts} (73%)
 rename src/components/hooks/queries/{useWebsiteSession.ts => useWebsiteSessionQuery.ts} (76%)
 rename src/components/hooks/queries/{useWebsiteSessionStats.ts => useWebsiteSessionStatsQuery.ts} (77%)
 rename src/components/hooks/queries/{useWebsiteSessions.ts => useWebsiteSessionsQuery.ts} (84%)
 rename src/components/hooks/queries/{useWebsiteSessionsWeekly.ts => useWebsiteSessionsWeeklyQuery.ts} (92%)
 rename src/components/hooks/queries/{useWebsiteStats.ts => useWebsiteStatsQuery.ts} (92%)
 rename src/components/hooks/queries/{useWebsiteValues.ts => useWebsiteValuesQuery.ts} (97%)
 rename src/components/hooks/{queries => }/useConfig.ts (100%)
 delete mode 100644 src/components/hooks/useTeamUrl.ts

diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx
index 92228397..470856a0 100644
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@@ -6,10 +6,10 @@ import { UpdateNotice } from './UpdateNotice';
 import { Nav } from '@/app/(main)/Nav';
 import { MenuBar } from '@/app/(main)/MenuBar';
 import { Page } from '@/components/layout/Page';
-import { useLogin, useConfig } from '@/components/hooks';
+import { useLoginQuery, useConfig } from '@/components/hooks';
 
 export function App({ children }) {
-  const { user, isLoading, error } = useLogin();
+  const { user, isLoading, error } = useLoginQuery();
   const config = useConfig();
   const pathname = usePathname();
 
diff --git a/src/app/(main)/MenuBar.tsx b/src/app/(main)/MenuBar.tsx
index 2dcf0a0e..60b6096b 100644
--- a/src/app/(main)/MenuBar.tsx
+++ b/src/app/(main)/MenuBar.tsx
@@ -17,6 +17,7 @@ export function MenuBar(props: RowProps) {
       paddingY="3"
       paddingX="3"
       paddingRight="5"
+      backgroundColor="1"
     >
       <Row>
         <Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">
diff --git a/src/app/(main)/Nav.tsx b/src/app/(main)/Nav.tsx
index f271991f..dd32b638 100644
--- a/src/app/(main)/Nav.tsx
+++ b/src/app/(main)/Nav.tsx
@@ -1,12 +1,12 @@
 import Link from 'next/link';
 import { SideNav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen';
 import { Lucide, Icons } from '@/components/icons';
-import { useMessages, useTeamUrl } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import useGlobalState from '@/components/hooks/useGlobalState';
 
 export function Nav(props: any) {
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl, pathname } = useTeamUrl();
+  const { renderTeamUrl, pathname } = useNavigation();
   const [isCollapsed] = useGlobalState('sidenav-collapsed');
 
   const links = [
diff --git a/src/app/(main)/dashboard/DashboardPage.tsx b/src/app/(main)/dashboard/DashboardPage.tsx
index f97e4d37..7629c5b4 100644
--- a/src/app/(main)/dashboard/DashboardPage.tsx
+++ b/src/app/(main)/dashboard/DashboardPage.tsx
@@ -6,13 +6,13 @@ import { WebsiteChartList } from '../websites/[websiteId]/WebsiteChartList';
 import { DashboardSettingsButton } from '@/app/(main)/dashboard/DashboardSettingsButton';
 import { DashboardEdit } from '@/app/(main)/dashboard/DashboardEdit';
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
-import { useMessages, useTeamUrl, useWebsites } from '@/components/hooks';
+import { useMessages, useNavigation, useWebsites } from '@/components/hooks';
 import { useDashboard } from '@/store/dashboard';
 import { LinkButton } from '@/components/common/LinkButton';
 
 export function DashboardPage() {
   const { formatMessage, labels, messages } = useMessages();
-  const { teamId, renderTeamUrl } = useTeamUrl();
+  const { teamId, renderTeamUrl } = useNavigation();
   const { showCharts, editing, isEdited } = useDashboard();
   const pageSize = isEdited ? 200 : 10;
 
diff --git a/src/app/(main)/profile/ProfileSettings.tsx b/src/app/(main)/profile/ProfileSettings.tsx
index d5670201..93e95b10 100644
--- a/src/app/(main)/profile/ProfileSettings.tsx
+++ b/src/app/(main)/profile/ProfileSettings.tsx
@@ -1,14 +1,14 @@
-import { Form, FormField, Column, Label } from '@umami/react-zen';
+import { Column, Label } from '@umami/react-zen';
 import { TimezoneSetting } from '@/app/(main)/profile/TimezoneSetting';
 import { DateRangeSetting } from '@/app/(main)/profile/DateRangeSetting';
 import { LanguageSetting } from '@/app/(main)/profile/LanguageSetting';
 import { ThemeSetting } from '@/app/(main)/profile/ThemeSetting';
 import { PasswordChangeButton } from './PasswordChangeButton';
-import { useLogin, useMessages } from '@/components/hooks';
+import { useLoginQuery, useMessages } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
 
 export function ProfileSettings() {
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
   const cloudMode = !!process.env.cloudMode;
 
diff --git a/src/app/(main)/reports/ReportsDataTable.tsx b/src/app/(main)/reports/ReportsDataTable.tsx
index 8c071f9c..ca0109e8 100644
--- a/src/app/(main)/reports/ReportsDataTable.tsx
+++ b/src/app/(main)/reports/ReportsDataTable.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { useReports } from '@/components/hooks';
+import { useReportsQuery } from '@/components/hooks';
 import { DataGrid } from '@/components/common/DataGrid';
 import { ReportsTable } from './ReportsTable';
 
@@ -12,7 +12,7 @@ export function ReportsDataTable({
   teamId?: string;
   children?: ReactNode;
 }) {
-  const queryResult = useReports({ websiteId, teamId });
+  const queryResult = useReportsQuery({ websiteId, teamId });
 
   return (
     <DataGrid queryResult={queryResult} renderEmpty={() => children}>
diff --git a/src/app/(main)/reports/ReportsHeader.tsx b/src/app/(main)/reports/ReportsHeader.tsx
index 2bc98c79..b5f81f1b 100644
--- a/src/app/(main)/reports/ReportsHeader.tsx
+++ b/src/app/(main)/reports/ReportsHeader.tsx
@@ -1,13 +1,13 @@
 import { PageHeader } from '@/components/layout/PageHeader';
 import { Icon, Icons, Text } from '@umami/react-zen';
-import { useLogin, useMessages, useTeamUrl } from '@/components/hooks';
+import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';
 import { ROLES } from '@/lib/constants';
 
 export function ReportsHeader() {
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
-  const { user } = useLogin();
+  const { renderTeamUrl } = useNavigation();
+  const { user } = useLoginQuery();
   const canEdit = user.role !== ROLES.viewOnly;
 
   return (
diff --git a/src/app/(main)/reports/ReportsPage.tsx b/src/app/(main)/reports/ReportsPage.tsx
index bec1a17c..1a597fa2 100644
--- a/src/app/(main)/reports/ReportsPage.tsx
+++ b/src/app/(main)/reports/ReportsPage.tsx
@@ -2,10 +2,10 @@
 import { Metadata } from 'next';
 import { ReportsHeader } from './ReportsHeader';
 import { ReportsDataTable } from './ReportsDataTable';
-import { useTeamUrl } from '@/components/hooks';
+import { useNavigation } from '@/components/hooks';
 
 export function ReportsPage() {
-  const { teamId } = useTeamUrl();
+  const { teamId } = useNavigation();
 
   return (
     <>
diff --git a/src/app/(main)/reports/ReportsTable.tsx b/src/app/(main)/reports/ReportsTable.tsx
index cc3443d7..99251e60 100644
--- a/src/app/(main)/reports/ReportsTable.tsx
+++ b/src/app/(main)/reports/ReportsTable.tsx
@@ -1,13 +1,13 @@
 import { Icon, Icons, Text, DataTable, DataColumn, Row } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
-import { useMessages, useLogin, useTeamUrl } from '@/components/hooks';
+import { useMessages, useLoginQuery, useNavigation } from '@/components/hooks';
 import { REPORT_TYPES } from '@/lib/constants';
 import { ReportDeleteButton } from './ReportDeleteButton';
 
 export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
-  const { renderTeamUrl } = useTeamUrl();
+  const { user } = useLoginQuery();
+  const { renderTeamUrl } = useNavigation();
 
   return (
     <DataTable data={data}>
diff --git a/src/app/(main)/reports/[reportId]/BaseParameters.tsx b/src/app/(main)/reports/[reportId]/BaseParameters.tsx
index 879ed93b..fe0e803a 100644
--- a/src/app/(main)/reports/[reportId]/BaseParameters.tsx
+++ b/src/app/(main)/reports/[reportId]/BaseParameters.tsx
@@ -3,7 +3,7 @@ import { Column, Label } from '@umami/react-zen';
 import { parseDateRange } from '@/lib/date';
 import { DateFilter } from '@/components/input/DateFilter';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
-import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
+import { useMessages, useNavigation, useWebsiteQuery } from '@/components/hooks';
 import { ReportContext } from './Report';
 import styles from './BaseParameters.module.css';
 
@@ -22,11 +22,11 @@ export function BaseParameters({
 }: BaseParametersProps) {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
-  const { teamId } = useTeamUrl();
+  const { teamId } = useNavigation();
   const { parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};
   const { value, startDate, endDate } = dateRange || {};
-  const { data: website } = useWebsite(websiteId);
+  const { data: website } = useWebsiteQuery(websiteId);
   const { name } = website || {};
 
   const handleWebsiteSelect = (websiteId: string) => {
diff --git a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
index a1ffe2c8..7f547304 100644
--- a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { useFilters, useFormat, useMessages, useWebsiteValues } from '@/components/hooks';
+import { useFilters, useFormat, useMessages, useWebsiteValuesQuery } from '@/components/hooks';
 import { OPERATORS } from '@/lib/constants';
 import { isEqualsOperator } from '@/lib/params';
 import {
@@ -62,7 +62,7 @@ export function FieldFilterEditForm({
     data: values = [],
     isLoading,
     refetch,
-  } = useWebsiteValues({
+  } = useWebsiteValuesQuery({
     websiteId,
     type: name,
     startDate,
diff --git a/src/app/(main)/reports/[reportId]/Report.tsx b/src/app/(main)/reports/[reportId]/Report.tsx
index fa297337..661288f3 100644
--- a/src/app/(main)/reports/[reportId]/Report.tsx
+++ b/src/app/(main)/reports/[reportId]/Report.tsx
@@ -1,7 +1,7 @@
 import { createContext, ReactNode } from 'react';
 import { Loading } from '@umami/react-zen';
 import classNames from 'classnames';
-import { useReport } from '@/components/hooks';
+import { useReportQuery } from '@/components/hooks';
 import styles from './Report.module.css';
 
 export const ReportContext = createContext(null);
@@ -17,7 +17,7 @@ export function Report({
   children: ReactNode;
   className?: string;
 }) {
-  const report = useReport(reportId, defaultParameters);
+  const report = useReportQuery(reportId, defaultParameters);
 
   if (!report) {
     return reportId ? <Loading position="page" /> : null;
diff --git a/src/app/(main)/reports/[reportId]/ReportHeader.tsx b/src/app/(main)/reports/[reportId]/ReportHeader.tsx
index 9f38e556..981d67a8 100644
--- a/src/app/(main)/reports/[reportId]/ReportHeader.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportHeader.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { Icon, LoadingButton, InlineEditField, useToast } from '@umami/react-zen';
-import { useMessages, useApi, useNavigation, useTeamUrl } from '@/components/hooks';
+import { useMessages, useApi, useNavigation } from '@/components/hooks';
 import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
 import { REPORT_TYPES } from '@/lib/constants';
@@ -10,8 +10,7 @@ export function ReportHeader({ icon }) {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels, messages } = useMessages();
   const { toast } = useToast();
-  const { router } = useNavigation();
-  const { renderTeamUrl } = useTeamUrl();
+  const { router, renderTeamUrl } = useNavigation();
 
   const { post, useMutation } = useApi();
   const { mutate: create, isPending: isCreating } = useMutation({
diff --git a/src/app/(main)/reports/[reportId]/ReportPage.tsx b/src/app/(main)/reports/[reportId]/ReportPage.tsx
index 82161eaf..a864d4ed 100644
--- a/src/app/(main)/reports/[reportId]/ReportPage.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportPage.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useReport } from '@/components/hooks';
+import { useReportQuery } from '@/components/hooks';
 import { EventDataReport } from '../event-data/EventDataReport';
 import { FunnelReport } from '../funnel/FunnelReport';
 import { GoalsReport } from '../goals/GoalsReport';
@@ -21,7 +21,7 @@ const reports = {
 };
 
 export function ReportPage({ reportId }: { reportId: string }) {
-  const { report } = useReport(reportId);
+  const { report } = useReportQuery(reportId);
 
   if (!report) {
     return null;
diff --git a/src/app/(main)/reports/create/ReportTemplates.tsx b/src/app/(main)/reports/create/ReportTemplates.tsx
index 17a73f39..fe6bbe63 100644
--- a/src/app/(main)/reports/create/ReportTemplates.tsx
+++ b/src/app/(main)/reports/create/ReportTemplates.tsx
@@ -1,12 +1,12 @@
 import { Icon, Text, Row, Column, Grid } from '@umami/react-zen';
-import { useMessages, useTeamUrl } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { LinkButton } from '@/components/common/LinkButton';
 
 export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl } = useNavigation();
 
   const reports = [
     {
diff --git a/src/app/(main)/reports/event-data/EventDataTable.tsx b/src/app/(main)/reports/event-data/EventDataTable.tsx
index 0dd99db5..3c861c6c 100644
--- a/src/app/(main)/reports/event-data/EventDataTable.tsx
+++ b/src/app/(main)/reports/event-data/EventDataTable.tsx
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { GridTable, GridColumn } from '@umami/react-zen';
+import { DataTable, DataColumn } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import { ReportContext } from '../[reportId]/Report';
 
@@ -8,10 +8,10 @@ export function EventDataTable() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <GridTable data={report?.data || []}>
-      <GridColumn name="field" label={formatMessage(labels.field)} />
-      <GridColumn name="value" label={formatMessage(labels.value)} />
-      <GridColumn name="total" label={formatMessage(labels.total)} />
-    </GridTable>
+    <DataTable data={report?.data || []}>
+      <DataColumn id="field" label={formatMessage(labels.field)} />
+      <DataColumn id="value" label={formatMessage(labels.value)} />
+      <DataColumn id="total" label={formatMessage(labels.total)} />
+    </DataTable>
   );
 }
diff --git a/src/app/(main)/reports/journey/JourneyView.tsx b/src/app/(main)/reports/journey/JourneyView.tsx
index 9465f3ff..29eba2b3 100644
--- a/src/app/(main)/reports/journey/JourneyView.tsx
+++ b/src/app/(main)/reports/journey/JourneyView.tsx
@@ -1,5 +1,5 @@
 import { useContext, useMemo, useState } from 'react';
-import { TextOverflow, TooltipPopup } from '@umami/react-zen';
+import { TooltipTrigger, Tooltip, Focusable } from '@umami/react-zen';
 import { firstBy } from 'thenby';
 import classNames from 'classnames';
 import { useEscapeKey, useMessages } from '@/components/hooks';
@@ -192,13 +192,18 @@ export function JourneyView() {
                           onClick={() => handleClick(name, columnIndex, paths)}
                         >
                           <div className={styles.name} title={name}>
-                            <TextOverflow> {name}</TextOverflow>
+                            {name}
                           </div>
-                          <TooltipPopup label={dropOffPercent} isDisabled={!selected}>
-                            <div className={styles.count} title={nodeCount}>
-                              {formatLongNumber(nodeCount)}
-                            </div>
-                          </TooltipPopup>
+                          <TooltipTrigger isDisabled={!selected}>
+                            <Focusable>
+                              <div>{dropOffPercent}</div>
+                            </Focusable>
+                            <Tooltip>
+                              <div className={styles.count} title={nodeCount}>
+                                {formatLongNumber(nodeCount)}
+                              </div>
+                            </Tooltip>
+                          </TooltipTrigger>
                           {columnIndex < columns.length &&
                             lines.map(([fromIndex, nodeIndex], i) => {
                               const height =
diff --git a/src/app/(main)/reports/revenue/RevenueParameters.tsx b/src/app/(main)/reports/revenue/RevenueParameters.tsx
index cf23b00e..81278faf 100644
--- a/src/app/(main)/reports/revenue/RevenueParameters.tsx
+++ b/src/app/(main)/reports/revenue/RevenueParameters.tsx
@@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import { useRevenueValues } from '@/components/hooks/queries/useRevenueValues';
+import { useRevenueValuesQuery } from '@/components/hooks/queries/useRevenueValuesQuery';
 import { useContext } from 'react';
 import { Select, Form, FormButtons, FormField, ListItem, FormSubmitButton } from '@umami/react-zen';
 import { BaseParameters } from '../[reportId]/BaseParameters';
@@ -11,7 +11,7 @@ export function RevenueParameters() {
   const { id, parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};
   const queryEnabled = websiteId && dateRange;
-  const { data: values = [] } = useRevenueValues(
+  const { data: values = [] } = useRevenueValuesQuery(
     websiteId,
     dateRange?.startDate,
     dateRange?.endDate,
@@ -34,7 +34,7 @@ export function RevenueParameters() {
         rules={{ required: formatMessage(labels.required) }}
       >
         <Select items={values.map(item => item.currency)}>
-          {item => <ListItem key={item}>{item}</ListItem>}
+          {(item: any) => <ListItem key={item}>{item}</ListItem>}
         </Select>
       </FormField>
       <FormButtons>
diff --git a/src/app/(main)/reports/revenue/RevenueTable.tsx b/src/app/(main)/reports/revenue/RevenueTable.tsx
index 52f2c4d0..127fc6d1 100644
--- a/src/app/(main)/reports/revenue/RevenueTable.tsx
+++ b/src/app/(main)/reports/revenue/RevenueTable.tsx
@@ -1,7 +1,7 @@
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 import { useMessages } from '@/components/hooks';
 import { useContext } from 'react';
-import { GridColumn, GridTable } from '@umami/react-zen';
+import { DataColumn, DataTable } from '@umami/react-zen';
 import { ReportContext } from '../[reportId]/Report';
 import { formatLongCurrency } from '@/lib/format';
 
@@ -15,22 +15,22 @@ export function RevenueTable() {
   }
 
   return (
-    <GridTable data={data.table || []}>
-      <GridColumn name="currency" label={formatMessage(labels.currency)} alignment="end">
-        {row => row.currency}
-      </GridColumn>
-      <GridColumn name="currency" label={formatMessage(labels.total)} width="300px" alignment="end">
-        {row => formatLongCurrency(row.sum, row.currency)}
-      </GridColumn>
-      <GridColumn name="currency" label={formatMessage(labels.average)} alignment="end">
-        {row => formatLongCurrency(row.count ? row.sum / row.count : 0, row.currency)}
-      </GridColumn>
-      <GridColumn name="currency" label={formatMessage(labels.transactions)} alignment="end">
-        {row => row.count}
-      </GridColumn>
-      <GridColumn name="currency" label={formatMessage(labels.uniqueCustomers)} alignment="end">
-        {row => row.unique_count}
-      </GridColumn>
-    </GridTable>
+    <DataTable data={data.table || []}>
+      <DataColumn id="currency" label={formatMessage(labels.currency)} align="end">
+        {(row: any) => row.currency}
+      </DataColumn>
+      <DataColumn id="currency" label={formatMessage(labels.total)} align="end">
+        {(row: any) => formatLongCurrency(row.sum, row.currency)}
+      </DataColumn>
+      <DataColumn id="currency" label={formatMessage(labels.average)} align="end">
+        {(row: any) => formatLongCurrency(row.count ? row.sum / row.count : 0, row.currency)}
+      </DataColumn>
+      <DataColumn id="currency" label={formatMessage(labels.transactions)} align="end">
+        {(row: any) => row.count}
+      </DataColumn>
+      <DataColumn id="currency" label={formatMessage(labels.uniqueCustomers)} align="end">
+        {(row: any) => row.unique_count}
+      </DataColumn>
+    </DataTable>
   );
 }
diff --git a/src/app/(main)/settings/SettingsLayout.tsx b/src/app/(main)/settings/SettingsLayout.tsx
index 8e3f71ba..e945d70a 100644
--- a/src/app/(main)/settings/SettingsLayout.tsx
+++ b/src/app/(main)/settings/SettingsLayout.tsx
@@ -1,10 +1,10 @@
 'use client';
 import { ReactNode } from 'react';
-import { useLogin, useMessages } from '@/components/hooks';
+import { useLoginQuery, useMessages } from '@/components/hooks';
 import { MenuLayout } from '@/components/layout/MenuLayout';
 
 export function SettingsLayout({ children }: { children: ReactNode }) {
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
 
   const items = [
diff --git a/src/app/(main)/settings/teams/TeamLeaveButton.tsx b/src/app/(main)/settings/teams/TeamLeaveButton.tsx
index ca4f0944..040be5a2 100644
--- a/src/app/(main)/settings/teams/TeamLeaveButton.tsx
+++ b/src/app/(main)/settings/teams/TeamLeaveButton.tsx
@@ -1,4 +1,4 @@
-import { useLogin, useMessages, useModified } from '@/components/hooks';
+import { useLoginQuery, useMessages, useModified } from '@/components/hooks';
 import { useRouter } from 'next/navigation';
 import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
 import { TeamLeaveForm } from './TeamLeaveForm';
@@ -6,7 +6,7 @@ import { TeamLeaveForm } from './TeamLeaveForm';
 export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName: string }) {
   const { formatMessage, labels } = useMessages();
   const router = useRouter();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { touch } = useModified();
 
   const handleLeave = async () => {
diff --git a/src/app/(main)/settings/teams/TeamsDataTable.tsx b/src/app/(main)/settings/teams/TeamsDataTable.tsx
index a02c00c0..309faca6 100644
--- a/src/app/(main)/settings/teams/TeamsDataTable.tsx
+++ b/src/app/(main)/settings/teams/TeamsDataTable.tsx
@@ -1,6 +1,6 @@
 import { DataGrid } from '@/components/common/DataGrid';
 import { TeamsTable } from '@/app/(main)/settings/teams/TeamsTable';
-import { useLogin, useTeams } from '@/components/hooks';
+import { useLoginQuery, useTeamsQuery } from '@/components/hooks';
 import { ReactNode } from 'react';
 
 export function TeamsDataTable({
@@ -12,8 +12,8 @@ export function TeamsDataTable({
   showActions?: boolean;
   children?: ReactNode;
 }) {
-  const { user } = useLogin();
-  const queryResult = useTeams(user.id);
+  const { user } = useLoginQuery();
+  const queryResult = useTeamsQuery(user.id);
 
   return (
     <DataGrid queryResult={queryResult} renderEmpty={() => children}>
diff --git a/src/app/(main)/settings/teams/TeamsHeader.tsx b/src/app/(main)/settings/teams/TeamsHeader.tsx
index cbd61e6b..91211f95 100644
--- a/src/app/(main)/settings/teams/TeamsHeader.tsx
+++ b/src/app/(main)/settings/teams/TeamsHeader.tsx
@@ -1,13 +1,13 @@
 import { Row } from '@umami/react-zen';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { ROLES } from '@/lib/constants';
-import { useLogin, useMessages } from '@/components/hooks';
+import { useLoginQuery, useMessages } from '@/components/hooks';
 import { TeamsJoinButton } from './TeamsJoinButton';
 import { TeamsAddButton } from './TeamsAddButton';
 
 export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const cloudMode = !!process.env.cloudMode;
 
   return (
diff --git a/src/app/(main)/settings/users/UserDeleteButton.tsx b/src/app/(main)/settings/users/UserDeleteButton.tsx
index ab40880f..92f0031f 100644
--- a/src/app/(main)/settings/users/UserDeleteButton.tsx
+++ b/src/app/(main)/settings/users/UserDeleteButton.tsx
@@ -1,5 +1,5 @@
 import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
-import { useMessages, useLogin } from '@/components/hooks';
+import { useMessages, useLoginQuery } from '@/components/hooks';
 import { UserDeleteForm } from './UserDeleteForm';
 
 export function UserDeleteButton({
@@ -12,7 +12,7 @@ export function UserDeleteButton({
   onDelete?: () => void;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
 
   return (
     <DialogTrigger>
diff --git a/src/app/(main)/settings/users/UsersDataTable.tsx b/src/app/(main)/settings/users/UsersDataTable.tsx
index 86b4df27..f4173a32 100644
--- a/src/app/(main)/settings/users/UsersDataTable.tsx
+++ b/src/app/(main)/settings/users/UsersDataTable.tsx
@@ -1,5 +1,5 @@
 import { DataGrid } from '@/components/common/DataGrid';
-import { useUsers } from '@/components/hooks';
+import { useUsersQuery } from '@/components/hooks';
 import { UsersTable } from './UsersTable';
 import { ReactNode } from 'react';
 
@@ -10,7 +10,7 @@ export function UsersDataTable({
   showActions?: boolean;
   children?: ReactNode;
 }) {
-  const queryResult = useUsers();
+  const queryResult = useUsersQuery();
 
   return (
     <DataGrid queryResult={queryResult} renderEmpty={() => children}>
diff --git a/src/app/(main)/settings/users/[userId]/UserEditForm.tsx b/src/app/(main)/settings/users/[userId]/UserEditForm.tsx
index 05f8a077..3938a92d 100644
--- a/src/app/(main)/settings/users/[userId]/UserEditForm.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserEditForm.tsx
@@ -9,7 +9,7 @@ import {
   PasswordField,
   useToast,
 } from '@umami/react-zen';
-import { useApi, useLogin, useMessages, useModified } from '@/components/hooks';
+import { useApi, useLoginQuery, useMessages, useModified } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
 import { useContext } from 'react';
 import { UserContext } from './UserProvider';
@@ -18,7 +18,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
   const { formatMessage, labels, messages, getMessage } = useMessages();
   const { post, useMutation } = useApi();
   const user = useContext(UserContext);
-  const { user: login } = useLogin();
+  const { user: login } = useLoginQuery();
   const { toast } = useToast();
   const { touch } = useModified();
 
diff --git a/src/app/(main)/settings/users/[userId]/UserProvider.tsx b/src/app/(main)/settings/users/[userId]/UserProvider.tsx
index 0b87e63a..22b1b955 100644
--- a/src/app/(main)/settings/users/[userId]/UserProvider.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserProvider.tsx
@@ -1,12 +1,12 @@
 import { createContext, ReactNode, useEffect } from 'react';
 import { Loading } from '@umami/react-zen';
-import { useModified, useUser } from '@/components/hooks';
+import { useModified, useUserQuery } from '@/components/hooks';
 
 export const UserContext = createContext(null);
 
 export function UserProvider({ userId, children }: { userId: string; children: ReactNode }) {
   const { modified } = useModified(`user:${userId}`);
-  const { data: user, isFetching, isLoading, refetch } = useUser(userId);
+  const { data: user, isFetching, isLoading, refetch } = useUserQuery(userId);
 
   useEffect(() => {
     if (modified) {
diff --git a/src/app/(main)/settings/websites/WebsitesHeader.tsx b/src/app/(main)/settings/websites/WebsitesHeader.tsx
index 0d32fbe0..997cae8b 100644
--- a/src/app/(main)/settings/websites/WebsitesHeader.tsx
+++ b/src/app/(main)/settings/websites/WebsitesHeader.tsx
@@ -1,4 +1,4 @@
-import { useMessages, useTeamUrl } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { WebsiteAddButton } from './WebsiteAddButton';
 
@@ -8,7 +8,7 @@ export interface WebsitesHeaderProps {
 
 export function WebsitesHeader({ allowCreate = true }: WebsitesHeaderProps) {
   const { formatMessage, labels } = useMessages();
-  const { teamId } = useTeamUrl();
+  const { teamId } = useNavigation();
 
   return (
     <PageHeader title={formatMessage(labels.websites)}>
diff --git a/src/app/(main)/settings/websites/WebsitesSettingsPage.tsx b/src/app/(main)/settings/websites/WebsitesSettingsPage.tsx
index a5bdfe30..5ef26797 100644
--- a/src/app/(main)/settings/websites/WebsitesSettingsPage.tsx
+++ b/src/app/(main)/settings/websites/WebsitesSettingsPage.tsx
@@ -1,11 +1,11 @@
 'use client';
-import { useLogin } from '@/components/hooks';
+import { useLoginQuery } from '@/components/hooks';
 import { WebsitesDataTable } from './WebsitesDataTable';
 import { WebsitesHeader } from './WebsitesHeader';
 import { ROLES } from '@/lib/constants';
 
 export function WebsitesSettingsPage({ teamId }: { teamId: string }) {
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const canCreate = user.role !== ROLES.viewOnly;
 
   return (
diff --git a/src/app/(main)/settings/websites/WebsitesTable.tsx b/src/app/(main)/settings/websites/WebsitesTable.tsx
index 6211b00b..087dd6aa 100644
--- a/src/app/(main)/settings/websites/WebsitesTable.tsx
+++ b/src/app/(main)/settings/websites/WebsitesTable.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Row, Text, Icon, Icons, DataTable, DataColumn, Button } from '@umami/react-zen';
 import Link from 'next/link';
-import { useMessages, useTeamUrl } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 
 export interface WebsitesTableProps {
   data: any[];
@@ -20,7 +20,7 @@ export function WebsitesTable({
   children,
 }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl } = useNavigation();
 
   if (!data?.length) {
     return children;
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
index 1db2a441..b64468f1 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
@@ -1,6 +1,12 @@
 import { Button, Modal, DialogTrigger, Dialog, Column } from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
-import { useLogin, useMessages, useModified, useTeams, useTeamUrl } from '@/components/hooks';
+import {
+  useLoginQuery,
+  useMessages,
+  useModified,
+  useTeamsQuery,
+  useNavigation,
+} from '@/components/hooks';
 import { WebsiteDeleteForm } from './WebsiteDeleteForm';
 import { WebsiteResetForm } from './WebsiteResetForm';
 import { WebsiteTransferForm } from './WebsiteTransferForm';
@@ -9,11 +15,11 @@ import { ROLES } from '@/lib/constants';
 
 export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { touch } = useModified();
-  const { teamId, renderTeamUrl } = useTeamUrl();
+  const { teamId, renderTeamUrl } = useNavigation();
   const router = useRouter();
-  const { result } = useTeams(user.id);
+  const { result } = useTeamsQuery(user.id);
   const canTransferWebsite =
     (
       !teamId &&
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx
index 719018bd..e4971adb 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx
@@ -10,7 +10,7 @@ import {
   ListItem,
   Text,
 } from '@umami/react-zen';
-import { useApi, useLogin, useMessages, useTeams } from '@/components/hooks';
+import { useApi, useLoginQuery, useMessages, useTeamsQuery } from '@/components/hooks';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { ROLES } from '@/lib/constants';
 
@@ -23,7 +23,7 @@ export function WebsiteTransferForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const website = useContext(WebsiteContext);
   const [teamId, setTeamId] = useState<string>(null);
   const { formatMessage, labels, messages } = useMessages();
@@ -31,7 +31,7 @@ export function WebsiteTransferForm({
   const { mutate, error } = useMutation({
     mutationFn: (data: any) => post(`/websites/${websiteId}/transfer`, data),
   });
-  const { result, query } = useTeams(user.id);
+  const { result, query } = useTeamsQuery(user.id);
   const isTeamWebsite = !!website?.teamId;
 
   const items = result.data.filter(({ teamUser }) =>
diff --git a/src/app/(main)/teams/[teamId]/TeamProvider.tsx b/src/app/(main)/teams/[teamId]/TeamProvider.tsx
index e2cba00b..178b73d6 100644
--- a/src/app/(main)/teams/[teamId]/TeamProvider.tsx
+++ b/src/app/(main)/teams/[teamId]/TeamProvider.tsx
@@ -1,13 +1,13 @@
 'use client';
 import { createContext, ReactNode, useEffect } from 'react';
-import { useTeam, useModified } from '@/components/hooks';
+import { useTeamQuery, useModified } from '@/components/hooks';
 import { Loading } from '@umami/react-zen';
 
 export const TeamContext = createContext(null);
 
 export function TeamProvider({ teamId, children }: { teamId?: string; children: ReactNode }) {
   const { modified } = useModified(`teams`);
-  const { data: team, isLoading, isFetching, refetch } = useTeam(teamId);
+  const { data: team, isLoading, isFetching, refetch } = useTeamQuery(teamId);
 
   useEffect(() => {
     if (teamId && modified) {
diff --git a/src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx b/src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx
index ddc58a31..b4b7abaa 100644
--- a/src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx
@@ -1,11 +1,11 @@
 'use client';
 import { ReactNode } from 'react';
-import { useMessages, useTeamUrl } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { MenuLayout } from '@/components/layout/MenuLayout';
 
 export function TeamSettingsLayout({ children }: { children: ReactNode }) {
   const { formatMessage, labels } = useMessages();
-  const { teamId } = useTeamUrl();
+  const { teamId } = useNavigation();
 
   const items = [
     {
diff --git a/src/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable.tsx b/src/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable.tsx
index 339c1f3e..32dd6c4a 100644
--- a/src/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable.tsx
@@ -1,6 +1,6 @@
 import { DataGrid } from '@/components/common/DataGrid';
 import { TeamMembersTable } from './TeamMembersTable';
-import { useTeamMembers } from '@/components/hooks';
+import { useTeamMembersQuery } from '@/components/hooks';
 
 export function TeamMembersDataTable({
   teamId,
@@ -9,7 +9,7 @@ export function TeamMembersDataTable({
   teamId: string;
   allowEdit?: boolean;
 }) {
-  const queryResult = useTeamMembers(teamId);
+  const queryResult = useTeamMembersQuery(teamId);
 
   return (
     <DataGrid queryResult={queryResult}>
diff --git a/src/app/(main)/teams/[teamId]/settings/members/TeamMembersPage.tsx b/src/app/(main)/teams/[teamId]/settings/members/TeamMembersPage.tsx
index 246f87fd..01b15d35 100644
--- a/src/app/(main)/teams/[teamId]/settings/members/TeamMembersPage.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/members/TeamMembersPage.tsx
@@ -2,13 +2,13 @@
 import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
 import { TeamMembersDataTable } from './TeamMembersDataTable';
 import { PageHeader } from '@/components/layout/PageHeader';
-import { useLogin, useMessages } from '@/components/hooks';
+import { useLoginQuery, useMessages } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
 import { useContext } from 'react';
 
 export function TeamMembersPage({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
 
   const canEdit =
diff --git a/src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx b/src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx
index 23f38d40..25f6982c 100644
--- a/src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx
@@ -1,5 +1,5 @@
 import { DataColumn, DataTable } from '@umami/react-zen';
-import { useMessages, useLogin } from '@/components/hooks';
+import { useMessages, useLoginQuery } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
 import { TeamMemberRemoveButton } from './TeamMemberRemoveButton';
 import { TeamMemberEditButton } from './TeamMemberEditButton';
@@ -14,7 +14,7 @@ export function TeamMembersTable({
   allowEdit: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
 
   const roles = {
     [ROLES.teamOwner]: formatMessage(labels.teamOwner),
diff --git a/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx b/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
index 18c53c34..680088f5 100644
--- a/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
@@ -1,5 +1,5 @@
 import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
-import { useLogin, useMessages } from '@/components/hooks';
+import { useLoginQuery, useMessages } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { ROLES } from '@/lib/constants';
@@ -13,7 +13,7 @@ import { Panel } from '@/components/layout/Panel';
 export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const [tab, setTab] = useState('details');
 
   const isTeamOwner =
diff --git a/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable.tsx b/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable.tsx
index 68f853ac..bc7623de 100644
--- a/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable.tsx
@@ -1,5 +1,5 @@
 import { DataGrid } from '@/components/common/DataGrid';
-import { useTeamWebsites } from '@/components/hooks';
+import { useTeamWebsitesQuery } from '@/components/hooks';
 import { TeamWebsitesTable } from './TeamWebsitesTable';
 
 export function TeamWebsitesDataTable({
@@ -9,7 +9,7 @@ export function TeamWebsitesDataTable({
   teamId: string;
   allowEdit?: boolean;
 }) {
-  const queryResult = useTeamWebsites(teamId);
+  const queryResult = useTeamWebsitesQuery(teamId);
 
   return (
     <DataGrid queryResult={queryResult}>
diff --git a/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesPage.tsx b/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesPage.tsx
index aca4b80e..46587bf8 100644
--- a/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesPage.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesPage.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
 import { WebsiteAddButton } from '@/app/(main)/settings/websites/WebsiteAddButton';
-import { useLogin, useMessages } from '@/components/hooks';
+import { useLoginQuery, useMessages } from '@/components/hooks';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
 import { ROLES } from '@/lib/constants';
@@ -10,7 +10,7 @@ import { useContext } from 'react';
 export function TeamWebsitesPage({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
 
   const canEdit =
     !!team?.teamUser?.find(
diff --git a/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx b/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx
index dc175d2e..798f6cbc 100644
--- a/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx
@@ -1,5 +1,5 @@
 import { DataColumn, DataTable, Icon, Text } from '@umami/react-zen';
-import { useLogin, useMessages } from '@/components/hooks';
+import { useLoginQuery, useMessages } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { LinkButton } from '@/components/common/LinkButton';
 
@@ -12,7 +12,7 @@ export function TeamWebsitesTable({
   data: any[];
   allowEdit?: boolean;
 }) {
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
 
   return (
diff --git a/src/app/(main)/websites/WebsitesPage.tsx b/src/app/(main)/websites/WebsitesPage.tsx
index f2c8c6bd..6a611722 100644
--- a/src/app/(main)/websites/WebsitesPage.tsx
+++ b/src/app/(main)/websites/WebsitesPage.tsx
@@ -1,10 +1,10 @@
 'use client';
 import { WebsitesHeader } from '@/app/(main)/settings/websites/WebsitesHeader';
 import { WebsitesDataTable } from '@/app/(main)/settings/websites/WebsitesDataTable';
-import { useTeamUrl } from '@/components/hooks';
+import { useNavigation } from '@/components/hooks';
 
 export function WebsitesPage() {
-  const { teamId } = useTeamUrl();
+  const { teamId } = useNavigation();
 
   return (
     <>
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
index a82e9bc3..00aecebf 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { PageviewsChart } from '@/components/metrics/PageviewsChart';
-import { useWebsitePageviews } from '@/components/hooks/queries/useWebsitePageviews';
+import { useWebsitePageviewsQuery } from '@/components/hooks/queries/useWebsitePageviewsQuery';
 import { useDateRange } from '@/components/hooks';
 
 export function WebsiteChart({
@@ -12,7 +12,10 @@ export function WebsiteChart({
 }) {
   const { dateRange, dateCompare } = useDateRange(websiteId);
   const { startDate, endDate, unit, value } = dateRange;
-  const { data, isLoading } = useWebsitePageviews(websiteId, compareMode ? dateCompare : undefined);
+  const { data, isLoading } = useWebsitePageviewsQuery(
+    websiteId,
+    compareMode ? dateCompare : undefined,
+  );
   const { pageviews, sessions, compare } = (data || {}) as any;
 
   const chartData = useMemo(() => {
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx
index 19f1d2ba..d0bb733b 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx
@@ -5,7 +5,7 @@ import { WebsiteChart } from './WebsiteChart';
 import { useDashboard } from '@/store/dashboard';
 import { WebsiteHeader } from './WebsiteHeader';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
-import { useMessages, useTeamUrl } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';
 
 export function WebsiteChartList({
@@ -19,7 +19,7 @@ export function WebsiteChartList({
 }) {
   const { formatMessage, labels } = useMessages();
   const { websiteOrder, websiteActive } = useDashboard();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl } = useNavigation();
 
   const ordered = useMemo(() => {
     return websites
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.module.css b/src/app/(main)/websites/[websiteId]/WebsiteHeader.module.css
deleted file mode 100644
index 90c3f5cb..00000000
--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.module.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.header {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 20px 0px;
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  font-size: 24px;
-  font-weight: 700;
-  overflow: hidden;
-  height: 60px;
-}
-
-.actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 30px;
-  min-height: 0;
-  margin-left: auto;
-}
-
-.selected {
-  font-weight: bold;
-}
-
-.links {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-@media only screen and (max-width: 768px) {
-  .header {
-    grid-template-columns: 1fr;
-  }
-
-  .links {
-    justify-content: space-evenly;
-    flex: 1;
-    border-bottom: 1px solid var(--base300);
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-  }
-
-  .label {
-    display: none;
-  }
-
-  .icon,
-  .icon svg {
-    width: 20px;
-    height: 20px;
-  }
-}
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
index dbd23495..040054df 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
@@ -1,99 +1,31 @@
 import { ReactNode } from 'react';
-import { Button, Icon, Text } from '@umami/react-zen';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import classNames from 'classnames';
+import { Row, Heading } from '@umami/react-zen';
 import { Favicon } from '@/components/common/Favicon';
-import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { useWebsiteQuery } from '@/components/hooks';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
-import styles from './WebsiteHeader.module.css';
+import { WebsiteTabs } from '@/app/(main)/websites/[websiteId]/WebsiteTabs';
 
 export function WebsiteHeader({
   websiteId,
-  showLinks = true,
   children,
 }: {
   websiteId: string;
-  showLinks?: boolean;
   children?: ReactNode;
 }) {
-  const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
-  const pathname = usePathname();
-  const { data: website } = useWebsite(websiteId);
+  const { data: website } = useWebsiteQuery(websiteId);
   const { name, domain } = website || {};
 
-  const links = [
-    {
-      label: formatMessage(labels.overview),
-      icon: <Icons.Overview />,
-      path: '',
-    },
-    {
-      label: formatMessage(labels.events),
-      icon: <Icons.Lightning />,
-      path: '/events',
-    },
-    {
-      label: formatMessage(labels.sessions),
-      icon: <Icons.User />,
-      path: '/sessions',
-    },
-    {
-      label: formatMessage(labels.realtime),
-      icon: <Icons.Clock />,
-      path: '/realtime',
-    },
-    {
-      label: formatMessage(labels.compare),
-      icon: <Icons.Compare />,
-      path: '/compare',
-    },
-    {
-      label: formatMessage(labels.reports),
-      icon: <Icons.Reports />,
-      path: '/reports',
-    },
-  ];
-
   return (
-    <div className={styles.header}>
-      <div className={styles.title}>
+    <>
+      <Row alignItems="center" gap="3" marginY="6">
         <Favicon domain={domain} />
-        <Text>{name}</Text>
-        <ActiveUsers websiteId={websiteId} />
-      </div>
-      <div className={styles.actions}>
-        {showLinks && (
-          <div className={styles.links}>
-            {links.map(({ label, icon, path }) => {
-              const selected = path
-                ? pathname.includes(path)
-                : pathname.match(/^\/websites\/[\w-]+$/);
-
-              return (
-                <Link
-                  key={label}
-                  href={renderTeamUrl(`/websites/${websiteId}${path}`)}
-                  shallow={true}
-                >
-                  <Button
-                    variant="quiet"
-                    className={classNames({
-                      [styles.selected]: selected,
-                    })}
-                  >
-                    <Icon className={styles.icon}>{icon}</Icon>
-                    <Text className={styles.label}>{label}</Text>
-                  </Button>
-                </Link>
-              );
-            })}
-          </div>
-        )}
+        <Heading>
+          {name}
+          <ActiveUsers websiteId={websiteId} />
+        </Heading>
         {children}
-      </div>
-    </div>
+      </Row>
+      <WebsiteTabs websiteId={websiteId} />
+    </>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
index a4b71701..912aeee4 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@@ -5,7 +5,7 @@ import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatShortTime, formatLongNumber } from '@/lib/format';
-import { useWebsiteStats } from '@/components/hooks/queries/useWebsiteStats';
+import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery';
 import { useWebsites, setWebsiteDateCompare } from '@/store/websites';
 import { WebsiteFilterButton } from './WebsiteFilterButton';
 import styles from './WebsiteMetricsBar.module.css';
@@ -26,8 +26,8 @@ export function WebsiteMetricsBar({
   const { dateRange } = useDateRange(websiteId);
   const { formatMessage, labels } = useMessages();
   const dateCompare = useWebsites(state => state[websiteId]?.dateCompare);
-  const { ref, isSticky } = useSticky({ enabled: sticky });
-  const { data, isLoading, isFetched, error } = useWebsiteStats(
+  const { ref } = useSticky({ enabled: sticky });
+  const { data, isLoading, isFetched, error } = useWebsiteStatsQuery(
     websiteId,
     compareMode && dateCompare,
   );
@@ -82,13 +82,7 @@ export function WebsiteMetricsBar({
   ];
 
   return (
-    <div
-      ref={ref}
-      className={classNames(styles.container, {
-        [styles.sticky]: sticky,
-        [styles.isSticky]: sticky && isSticky,
-      })}
-    >
+    <div ref={ref} className={classNames(styles.container)}>
       <div>
         <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
           {metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx b/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx
index 4c11e2e9..27cbe386 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { createContext, ReactNode, useEffect } from 'react';
-import { useModified, useWebsite } from '@/components/hooks';
+import { useModified, useWebsiteQuery } from '@/components/hooks';
 import { Loading } from '@umami/react-zen';
 
 export const WebsiteContext = createContext(null);
@@ -13,7 +13,7 @@ export function WebsiteProvider({
   children: ReactNode;
 }) {
   const { modified } = useModified(`website:${websiteId}`);
-  const { data: website, isFetching, isLoading, refetch } = useWebsite(websiteId);
+  const { data: website, isFetching, isLoading, refetch } = useWebsiteQuery(websiteId);
 
   useEffect(() => {
     if (modified) {
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
new file mode 100644
index 00000000..373b3b8e
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
@@ -0,0 +1,58 @@
+import { Tabs, TabList, Tab, Icon, Text, Row } from '@umami/react-zen';
+import { Icons } from '@/components/icons';
+import { useMessages, useNavigation } from '@/components/hooks';
+
+export function WebsiteTabs({ websiteId }: { websiteId: string }) {
+  const { formatMessage, labels } = useMessages();
+  const { renderTeamUrl } = useNavigation();
+
+  const links = [
+    {
+      label: formatMessage(labels.overview),
+      icon: <Icons.Overview />,
+      path: '',
+    },
+    {
+      label: formatMessage(labels.events),
+      icon: <Icons.Lightning />,
+      path: '/events',
+    },
+    {
+      label: formatMessage(labels.sessions),
+      icon: <Icons.User />,
+      path: '/sessions',
+    },
+    {
+      label: formatMessage(labels.realtime),
+      icon: <Icons.Clock />,
+      path: '/realtime',
+    },
+    {
+      label: formatMessage(labels.compare),
+      icon: <Icons.Compare />,
+      path: '/compare',
+    },
+    {
+      label: formatMessage(labels.reports),
+      icon: <Icons.Reports />,
+      path: '/reports',
+    },
+  ].map((link, index) => ({ ...link, id: index }));
+
+  return (
+    <Tabs>
+      <TabList items={links}>
+        {({ label, icon, path }) => {
+          return (
+            <Tab key={path} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}>
+              <Row gap="3" alignItems="center">
+                <Icon fillColor="currentColor">{icon}</Icon>
+                <Text>{label}</Text>
+              </Row>
+            </Tab>
+          );
+        }}
+      </TabList>
+    </Tabs>
+  );
+}
diff --git a/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx b/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
index 53443397..e4cc16a3 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
@@ -1,5 +1,9 @@
-import { GridColumn, GridTable } from '@umami/react-zen';
-import { useEventDataProperties, useEventDataValues, useMessages } from '@/components/hooks';
+import { DataColumn, DataTable } from '@umami/react-zen';
+import {
+  useEventDataPropertiesQuery,
+  useEventDataValuesQuery,
+  useMessages,
+} from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PieChart } from '@/components/charts/PieChart';
 import { useState } from 'react';
@@ -10,8 +14,8 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
   const [propertyName, setPropertyName] = useState('');
   const [eventName, setEventName] = useState('');
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useEventDataProperties(websiteId);
-  const { data: values } = useEventDataValues(websiteId, eventName, propertyName);
+  const { data, isLoading, isFetched, error } = useEventDataPropertiesQuery(websiteId);
+  const { data: values } = useEventDataValuesQuery(websiteId, eventName, propertyName);
   const chartData =
     propertyName && values
       ? {
@@ -34,23 +38,23 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
   return (
     <LoadingPanel isLoading={isLoading} isFetched={isFetched} data={data} error={error}>
       <div className={styles.container}>
-        <GridTable data={data} cardMode={false} className={styles.table}>
-          <GridColumn name="eventName" label={formatMessage(labels.name)}>
+        <DataTable data={data} cardMode={false} className={styles.table}>
+          <DataColumn name="eventName" label={formatMessage(labels.name)}>
             {row => (
               <div className={styles.link} onClick={() => handleRowClick(row)}>
                 {row.eventName}
               </div>
             )}
-          </GridColumn>
-          <GridColumn name="propertyName" label={formatMessage(labels.property)}>
+          </DataColumn>
+          <DataColumn name="propertyName" label={formatMessage(labels.property)}>
             {row => (
               <div className={styles.link} onClick={() => handleRowClick(row)}>
                 {row.propertyName}
               </div>
             )}
-          </GridColumn>
-          <GridColumn name="total" label={formatMessage(labels.count)} alignment="end" />
-        </GridTable>
+          </DataColumn>
+          <DataColumn name="total" label={formatMessage(labels.count)} alignment="end" />
+        </DataTable>
         {propertyName && (
           <div className={styles.chart}>
             <div className={styles.title}>{propertyName}</div>
diff --git a/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
index d17406c7..d8c23476 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
@@ -1,4 +1,4 @@
-import { useWebsiteEvents } from '@/components/hooks';
+import { useWebsiteEventsQuery } from '@/components/hooks';
 import { EventsTable } from './EventsTable';
 import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';
@@ -10,7 +10,7 @@ export function EventsDataTable({
   teamId?: string;
   children?: ReactNode;
 }) {
-  const queryResult = useWebsiteEvents(websiteId);
+  const queryResult = useWebsiteEventsQuery(websiteId);
 
   return (
     <DataGrid queryResult={queryResult} allowSearch={true} autoFocus={false}>
diff --git a/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx
index 9aa92140..3099898f 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx
@@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import { useWebsiteSessionStats } from '@/components/hooks/queries/useWebsiteSessionStats';
+import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsiteSessionStatsQuery';
 import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
@@ -8,7 +8,7 @@ import { Flexbox } from '@umami/react-zen';
 
 export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
+  const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
 
   return (
     <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
diff --git a/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx b/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
index 17f67e86..dd3f823d 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
@@ -6,7 +6,7 @@ import { EventsChart } from '@/components/metrics/EventsChart';
 import { GridRow } from '@/components/layout/Grid';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { useMessages } from '@/components/hooks';
-import { Item, Tabs } from '@umami/react-zen';
+import { TabList, Tab, Tabs } from '@umami/react-zen';
 import { useState } from 'react';
 import { EventProperties } from './EventProperties';
 
@@ -30,11 +30,13 @@ export function EventsPage({ websiteId }) {
       <div>
         <Tabs
           selectedKey={tab}
-          onSelect={(value: any) => setTab(value)}
+          onSelectionChange={(value: any) => setTab(value)}
           style={{ marginBottom: 30 }}
         >
-          <Item key="activity">{formatMessage(labels.activity)}</Item>
-          <Item key="properties">{formatMessage(labels.properties)}</Item>
+          <TabList>
+            <Tab key="activity">{formatMessage(labels.activity)}</Tab>
+            <Tab key="properties">{formatMessage(labels.properties)}</Tab>
+          </TabList>
         </Tabs>
         {tab === 'activity' && <EventsDataTable websiteId={websiteId} />}
         {tab === 'properties' && <EventProperties websiteId={websiteId} />}
diff --git a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
index b5c9165f..8428ff60 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
@@ -1,5 +1,5 @@
-import { GridTable, GridColumn, Icon } from '@umami/react-zen';
-import { useMessages, useTeamUrl, useTimezone } from '@/components/hooks';
+import { DataTable, DataColumn, Icon } from '@umami/react-zen';
+import { useMessages, useNavigation, useTimezone } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
@@ -8,23 +8,23 @@ import { Icons } from '@/components/icons';
 export function EventsTable({ data = [] }) {
   const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl } = useNavigation();
 
   if (data.length === 0) {
     return <Empty />;
   }
 
   return (
-    <GridTable data={data}>
-      <GridColumn name="session" label={formatMessage(labels.session)} width={'100px'}>
-        {row => (
+    <DataTable data={data}>
+      <DataColumn id="session" label={formatMessage(labels.session)}>
+        {(row: any) => (
           <Link href={renderTeamUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
             <Avatar seed={row.sessionId} size={64} />
           </Link>
         )}
-      </GridColumn>
-      <GridColumn name="event" label={formatMessage(labels.event)}>
-        {row => {
+      </DataColumn>
+      <DataColumn id="event" label={formatMessage(labels.event)}>
+        {(row: any) => {
           return (
             <>
               <Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
@@ -33,10 +33,10 @@ export function EventsTable({ data = [] }) {
             </>
           );
         }}
-      </GridColumn>
-      <GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}>
-        {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
-      </GridColumn>
-    </GridTable>
+      </DataColumn>
+      <DataColumn id="created" label={formatMessage(labels.created)}>
+        {(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')}
+      </DataColumn>
+    </DataTable>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx
index 12528f62..0e130f3c 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx
@@ -1,5 +1,4 @@
 import { Key, useContext, useState } from 'react';
-import { ButtonGroup, Button, Flexbox } from '@umami/react-zen';
 import thenby from 'thenby';
 import { percentFilter } from '@/lib/filters';
 import { ListTable } from '@/components/metrics/ListTable';
@@ -7,6 +6,7 @@ import { FILTER_PAGES, FILTER_REFERRERS } from '@/lib/constants';
 import { useMessages } from '@/components/hooks';
 import { RealtimeData } from '@/lib/types';
 import { WebsiteContext } from '../WebsiteProvider';
+import { FilterButtons } from '@/components/common/FilterButtons';
 
 export function RealtimeUrls({ data }: { data: RealtimeData }) {
   const website = useContext(WebsiteContext);
@@ -17,10 +17,12 @@ export function RealtimeUrls({ data }: { data: RealtimeData }) {
 
   const buttons = [
     {
+      id: 1,
       label: formatMessage(labels.referrers),
       key: FILTER_REFERRERS,
     },
     {
+      id: 2,
       label: formatMessage(labels.pages),
       key: FILTER_PAGES,
     },
@@ -61,11 +63,7 @@ export function RealtimeUrls({ data }: { data: RealtimeData }) {
 
   return (
     <>
-      <Flexbox justifyContent="center">
-        <ButtonGroup items={buttons} selectedKey={filter} onSelect={setFilter}>
-          {({ key, label }) => <Button key={key}>{label}</Button>}
-        </ButtonGroup>
-      </Flexbox>
+      <FilterButtons items={buttons} onSelect={setFilter} />
       {filter === FILTER_REFERRERS && (
         <ListTable
           title={formatMessage(labels.referrers)}
diff --git a/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx b/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
index 202c6e77..5753aaf2 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
@@ -4,7 +4,7 @@ import { Grid, GridRow } from '@/components/layout/Grid';
 import { Page } from '@/components/layout/Page';
 import { RealtimeChart } from '@/components/metrics/RealtimeChart';
 import { WorldMap } from '@/components/metrics/WorldMap';
-import { useRealtime } from '@/components/hooks';
+import { useRealtimeQuery } from '@/components/hooks';
 import { RealtimeLog } from './RealtimeLog';
 import { RealtimeHeader } from './RealtimeHeader';
 import { RealtimeUrls } from './RealtimeUrls';
@@ -13,7 +13,7 @@ import { WebsiteHeader } from '../WebsiteHeader';
 import { percentFilter } from '@/lib/filters';
 
 export function WebsiteRealtimePage({ websiteId }) {
-  const { data, isLoading, error } = useRealtime(websiteId);
+  const { data, isLoading, error } = useRealtimeQuery(websiteId);
 
   if (isLoading || error) {
     return <Page isLoading={isLoading} error={error} />;
diff --git a/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx b/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
index 20e02a6a..37429dd1 100644
--- a/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
@@ -1,13 +1,13 @@
 'use client';
 import Link from 'next/link';
 import { Button, Flexbox, Icon, Icons, Text } from '@umami/react-zen';
-import { useMessages, useTeamUrl } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { WebsiteHeader } from '../WebsiteHeader';
 import { ReportsDataTable } from '@/app/(main)/reports/ReportsDataTable';
 
 export function WebsiteReportsPage({ websiteId }) {
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl } = useNavigation();
 
   return (
     <>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
index 7e2c5a9d..d4ad4099 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
@@ -1,5 +1,9 @@
-import { GridColumn, GridTable } from '@umami/react-zen';
-import { useSessionDataProperties, useSessionDataValues, useMessages } from '@/components/hooks';
+import { DataColumn, DataTable } from '@umami/react-zen';
+import {
+  useSessionDataPropertiesQuery,
+  useSessionDataValuesQuery,
+  useMessages,
+} from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PieChart } from '@/components/charts/PieChart';
 import { useState } from 'react';
@@ -9,8 +13,8 @@ import styles from './SessionProperties.module.css';
 export function SessionProperties({ websiteId }: { websiteId: string }) {
   const [propertyName, setPropertyName] = useState('');
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useSessionDataProperties(websiteId);
-  const { data: values } = useSessionDataValues(websiteId, propertyName);
+  const { data, isLoading, isFetched, error } = useSessionDataPropertiesQuery(websiteId);
+  const { data: values } = useSessionDataValuesQuery(websiteId, propertyName);
   const chartData =
     propertyName && values
       ? {
@@ -28,16 +32,16 @@ export function SessionProperties({ websiteId }: { websiteId: string }) {
   return (
     <LoadingPanel isLoading={isLoading} isFetched={isFetched} data={data} error={error}>
       <div className={styles.container}>
-        <GridTable data={data} cardMode={false} className={styles.table}>
-          <GridColumn name="propertyName" label={formatMessage(labels.property)}>
-            {row => (
+        <DataTable data={data} className={styles.table}>
+          <DataColumn id="propertyName" label={formatMessage(labels.property)}>
+            {(row: any) => (
               <div className={styles.link} onClick={() => setPropertyName(row.propertyName)}>
                 {row.propertyName}
               </div>
             )}
-          </GridColumn>
-          <GridColumn name="total" label={formatMessage(labels.count)} alignment="end" />
-        </GridTable>
+          </DataColumn>
+          <DataColumn id="total" label={formatMessage(labels.count)} align="end" />
+        </DataTable>
         {propertyName && (
           <div className={styles.chart}>
             <div className={styles.title}>{propertyName}</div>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx
index 6cc7eff4..65ef00d7 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx
@@ -1,4 +1,4 @@
-import { useWebsiteSessions } from '@/components/hooks';
+import { useWebsiteSessionsQuery } from '@/components/hooks';
 import { SessionsTable } from './SessionsTable';
 import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';
@@ -11,7 +11,7 @@ export function SessionsDataTable({
   teamId?: string;
   children?: ReactNode;
 }) {
-  const queryResult = useWebsiteSessions(websiteId);
+  const queryResult = useWebsiteSessionsQuery(websiteId);
 
   return (
     <DataGrid queryResult={queryResult} allowSearch={false} renderEmpty={() => children}>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
index b1091010..717b2655 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
@@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import { useWebsiteSessionStats } from '@/components/hooks/queries/useWebsiteSessionStats';
+import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsiteSessionStatsQuery';
 import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
@@ -8,7 +8,7 @@ import { Flexbox } from '@umami/react-zen';
 
 export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
+  const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
 
   return (
     <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
index 5f18a9f0..16b2d309 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
@@ -5,7 +5,7 @@ import { SessionsMetricsBar } from './SessionsMetricsBar';
 import { SessionProperties } from './SessionProperties';
 import { WorldMap } from '@/components/metrics/WorldMap';
 import { GridRow } from '@/components/layout/Grid';
-import { Item, Tabs } from '@umami/react-zen';
+import { TabList, Tab, Tabs } from '@umami/react-zen';
 import { useState } from 'react';
 import { useMessages } from '@/components/hooks';
 import { SessionsWeekly } from './SessionsWeekly';
@@ -22,9 +22,15 @@ export function SessionsPage({ websiteId }) {
         <WorldMap websiteId={websiteId} />
         <SessionsWeekly websiteId={websiteId} />
       </GridRow>
-      <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
-        <Item key="activity">{formatMessage(labels.activity)}</Item>
-        <Item key="properties">{formatMessage(labels.properties)}</Item>
+      <Tabs
+        selectedKey={tab}
+        onSelectionChange={(value: any) => setTab(value)}
+        style={{ marginBottom: 30 }}
+      >
+        <TabList>
+          <Tab key="activity">{formatMessage(labels.activity)}</Tab>
+          <Tab key="properties">{formatMessage(labels.properties)}</Tab>
+        </TabList>
       </Tabs>
       {tab === 'activity' && <SessionsDataTable websiteId={websiteId} />}
       {tab === 'properties' && <SessionProperties websiteId={websiteId} />}
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
index d9c21319..4db25fbc 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { GridColumn, GridTable } from '@umami/react-zen';
+import { DataColumn, DataTable } from '@umami/react-zen';
 import { useFormat, useMessages, useTimezone } from '@/components/hooks';
 import { Avatar } from '@/components/common/Avatar';
 import styles from './SessionsTable.module.css';
@@ -11,48 +11,48 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
   const { formatValue } = useFormat();
 
   return (
-    <GridTable data={data}>
-      <GridColumn name="id" label={formatMessage(labels.session)} width="100px">
-        {row => (
+    <DataTable data={data}>
+      <DataColumn id="id" label={formatMessage(labels.session)}>
+        {(row: any) => (
           <Link href={`sessions/${row.id}`} className={styles.link}>
             <Avatar key={row.id} seed={row.id} size={64} />
           </Link>
         )}
-      </GridColumn>
-      <GridColumn name="visits" label={formatMessage(labels.visits)} width="100px" />
-      <GridColumn name="views" label={formatMessage(labels.views)} width="100px" />
-      <GridColumn name="country" label={formatMessage(labels.country)}>
-        {row => (
+      </DataColumn>
+      <DataColumn id="visits" label={formatMessage(labels.visits)} />
+      <DataColumn id="views" label={formatMessage(labels.views)} />
+      <DataColumn id="country" label={formatMessage(labels.country)}>
+        {(row: any) => (
           <TypeIcon type="country" value={row.country}>
             {formatValue(row.country, 'country')}
           </TypeIcon>
         )}
-      </GridColumn>
-      <GridColumn name="city" label={formatMessage(labels.city)} />
-      <GridColumn name="browser" label={formatMessage(labels.browser)}>
-        {row => (
+      </DataColumn>
+      <DataColumn id="city" label={formatMessage(labels.city)} />
+      <DataColumn id="browser" label={formatMessage(labels.browser)}>
+        {(row: any) => (
           <TypeIcon type="browser" value={row.browser}>
             {formatValue(row.browser, 'browser')}
           </TypeIcon>
         )}
-      </GridColumn>
-      <GridColumn name="os" label={formatMessage(labels.os)}>
-        {row => (
+      </DataColumn>
+      <DataColumn id="os" label={formatMessage(labels.os)}>
+        {(row: any) => (
           <TypeIcon type="os" value={row.os}>
             {formatValue(row.os, 'os')}
           </TypeIcon>
         )}
-      </GridColumn>
-      <GridColumn name="device" label={formatMessage(labels.device)}>
-        {row => (
+      </DataColumn>
+      <DataColumn id="device" label={formatMessage(labels.device)}>
+        {(row: any) => (
           <TypeIcon type="device" value={row.device}>
             {formatValue(row.device, 'device')}
           </TypeIcon>
         )}
-      </GridColumn>
-      <GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}>
-        {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
-      </GridColumn>
-    </GridTable>
+      </DataColumn>
+      <DataColumn id="lastAt" label={formatMessage(labels.lastSeen)}>
+        {(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')}
+      </DataColumn>
+    </DataTable>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
index 92ee3caa..cb95d4d7 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
@@ -1,13 +1,13 @@
 import { format, startOfDay, addHours } from 'date-fns';
-import { useLocale, useMessages, useWebsiteSessionsWeekly } from '@/components/hooks';
+import { useLocale, useMessages, useWebsiteSessionsWeeklyQuery } from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { getDayOfWeekAsDate } from '@/lib/date';
 import styles from './SessionsWeekly.module.css';
 import classNames from 'classnames';
-import { TooltipPopup } from '@umami/react-zen';
+import { Tooltip, TooltipTrigger } from '@umami/react-zen';
 
 export function SessionsWeekly({ websiteId }: { websiteId: string }) {
-  const { data, ...props } = useWebsiteSessionsWeekly(websiteId);
+  const { data, ...props } = useWebsiteSessionsWeeklyQuery(websiteId);
   const { dateLocale } = useLocale();
   const { labels, formatMessage } = useMessages();
   const { weekStartsOn } = dateLocale.options;
@@ -67,15 +67,13 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
                   return (
                     <div key={j} className={classNames(styles.cell)}>
                       {hour > 0 && (
-                        <TooltipPopup
-                          label={`${formatMessage(labels.visitors)}: ${hour}`}
-                          position="right"
-                        >
+                        <TooltipTrigger>
                           <div
                             className={styles.block}
                             style={{ opacity: pct, transform: `scale(${pct})` }}
                           />
-                        </TooltipPopup>
+                          <Tooltip>{`${formatMessage(labels.visitors)}: ${hour}`}</Tooltip>
+                        </TooltipTrigger>
                       )}
                     </div>
                   );
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
index 73caa59a..a39ed919 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
@@ -1,7 +1,7 @@
 import { isSameDay } from 'date-fns';
 import { Loading, Icon, StatusLight } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
-import { useSessionActivity, useTimezone } from '@/components/hooks';
+import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
 import styles from './SessionActivity.module.css';
 import { Fragment } from 'react';
 
@@ -17,7 +17,7 @@ export function SessionActivity({
   endDate: Date;
 }) {
   const { formatTimezoneDate } = useTimezone();
-  const { data, isLoading } = useSessionActivity(websiteId, sessionId, startDate, endDate);
+  const { data, isLoading } = useSessionActivityQuery(websiteId, sessionId, startDate, endDate);
 
   if (isLoading) {
     return <Loading position="page" />;
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
index 0288f427..06d9555f 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
@@ -1,5 +1,5 @@
 import { TextOverflow } from '@umami/react-zen';
-import { useMessages, useSessionData } from '@/components/hooks';
+import { useMessages, useSessionDataQuery } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { DATA_TYPES } from '@/lib/constants';
 import styles from './SessionData.module.css';
@@ -7,7 +7,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, ...query } = useSessionData(websiteId, sessionId);
+  const { data, ...query } = useSessionDataQuery(websiteId, sessionId);
 
   return (
     <>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
index 99066344..766fd193 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useWebsiteSession } from '@/components/hooks';
+import { useWebsiteSessionQuery } from '@/components/hooks';
 import { WebsiteHeader } from '../../WebsiteHeader';
 import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
@@ -16,7 +16,7 @@ export function SessionDetailsPage({
   websiteId: string;
   sessionId: string;
 }) {
-  const { data, ...query } = useWebsiteSession(websiteId, sessionId);
+  const { data, ...query } = useWebsiteSessionQuery(websiteId, sessionId);
 
   return (
     <LoadingPanel {...query} loadingIcon="spinner" data={data}>
diff --git a/src/app/share/[...shareId]/SharePage.tsx b/src/app/share/[...shareId]/SharePage.tsx
index 0830b8e4..c45ebcaa 100644
--- a/src/app/share/[...shareId]/SharePage.tsx
+++ b/src/app/share/[...shareId]/SharePage.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { WebsiteDetailsPage } from '../../(main)/websites/[websiteId]/WebsiteDetailsPage';
-import { useShareToken } from '@/components/hooks';
+import { useShareTokenQuery } from '@/components/hooks';
 import { Page } from '@/components/layout/Page';
 import { Header } from './Header';
 import { Footer } from './Footer';
@@ -8,7 +8,7 @@ import styles from './SharePage.module.css';
 import { WebsiteProvider } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 
 export function SharePage({ shareId }) {
-  const { shareToken, isLoading } = useShareToken(shareId);
+  const { shareToken, isLoading } = useShareTokenQuery(shareId);
 
   if (isLoading || !shareToken) {
     return null;
diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts
index 7c16eeee..7b83cb18 100644
--- a/src/components/hooks/index.ts
+++ b/src/components/hooks/index.ts
@@ -1,32 +1,32 @@
-export * from './queries/useConfig';
-export * from './queries/useEventDataEvents';
-export * from './queries/useEventDataProperties';
-export * from './queries/useEventDataValues';
-export * from './queries/useLogin';
-export * from './queries/useRealtime';
-export * from './queries/useReport';
-export * from './queries/useReports';
-export * from './queries/useSessionActivity';
-export * from './queries/useSessionData';
-export * from './queries/useSessionDataProperties';
-export * from './queries/useSessionDataValues';
-export * from './queries/useWebsiteSession';
-export * from './queries/useWebsiteSessions';
-export * from './queries/useWebsiteSessionsWeekly';
-export * from './queries/useShareToken';
-export * from './queries/useTeam';
-export * from './queries/useTeams';
-export * from './queries/useTeamWebsites';
-export * from './queries/useTeamMembers';
-export * from './queries/useUser';
-export * from './queries/useUsers';
-export * from './queries/useWebsite';
+export * from './queries/useEventDataEventsQuery';
+export * from './queries/useEventDataPropertiesQuery';
+export * from './queries/useEventDataValuesQuery';
+export * from './queries/useLoginQuery';
+export * from './queries/useRealtimeQuery';
+export * from './queries/useReportQuery';
+export * from './queries/useReportsQuery';
+export * from './queries/useSessionActivityQuery';
+export * from './queries/useSessionDataQuery';
+export * from './queries/useSessionDataPropertiesQuery';
+export * from './queries/useSessionDataValuesQuery';
+export * from './queries/useWebsiteSessionQuery';
+export * from './queries/useWebsiteSessionsQuery';
+export * from './queries/useWebsiteSessionsWeeklyQuery';
+export * from './queries/useShareTokenQuery';
+export * from './queries/useTeamQuery';
+export * from './queries/useTeamsQuery';
+export * from './queries/useTeamWebsitesQuery';
+export * from './queries/useTeamMembersQuery';
+export * from './queries/useUserQuery';
+export * from './queries/useUsersQuery';
+export * from './queries/useWebsiteQuery';
 export * from './queries/useWebsites';
-export * from './queries/useWebsiteEvents';
-export * from './queries/useWebsiteEventsSeries';
-export * from './queries/useWebsiteMetrics';
-export * from './queries/useWebsiteValues';
+export * from './queries/useWebsiteEventsQuery';
+export * from './queries/useWebsiteEventsSeriesQuery';
+export * from './queries/useWebsiteMetricsQuery';
+export * from './queries/useWebsiteValuesQuery';
 export * from './useApi';
+export * from './useConfig';
 export * from './useCountryNames';
 export * from './useDateRange';
 export * from './useDocumentClick';
@@ -39,10 +39,9 @@ export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';
 export * from './useModified';
-export * from './useNavigation';
 export * from './usePagedQuery';
 export * from './useRegionNames';
 export * from './useSticky';
-export * from './useTeamUrl';
+export * from './useNavigation';
 export * from './useTheme';
 export * from './useTimezone';
diff --git a/src/components/hooks/queries/useEventDataEvents.ts b/src/components/hooks/queries/useEventDataEventsQuery.ts
similarity index 92%
rename from src/components/hooks/queries/useEventDataEvents.ts
rename to src/components/hooks/queries/useEventDataEventsQuery.ts
index b82126ba..b03906b5 100644
--- a/src/components/hooks/queries/useEventDataEvents.ts
+++ b/src/components/hooks/queries/useEventDataEventsQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 
-export function useEventDataEvents(
+export function useEventDataEventsQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
diff --git a/src/components/hooks/queries/useEventDataProperties.ts b/src/components/hooks/queries/useEventDataPropertiesQuery.ts
similarity index 92%
rename from src/components/hooks/queries/useEventDataProperties.ts
rename to src/components/hooks/queries/useEventDataPropertiesQuery.ts
index aaf9c559..97f422eb 100644
--- a/src/components/hooks/queries/useEventDataProperties.ts
+++ b/src/components/hooks/queries/useEventDataPropertiesQuery.ts
@@ -2,7 +2,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useEventDataProperties(
+export function useEventDataPropertiesQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
diff --git a/src/components/hooks/queries/useEventDataValues.ts b/src/components/hooks/queries/useEventDataValuesQuery.ts
similarity index 94%
rename from src/components/hooks/queries/useEventDataValues.ts
rename to src/components/hooks/queries/useEventDataValuesQuery.ts
index 2d4c58fd..cc9e55b5 100644
--- a/src/components/hooks/queries/useEventDataValues.ts
+++ b/src/components/hooks/queries/useEventDataValuesQuery.ts
@@ -2,7 +2,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useEventDataValues(
+export function useEventDataValuesQuery(
   websiteId: string,
   eventName: string,
   propertyName: string,
diff --git a/src/components/hooks/queries/useLogin.ts b/src/components/hooks/queries/useLoginQuery.ts
similarity index 94%
rename from src/components/hooks/queries/useLogin.ts
rename to src/components/hooks/queries/useLoginQuery.ts
index d06cc41c..19acff70 100644
--- a/src/components/hooks/queries/useLogin.ts
+++ b/src/components/hooks/queries/useLoginQuery.ts
@@ -4,7 +4,7 @@ import { useApi } from '../useApi';
 
 const selector = (state: { user: any }) => state.user;
 
-export function useLogin(): {
+export function useLoginQuery(): {
   user: any;
   setUser: (data: any) => void;
 } & UseQueryResult {
diff --git a/src/components/hooks/queries/useRealtime.ts b/src/components/hooks/queries/useRealtimeQuery.ts
similarity index 91%
rename from src/components/hooks/queries/useRealtime.ts
rename to src/components/hooks/queries/useRealtimeQuery.ts
index 997344b3..58e72ef5 100644
--- a/src/components/hooks/queries/useRealtime.ts
+++ b/src/components/hooks/queries/useRealtimeQuery.ts
@@ -3,7 +3,7 @@ import { REALTIME_INTERVAL } from '@/lib/constants';
 import { RealtimeData } from '@/lib/types';
 import { useApi } from '../useApi';
 
-export function useRealtime(websiteId: string) {
+export function useRealtimeQuery(websiteId: string) {
   const { get, useQuery } = useApi();
   const { timezone } = useTimezone();
   const { data, isLoading, error } = useQuery<RealtimeData>({
diff --git a/src/components/hooks/queries/useReport.ts b/src/components/hooks/queries/useReportQuery.ts
similarity index 98%
rename from src/components/hooks/queries/useReport.ts
rename to src/components/hooks/queries/useReportQuery.ts
index 71cfba75..c5b139a5 100644
--- a/src/components/hooks/queries/useReport.ts
+++ b/src/components/hooks/queries/useReportQuery.ts
@@ -5,7 +5,7 @@ import { useTimezone } from '../useTimezone';
 import { useMessages } from '../useMessages';
 import { parseDateRange } from '@/lib/date';
 
-export function useReport(
+export function useReportQuery(
   reportId: string,
   defaultParameters?: { type: string; parameters: { [key: string]: any } },
 ) {
diff --git a/src/components/hooks/queries/useReports.ts b/src/components/hooks/queries/useReportsQuery.ts
similarity index 87%
rename from src/components/hooks/queries/useReports.ts
rename to src/components/hooks/queries/useReportsQuery.ts
index 628afd6c..3fafe1cd 100644
--- a/src/components/hooks/queries/useReports.ts
+++ b/src/components/hooks/queries/useReportsQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useReports({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
+export function useReportsQuery({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
   const { modified } = useModified(`reports`);
   const { get, del, useMutation } = useApi();
   const queryResult = usePagedQuery({
diff --git a/src/components/hooks/queries/useRevenueValues.ts b/src/components/hooks/queries/useRevenueValuesQuery.ts
similarity index 78%
rename from src/components/hooks/queries/useRevenueValues.ts
rename to src/components/hooks/queries/useRevenueValuesQuery.ts
index 803c2a8e..cd29dbbc 100644
--- a/src/components/hooks/queries/useRevenueValues.ts
+++ b/src/components/hooks/queries/useRevenueValuesQuery.ts
@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useRevenueValues(websiteId: string, startDate: Date, endDate: Date) {
+export function useRevenueValuesQuery(websiteId: string, startDate: Date, endDate: Date) {
   const { get, useQuery } = useApi();
 
   return useQuery({
diff --git a/src/components/hooks/queries/useSessionActivity.ts b/src/components/hooks/queries/useSessionActivityQuery.ts
similarity index 92%
rename from src/components/hooks/queries/useSessionActivity.ts
rename to src/components/hooks/queries/useSessionActivityQuery.ts
index 1c9c8f57..d8d34aca 100644
--- a/src/components/hooks/queries/useSessionActivity.ts
+++ b/src/components/hooks/queries/useSessionActivityQuery.ts
@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useSessionActivity(
+export function useSessionActivityQuery(
   websiteId: string,
   sessionId: string,
   startDate: Date,
diff --git a/src/components/hooks/queries/useSessionDataProperties.ts b/src/components/hooks/queries/useSessionDataPropertiesQuery.ts
similarity index 92%
rename from src/components/hooks/queries/useSessionDataProperties.ts
rename to src/components/hooks/queries/useSessionDataPropertiesQuery.ts
index 94afb60d..b694cf37 100644
--- a/src/components/hooks/queries/useSessionDataProperties.ts
+++ b/src/components/hooks/queries/useSessionDataPropertiesQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 
-export function useSessionDataProperties(
+export function useSessionDataPropertiesQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
diff --git a/src/components/hooks/queries/useSessionData.ts b/src/components/hooks/queries/useSessionDataQuery.ts
similarity index 78%
rename from src/components/hooks/queries/useSessionData.ts
rename to src/components/hooks/queries/useSessionDataQuery.ts
index 521ba7d5..62b53983 100644
--- a/src/components/hooks/queries/useSessionData.ts
+++ b/src/components/hooks/queries/useSessionDataQuery.ts
@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useSessionData(websiteId: string, sessionId: string) {
+export function useSessionDataQuery(websiteId: string, sessionId: string) {
   const { get, useQuery } = useApi();
 
   return useQuery({
diff --git a/src/components/hooks/queries/useSessionDataValues.ts b/src/components/hooks/queries/useSessionDataValuesQuery.ts
similarity index 93%
rename from src/components/hooks/queries/useSessionDataValues.ts
rename to src/components/hooks/queries/useSessionDataValuesQuery.ts
index 2f756c22..8a75b1a3 100644
--- a/src/components/hooks/queries/useSessionDataValues.ts
+++ b/src/components/hooks/queries/useSessionDataValuesQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 
-export function useSessionDataValues(
+export function useSessionDataValuesQuery(
   websiteId: string,
   propertyName: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
diff --git a/src/components/hooks/queries/useShareToken.ts b/src/components/hooks/queries/useShareTokenQuery.ts
similarity index 91%
rename from src/components/hooks/queries/useShareToken.ts
rename to src/components/hooks/queries/useShareTokenQuery.ts
index 050d05a8..122dc484 100644
--- a/src/components/hooks/queries/useShareToken.ts
+++ b/src/components/hooks/queries/useShareTokenQuery.ts
@@ -3,7 +3,7 @@ import { useApi } from '../useApi';
 
 const selector = (state: { shareToken: string }) => state.shareToken;
 
-export function useShareToken(shareId: string): {
+export function useShareTokenQuery(shareId: string): {
   shareToken: any;
   isLoading?: boolean;
   error?: Error;
diff --git a/src/components/hooks/queries/useTeamMembers.ts b/src/components/hooks/queries/useTeamMembersQuery.ts
similarity index 88%
rename from src/components/hooks/queries/useTeamMembers.ts
rename to src/components/hooks/queries/useTeamMembersQuery.ts
index c285c30f..87956ed0 100644
--- a/src/components/hooks/queries/useTeamMembers.ts
+++ b/src/components/hooks/queries/useTeamMembersQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useTeamMembers(teamId: string) {
+export function useTeamMembersQuery(teamId: string) {
   const { get } = useApi();
   const { modified } = useModified(`teams:members`);
 
diff --git a/src/components/hooks/queries/useTeam.ts b/src/components/hooks/queries/useTeamQuery.ts
similarity index 81%
rename from src/components/hooks/queries/useTeam.ts
rename to src/components/hooks/queries/useTeamQuery.ts
index f9383ce0..563e16d5 100644
--- a/src/components/hooks/queries/useTeam.ts
+++ b/src/components/hooks/queries/useTeamQuery.ts
@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useTeam(teamId: string) {
+export function useTeamQuery(teamId: string) {
   const { get, useQuery } = useApi();
   return useQuery({
     queryKey: ['teams', teamId],
diff --git a/src/components/hooks/queries/useTeamWebsites.ts b/src/components/hooks/queries/useTeamWebsitesQuery.ts
similarity index 87%
rename from src/components/hooks/queries/useTeamWebsites.ts
rename to src/components/hooks/queries/useTeamWebsitesQuery.ts
index 1f578709..892cc848 100644
--- a/src/components/hooks/queries/useTeamWebsites.ts
+++ b/src/components/hooks/queries/useTeamWebsitesQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useTeamWebsites(teamId: string) {
+export function useTeamWebsitesQuery(teamId: string) {
   const { get } = useApi();
   const { modified } = useModified(`websites`);
 
diff --git a/src/components/hooks/queries/useTeams.ts b/src/components/hooks/queries/useTeamsQuery.ts
similarity index 89%
rename from src/components/hooks/queries/useTeams.ts
rename to src/components/hooks/queries/useTeamsQuery.ts
index 9e83539a..a4edc287 100644
--- a/src/components/hooks/queries/useTeams.ts
+++ b/src/components/hooks/queries/useTeamsQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useTeams(userId: string) {
+export function useTeamsQuery(userId: string) {
   const { get } = useApi();
   const { modified } = useModified(`teams`);
 
diff --git a/src/components/hooks/queries/useUser.ts b/src/components/hooks/queries/useUserQuery.ts
similarity index 73%
rename from src/components/hooks/queries/useUser.ts
rename to src/components/hooks/queries/useUserQuery.ts
index 671b4af1..f454b96a 100644
--- a/src/components/hooks/queries/useUser.ts
+++ b/src/components/hooks/queries/useUserQuery.ts
@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useUser(userId: string, options?: { [key: string]: any }) {
+export function useUserQuery(userId: string, options?: { [key: string]: any }) {
   const { get, useQuery } = useApi();
   return useQuery({
     queryKey: ['users', userId],
diff --git a/src/components/hooks/queries/useUsers.ts b/src/components/hooks/queries/useUsersQuery.ts
similarity index 91%
rename from src/components/hooks/queries/useUsers.ts
rename to src/components/hooks/queries/useUsersQuery.ts
index 5952a981..05c93310 100644
--- a/src/components/hooks/queries/useUsers.ts
+++ b/src/components/hooks/queries/useUsersQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useUsers() {
+export function useUsersQuery() {
   const { get } = useApi();
   const { modified } = useModified(`users`);
 
diff --git a/src/components/hooks/queries/useWebsiteEvents.ts b/src/components/hooks/queries/useWebsiteEventsQuery.ts
similarity index 93%
rename from src/components/hooks/queries/useWebsiteEvents.ts
rename to src/components/hooks/queries/useWebsiteEventsQuery.ts
index e4204c84..c36db405 100644
--- a/src/components/hooks/queries/useWebsiteEvents.ts
+++ b/src/components/hooks/queries/useWebsiteEventsQuery.ts
@@ -3,7 +3,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 import { usePagedQuery } from '../usePagedQuery';
 
-export function useWebsiteEvents(
+export function useWebsiteEventsQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
diff --git a/src/components/hooks/queries/useWebsiteEventsSeries.ts b/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts
similarity index 92%
rename from src/components/hooks/queries/useWebsiteEventsSeries.ts
rename to src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts
index 7543f3e5..6e0267f4 100644
--- a/src/components/hooks/queries/useWebsiteEventsSeries.ts
+++ b/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 
-export function useWebsiteEventsSeries(
+export function useWebsiteEventsSeriesQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
diff --git a/src/components/hooks/queries/useWebsiteMetrics.ts b/src/components/hooks/queries/useWebsiteMetricsQuery.ts
similarity index 96%
rename from src/components/hooks/queries/useWebsiteMetrics.ts
rename to src/components/hooks/queries/useWebsiteMetricsQuery.ts
index 4cc37736..479edf84 100644
--- a/src/components/hooks/queries/useWebsiteMetrics.ts
+++ b/src/components/hooks/queries/useWebsiteMetricsQuery.ts
@@ -3,7 +3,7 @@ import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 import { useSearchParams } from 'next/navigation';
 
-export function useWebsiteMetrics(
+export function useWebsiteMetricsQuery(
   websiteId: string,
   queryParams: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
   options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
diff --git a/src/components/hooks/queries/useWebsitePageviews.ts b/src/components/hooks/queries/useWebsitePageviewsQuery.ts
similarity index 93%
rename from src/components/hooks/queries/useWebsitePageviews.ts
rename to src/components/hooks/queries/useWebsitePageviewsQuery.ts
index e14a6e3d..a2e71df3 100644
--- a/src/components/hooks/queries/useWebsitePageviews.ts
+++ b/src/components/hooks/queries/useWebsitePageviewsQuery.ts
@@ -2,7 +2,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useWebsitePageviews(
+export function useWebsitePageviewsQuery(
   websiteId: string,
   compare?: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
diff --git a/src/components/hooks/queries/useWebsite.ts b/src/components/hooks/queries/useWebsiteQuery.ts
similarity index 73%
rename from src/components/hooks/queries/useWebsite.ts
rename to src/components/hooks/queries/useWebsiteQuery.ts
index 5f98192c..30d9fbcf 100644
--- a/src/components/hooks/queries/useWebsite.ts
+++ b/src/components/hooks/queries/useWebsiteQuery.ts
@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useWebsite(websiteId: string, options?: { [key: string]: any }) {
+export function useWebsiteQuery(websiteId: string, options?: { [key: string]: any }) {
   const { get, useQuery } = useApi();
 
   return useQuery({
diff --git a/src/components/hooks/queries/useWebsiteSession.ts b/src/components/hooks/queries/useWebsiteSessionQuery.ts
similarity index 76%
rename from src/components/hooks/queries/useWebsiteSession.ts
rename to src/components/hooks/queries/useWebsiteSessionQuery.ts
index 0f771c4e..053dae31 100644
--- a/src/components/hooks/queries/useWebsiteSession.ts
+++ b/src/components/hooks/queries/useWebsiteSessionQuery.ts
@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useWebsiteSession(websiteId: string, sessionId: string) {
+export function useWebsiteSessionQuery(websiteId: string, sessionId: string) {
   const { get, useQuery } = useApi();
 
   return useQuery({
diff --git a/src/components/hooks/queries/useWebsiteSessionStats.ts b/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts
similarity index 77%
rename from src/components/hooks/queries/useWebsiteSessionStats.ts
rename to src/components/hooks/queries/useWebsiteSessionStatsQuery.ts
index 6860fccc..4fa8e666 100644
--- a/src/components/hooks/queries/useWebsiteSessionStats.ts
+++ b/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts
@@ -1,7 +1,10 @@
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useWebsiteSessionStats(websiteId: string, options?: { [key: string]: string }) {
+export function useWebsiteSessionStatsQuery(
+  websiteId: string,
+  options?: { [key: string]: string },
+) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 
diff --git a/src/components/hooks/queries/useWebsiteSessions.ts b/src/components/hooks/queries/useWebsiteSessionsQuery.ts
similarity index 84%
rename from src/components/hooks/queries/useWebsiteSessions.ts
rename to src/components/hooks/queries/useWebsiteSessionsQuery.ts
index 2b943eb9..f0684a2d 100644
--- a/src/components/hooks/queries/useWebsiteSessions.ts
+++ b/src/components/hooks/queries/useWebsiteSessionsQuery.ts
@@ -3,7 +3,10 @@ import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 import { useFilterParams } from '@/components/hooks/useFilterParams';
 
-export function useWebsiteSessions(websiteId: string, params?: { [key: string]: string | number }) {
+export function useWebsiteSessionsQuery(
+  websiteId: string,
+  params?: { [key: string]: string | number },
+) {
   const { get } = useApi();
   const { modified } = useModified(`sessions`);
   const filters = useFilterParams(websiteId);
diff --git a/src/components/hooks/queries/useWebsiteSessionsWeekly.ts b/src/components/hooks/queries/useWebsiteSessionsWeeklyQuery.ts
similarity index 92%
rename from src/components/hooks/queries/useWebsiteSessionsWeekly.ts
rename to src/components/hooks/queries/useWebsiteSessionsWeeklyQuery.ts
index 2e691904..4a07f38d 100644
--- a/src/components/hooks/queries/useWebsiteSessionsWeekly.ts
+++ b/src/components/hooks/queries/useWebsiteSessionsWeeklyQuery.ts
@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { useModified } from '../useModified';
 import { useFilterParams } from '@/components/hooks/useFilterParams';
 
-export function useWebsiteSessionsWeekly(
+export function useWebsiteSessionsWeeklyQuery(
   websiteId: string,
   params?: { [key: string]: string | number },
 ) {
diff --git a/src/components/hooks/queries/useWebsiteStats.ts b/src/components/hooks/queries/useWebsiteStatsQuery.ts
similarity index 92%
rename from src/components/hooks/queries/useWebsiteStats.ts
rename to src/components/hooks/queries/useWebsiteStatsQuery.ts
index a553fe09..5c761fce 100644
--- a/src/components/hooks/queries/useWebsiteStats.ts
+++ b/src/components/hooks/queries/useWebsiteStatsQuery.ts
@@ -1,7 +1,7 @@
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useWebsiteStats(
+export function useWebsiteStatsQuery(
   websiteId: string,
   compare?: string,
   options?: { [key: string]: string },
diff --git a/src/components/hooks/queries/useWebsiteValues.ts b/src/components/hooks/queries/useWebsiteValuesQuery.ts
similarity index 97%
rename from src/components/hooks/queries/useWebsiteValues.ts
rename to src/components/hooks/queries/useWebsiteValuesQuery.ts
index a386faa1..7320e08c 100644
--- a/src/components/hooks/queries/useWebsiteValues.ts
+++ b/src/components/hooks/queries/useWebsiteValuesQuery.ts
@@ -3,7 +3,7 @@ import { useCountryNames } from '@/components/hooks/useCountryNames';
 import { useRegionNames } from '@/components/hooks/useRegionNames';
 import { useLocale } from '../useLocale';
 
-export function useWebsiteValues({
+export function useWebsiteValuesQuery({
   websiteId,
   type,
   startDate,
diff --git a/src/components/hooks/queries/useWebsites.ts b/src/components/hooks/queries/useWebsites.ts
index f9e1ddc2..545f0fbb 100644
--- a/src/components/hooks/queries/useWebsites.ts
+++ b/src/components/hooks/queries/useWebsites.ts
@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
-import { useLogin } from './useLogin';
+import { useLoginQuery } from './useLoginQuery';
 import { useModified } from '../useModified';
 
 export function useWebsites(
@@ -8,7 +8,7 @@ export function useWebsites(
   params?: { [key: string]: string | number },
 ) {
   const { get } = useApi();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { modified } = useModified(`websites`);
 
   return usePagedQuery({
diff --git a/src/components/hooks/queries/useConfig.ts b/src/components/hooks/useConfig.ts
similarity index 100%
rename from src/components/hooks/queries/useConfig.ts
rename to src/components/hooks/useConfig.ts
diff --git a/src/components/hooks/useGlobalState.ts b/src/components/hooks/useGlobalState.ts
index dccbfcea..477cfe58 100644
--- a/src/components/hooks/useGlobalState.ts
+++ b/src/components/hooks/useGlobalState.ts
@@ -3,7 +3,7 @@ import { create } from 'zustand';
 const store = create(() => ({}));
 
 const useGlobalState = (key: string, value?: any) => {
-  if (value !== undefined && !store.getState()[key]) {
+  if (value !== undefined && store.getState()[key] === undefined) {
     store.setState({ [key]: value });
   }
 
diff --git a/src/components/hooks/useNavigation.ts b/src/components/hooks/useNavigation.ts
index 40dc69e1..e3371fe4 100644
--- a/src/components/hooks/useNavigation.ts
+++ b/src/components/hooks/useNavigation.ts
@@ -2,15 +2,11 @@ import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildUrl } from '@/lib/url';
 
-export function useNavigation(): {
-  pathname: string;
-  query: { [key: string]: string };
-  router: any;
-  renderUrl: (params: any, reset?: boolean) => string;
-} {
+export function useNavigation() {
   const router = useRouter();
   const pathname = usePathname();
   const params = useSearchParams();
+  const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
 
   const query = useMemo(() => {
     const obj = {};
@@ -26,5 +22,9 @@ export function useNavigation(): {
     return reset ? pathname : buildUrl(pathname, { ...query, ...params });
   }
 
-  return { pathname, query, router, renderUrl };
+  function renderTeamUrl(url: string) {
+    return teamId ? `/teams/${teamId}${url}` : url;
+  }
+
+  return { pathname, query, router, renderUrl, renderTeamUrl, teamId };
 }
diff --git a/src/components/hooks/useTeamUrl.ts b/src/components/hooks/useTeamUrl.ts
deleted file mode 100644
index fcbb5d21..00000000
--- a/src/components/hooks/useTeamUrl.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { usePathname } from 'next/navigation';
-
-export function useTeamUrl() {
-  const pathname = usePathname();
-  const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
-
-  function renderTeamUrl(url: string) {
-    return teamId ? `/teams/${teamId}${url}` : url;
-  }
-
-  return { teamId, renderTeamUrl, pathname };
-}
diff --git a/src/components/input/ProfileButton.tsx b/src/components/input/ProfileButton.tsx
index 5621e31d..e3356099 100644
--- a/src/components/input/ProfileButton.tsx
+++ b/src/components/input/ProfileButton.tsx
@@ -12,11 +12,11 @@ import {
 } from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
 import { User, LogOut, CircleUserRound } from 'lucide-react';
-import { useMessages, useLogin } from '@/components/hooks';
+import { useMessages, useLoginQuery } from '@/components/hooks';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const router = useRouter();
   const cloudMode = !!process.env.cloudMode;
 
diff --git a/src/components/input/RefreshButton.tsx b/src/components/input/RefreshButton.tsx
index bf563a82..e880e2e9 100644
--- a/src/components/input/RefreshButton.tsx
+++ b/src/components/input/RefreshButton.tsx
@@ -1,4 +1,4 @@
-import { LoadingButton, Icon, TooltipPopup } from '@umami/react-zen';
+import { LoadingButton, Icon, Tooltip, TooltipTrigger } from '@umami/react-zen';
 import { setWebsiteDateRange } from '@/store/websites';
 import { useDateRange } from '@/components/hooks';
 import { Icons } from '@/components/icons';
@@ -21,12 +21,13 @@ export function RefreshButton({
   }
 
   return (
-    <TooltipPopup label={formatMessage(labels.refresh)}>
-      <LoadingButton isLoading={isLoading} onClick={handleClick}>
+    <TooltipTrigger>
+      <LoadingButton isLoading={isLoading} onPress={handleClick}>
         <Icon>
           <Icons.Refresh />
         </Icon>
       </LoadingButton>
-    </TooltipPopup>
+      <Tooltip>{formatMessage(labels.refresh)}</Tooltip>
+    </TooltipTrigger>
   );
 }
diff --git a/src/components/input/TeamsButton.tsx b/src/components/input/TeamsButton.tsx
index 2cc34094..c1eb453c 100644
--- a/src/components/input/TeamsButton.tsx
+++ b/src/components/input/TeamsButton.tsx
@@ -15,7 +15,7 @@ import {
   Icons,
 } from '@umami/react-zen';
 import { User, Users } from 'lucide-react';
-import { useLogin, useMessages, useTeams, useTeamUrl } from '@/components/hooks';
+import { useLoginQuery, useMessages, useTeamsQuery, useNavigation } from '@/components/hooks';
 
 export function TeamsButton({
   className,
@@ -24,10 +24,10 @@ export function TeamsButton({
   className?: string;
   showText?: boolean;
 }) {
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
-  const { result } = useTeams(user.id);
-  const { teamId } = useTeamUrl();
+  const { result } = useTeamsQuery(user.id);
+  const { teamId } = useNavigation();
   const router = useRouter();
   const team = result?.data?.find(({ id }) => id === teamId);
   const [selectedKeys, setSelectedKeys] = useState<any>(new Set([teamId || user.id]));
diff --git a/src/components/metrics/EventsChart.tsx b/src/components/metrics/EventsChart.tsx
index e82f2e09..514b0e76 100644
--- a/src/components/metrics/EventsChart.tsx
+++ b/src/components/metrics/EventsChart.tsx
@@ -1,6 +1,6 @@
 import { colord } from 'colord';
 import { BarChart } from '@/components/charts/BarChart';
-import { useDateRange, useLocale, useWebsiteEventsSeries } from '@/components/hooks';
+import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
 import { useMemo } from 'react';
@@ -15,7 +15,7 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
     dateRange: { startDate, endDate, unit, value },
   } = useDateRange(websiteId);
   const { locale } = useLocale();
-  const { data, isLoading } = useWebsiteEventsSeries(websiteId);
+  const { data, isLoading } = useWebsiteEventsSeriesQuery(websiteId);
 
   const chartData = useMemo(() => {
     if (!data) return [];
diff --git a/src/components/metrics/MetricsBar.tsx b/src/components/metrics/MetricsBar.tsx
index 232ac125..b005b34c 100644
--- a/src/components/metrics/MetricsBar.tsx
+++ b/src/components/metrics/MetricsBar.tsx
@@ -22,7 +22,7 @@ export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBar
         !error &&
         isFetched &&
         cloneChildren(children, child => {
-          return { format: child.props['format'] || formatFunc };
+          return { format: child?.props['format'] || formatFunc };
         })}
     </Row>
   );
diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx
index c4179596..0af9d6bf 100644
--- a/src/components/metrics/MetricsTable.tsx
+++ b/src/components/metrics/MetricsTable.tsx
@@ -1,14 +1,14 @@
 import { ReactNode, useMemo, useState } from 'react';
-import { Loading, Icon, Text, SearchField } from '@umami/react-zen';
-import classNames from 'classnames';
+import { Loading, Icon, Text, SearchField, Row } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { LinkButton } from '@/components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
-import { useNavigation, useWebsiteMetrics, useMessages, useFormat } from '@/components/hooks';
+import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { ListTable, ListTableProps } from './ListTable';
 import styles from './MetricsTable.module.css';
+import { Panel } from '@/components/layout/Panel';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -46,7 +46,7 @@ export function MetricsTable({
   const { renderUrl } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
-  const { data, isLoading, isFetched, error } = useWebsiteMetrics(
+  const { data, isLoading, isFetched, error } = useWebsiteMetricsQuery(
     websiteId,
     { type, limit, search: searchFormattedValues ? undefined : search, ...params },
     {
@@ -85,15 +85,7 @@ export function MetricsTable({
   }, [data, dataFilter, search, limit, formatValue, type]);
 
   return (
-    <div
-      className={classNames(styles.container, className)}
-      style={{
-        background: 'var(--background-color)',
-        border: '1px solid var(--border-color)',
-        borderRadius: 'var(--border-radius)',
-        padding: '16px',
-      }}
-    >
+    <Panel>
       {error && <ErrorMessage />}
       <div className={styles.actions}>
         {allowSearch && (
@@ -111,7 +103,7 @@ export function MetricsTable({
         <ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
       )}
       {!data && isLoading && !isFetched && <Loading icon="dots" />}
-      <div className={styles.footer}>
+      <Row justifyContent="center">
         {showMore && data && !error && limit && (
           <LinkButton href={renderUrl({ view: type })} variant="quiet">
             <Text>{formatMessage(labels.more)}</Text>
@@ -120,7 +112,7 @@ export function MetricsTable({
             </Icon>
           </LinkButton>
         )}
-      </div>
-    </div>
+      </Row>
+    </Panel>
   );
 }
diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx
index f6582013..a57fc489 100644
--- a/src/components/metrics/WorldMap.tsx
+++ b/src/components/metrics/WorldMap.tsx
@@ -3,7 +3,7 @@ import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simp
 import classNames from 'classnames';
 import { colord } from 'colord';
 import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
-import { useDateRange, useTheme, useWebsiteMetrics } from '@/components/hooks';
+import { useDateRange, useTheme, useWebsiteMetricsQuery } from '@/components/hooks';
 import { useCountryNames } from '@/components/hooks';
 import { useLocale } from '@/components/hooks';
 import { useMessages } from '@/components/hooks';
@@ -32,7 +32,7 @@ export function WorldMap({
   const {
     dateRange: { startDate, endDate },
   } = useDateRange(websiteId);
-  const { data: mapData } = useWebsiteMetrics(websiteId, {
+  const { data: mapData } = useWebsiteMetricsQuery(websiteId, {
     type: 'country',
     startAt: +startDate,
     endAt: +endDate,