diff --git a/package.components.json b/package.components.json
index d231f5b9b..927e06604 100644
--- a/package.components.json
+++ b/package.components.json
@@ -1,6 +1,6 @@
 {
   "name": "@umami/components",
-  "version": "0.128.0",
+  "version": "0.127.0",
   "description": "Umami React components.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
diff --git a/src/app/(main)/settings/preferences/DateRangeSetting.tsx b/src/app/(main)/settings/preferences/DateRangeSetting.tsx
index c0e8221e8..e47ce0b69 100644
--- a/src/app/(main)/settings/preferences/DateRangeSetting.tsx
+++ b/src/app/(main)/settings/preferences/DateRangeSetting.tsx
@@ -14,10 +14,7 @@ export function DateRangeSetting() {
     setDate(value);
   };
 
-  const handleReset = () => {
-    setItem(DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE);
-    setDate(DEFAULT_DATE_RANGE_VALUE);
-  };
+  const handleReset = () => setItem(DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE);
 
   return (
     <Row gap="3">
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage.tsx
index 0dc7bcc14..d5c129eec 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage.tsx
@@ -2,15 +2,12 @@
 import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
 import { WebsiteSettings } from '@/app/(main)/websites/[websiteId]/settings/WebsiteSettings';
 import { WebsiteSettingsHeader } from '@/app/(main)/websites/[websiteId]/settings/WebsiteSettingsHeader';
-import { Column } from '@umami/react-zen';
 
 export function WebsiteSettingsPage({ websiteId }: { websiteId: string }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <Column margin="2">
-        <WebsiteSettingsHeader />
-        <WebsiteSettings websiteId={websiteId} />
-      </Column>
+      <WebsiteSettingsHeader />
+      <WebsiteSettings websiteId={websiteId} />
     </WebsiteProvider>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
index 0f9f81236..4a2ffdf0a 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
@@ -7,7 +7,7 @@ import { WebsiteShareForm } from '@/app/(main)/websites/[websiteId]/settings/Web
 import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';
 
-export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
+export function WebsiteHeader() {
   const website = useWebsite();
   const { renderUrl, pathname } = useNavigation();
   const isSettings = pathname.endsWith('/settings');
@@ -20,18 +20,15 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
     <PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3">
       <Row alignItems="center" gap="6">
         <ActiveUsers websiteId={website.id} />
-
-        {showActions && (
-          <Row alignItems="center" gap>
-            <ShareButton websiteId={website.id} shareId={website.shareId} />
-            <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
-              <Icon>
-                <Edit />
-              </Icon>
-              <Text>Edit</Text>
-            </LinkButton>
-          </Row>
-        )}
+        <Row alignItems="center" gap>
+          <ShareButton websiteId={website.id} shareId={website.shareId} />
+          <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
+            <Icon>
+              <Edit />
+            </Icon>
+            <Text>Edit</Text>
+          </LinkButton>
+        </Row>
       </Row>
     </PageHeader>
   );
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx b/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
index 617669212..e25541e9a 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
@@ -21,7 +21,7 @@ export function WebsiteLayout({ websiteId, children }: { websiteId: string; chil
           </Column>
         )}
         <PageBody gap>
-          <WebsiteHeader showActions />
+          <WebsiteHeader />
           <Column>{children}</Column>
         </PageBody>
       </Grid>
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
index df476e79b..3696b7861 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
@@ -1,5 +1,14 @@
 import { Text } from '@umami/react-zen';
-import { Eye, User, Clock, Ungroup, Tag, ChartPie, UserPlus, GitCompare } from '@/components/icons';
+import {
+  Eye,
+  User,
+  Clock,
+  Sheet,
+  Tag,
+  ChartPie,
+  UserPlus,
+  GitCompareArrows,
+} from '@/components/icons';
 import { Lightning, Path, Money, Target, Funnel, Magnet, Network } from '@/components/svg';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { SideMenu } from '@/components/common/SideMenu';
@@ -47,13 +56,13 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
         {
           id: 'compare',
           label: formatMessage(labels.compare),
-          icon: <GitCompare />,
+          icon: <GitCompareArrows />,
           path: renderPath('/compare'),
         },
         {
           id: 'breakdown',
           label: formatMessage(labels.breakdown),
-          icon: <Ungroup />,
+          icon: <Sheet />,
           path: renderPath('/breakdown'),
         },
       ],
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
index e66302ad6..ea4b5f037 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Select, ListItem, Grid, Column } from '@umami/react-zen';
+import { Select, ListItem, Grid } from '@umami/react-zen';
 import {
   useMessages,
   useSessionDataPropertiesQuery,
@@ -24,26 +24,25 @@ export function SessionProperties({ websiteId }: { websiteId: string }) {
       data={data}
       error={error}
       minHeight="300px"
+      gap="6"
     >
-      <Column gap="6">
-        {data && (
-          <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap>
-            <Select
-              label={formatMessage(labels.event)}
-              value={propertyName}
-              onChange={setPropertyName}
-              placeholder=""
-            >
-              {properties?.map(p => (
-                <ListItem key={p} id={p}>
-                  {p}
-                </ListItem>
-              ))}
-            </Select>
-          </Grid>
-        )}
-        {propertyName && <SessionValues websiteId={websiteId} propertyName={propertyName} />}
-      </Column>
+      {data && (
+        <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap>
+          <Select
+            label={formatMessage(labels.event)}
+            value={propertyName}
+            onChange={setPropertyName}
+            placeholder=""
+          >
+            {properties?.map(p => (
+              <ListItem key={p} id={p}>
+                {p}
+              </ListItem>
+            ))}
+          </Select>
+        </Grid>
+      )}
+      {propertyName && <SessionValues websiteId={websiteId} propertyName={propertyName} />}
     </LoadingPanel>
   );
 }
@@ -85,6 +84,7 @@ const SessionValues = ({ websiteId, propertyName }) => {
       data={data}
       error={error}
       minHeight="300px"
+      gap="6"
     >
       {data && (
         <Grid columns="1fr 1fr" gap>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
index ae0d41043..68eef29c6 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
@@ -1,35 +1,18 @@
 'use client';
 import { Key, useState } from 'react';
-import { TabList, Tab, Tabs, TabPanel, Column, Modal, Dialog } from '@umami/react-zen';
+import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
 import { SessionsDataTable } from './SessionsDataTable';
 import { SessionProperties } from './SessionProperties';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
 import { Panel } from '@/components/common/Panel';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { getItem, setItem } from '@/lib/storage';
-import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile';
 
 const KEY_NAME = 'umami.sessions.tab';
 
 export function SessionsPage({ websiteId }) {
   const [tab, setTab] = useState(getItem(KEY_NAME) || 'activity');
   const { formatMessage, labels } = useMessages();
-  const {
-    router,
-    query: { session },
-    updateParams,
-  } = useNavigation();
-
-  const handleClose = (close: () => void) => {
-    router.push(updateParams({ session: undefined }));
-    close();
-  };
-
-  const handleOpenChange = (isOpen: boolean) => {
-    if (!isOpen) {
-      router.push(updateParams({ session: undefined }));
-    }
-  };
 
   const handleSelect = (value: Key) => {
     setItem(KEY_NAME, value);
@@ -53,26 +36,6 @@ export function SessionsPage({ websiteId }) {
           </TabPanel>
         </Tabs>
       </Panel>
-      <Modal isOpen={!!session} onOpenChange={handleOpenChange} isDismissable>
-        <Dialog
-          style={{
-            maxWidth: 1320,
-            width: '100vw',
-            minHeight: '300px',
-            height: 'calc(100vh - 40px)',
-          }}
-        >
-          {({ close }) => {
-            return (
-              <SessionProfile
-                websiteId={websiteId}
-                sessionId={session}
-                onClose={() => handleClose(close)}
-              />
-            );
-          }}
-        </Dialog>
-      </Modal>
     </Column>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
index 391c57f43..fa3be6c7b 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { DataColumn, DataTable } from '@umami/react-zen';
-import { useFormat, useMessages, useNavigation } from '@/components/hooks';
+import { useFormat, useMessages } from '@/components/hooks';
 import { Avatar } from '@/components/common/Avatar';
 import { TypeIcon } from '@/components/common/TypeIcon';
 import { DateDistance } from '@/components/common/DateDistance';
@@ -8,13 +8,12 @@ import { DateDistance } from '@/components/common/DateDistance';
 export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
-  const { updateParams } = useNavigation();
 
   return (
     <DataTable data={data}>
       <DataColumn id="id" label={formatMessage(labels.session)} width="100px">
         {(row: any) => (
-          <Link href={updateParams({ session: row.id })}>
+          <Link href={`sessions/${row.id}`}>
             <Avatar seed={row.id} size={32} />
           </Link>
         )}
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
similarity index 97%
rename from src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx
rename to src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
index 4dcf08b42..4ed55427a 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
@@ -47,7 +47,7 @@ export function SessionActivity({
 
           return (
             <Column key={eventId} gap>
-              {showHeader && <Heading size="1">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
+              {showHeader && <Heading size="2">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
               <Row alignItems="center" gap="6" height="40px">
                 <StatusLight color={`#${visitId?.substring(0, 6)}`}>
                   {formatTimezoneDate(createdAt, 'pp')}
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
similarity index 100%
rename from src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx
rename to src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
similarity index 58%
rename from src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx
rename to src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
index bdbfbc580..86e3cdbf2 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
@@ -1,52 +1,37 @@
-import { Grid, Row, Column, Tabs, TabList, Tab, TabPanel, Icon, Button } from '@umami/react-zen';
+'use client';
+import { Grid, Row, Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { X } from '@/components/icons';
 import { useMessages, useWebsiteSessionQuery } from '@/components/hooks';
 import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
 import { SessionInfo } from './SessionInfo';
 import { SessionStats } from './SessionStats';
+import { Panel } from '@/components/common/Panel';
 
-export function SessionProfile({
+export function SessionDetailsPage({
   websiteId,
   sessionId,
-  onClose,
 }: {
   websiteId: string;
   sessionId: string;
-  onClose?: () => void;
 }) {
   const { data, isLoading, error } = useWebsiteSessionQuery(websiteId, sessionId);
   const { formatMessage, labels } = useMessages();
 
   return (
-    <LoadingPanel
-      data={data}
-      isLoading={isLoading}
-      error={error}
-      loadingIcon="spinner"
-      loadingPlacement="absolute"
-    >
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       {data && (
-        <Column gap>
-          <Row alignItems="center" justifyContent="flex-end">
-            <Button onPress={onClose} variant="quiet">
-              <Icon>
-                <X />
-              </Icon>
-            </Button>
-          </Row>
-          <Grid columns="340px 1fr" gap="6">
-            <Column gap="6">
-              <Row justifyContent="center">
-                <Avatar seed={data?.id} size={128} />
-              </Row>
-              <SessionInfo data={data} />
-            </Column>
-            <Column gap>
-              <SessionStats data={data} />
-
+        <Grid columns="260px 1fr" gap>
+          <Column gap="6">
+            <Row justifyContent="center">
+              <Avatar seed={data?.id} size={128} />
+            </Row>
+            <SessionInfo data={data} />
+          </Column>
+          <Column gap>
+            <SessionStats data={data} />
+            <Panel>
               <Tabs>
                 <TabList>
                   <Tab id="activity">{formatMessage(labels.activity)}</Tab>
@@ -64,9 +49,9 @@ export function SessionProfile({
                   <SessionData sessionId={sessionId} websiteId={websiteId} />
                 </TabPanel>
               </Tabs>
-            </Column>
-          </Grid>
-        </Column>
+            </Panel>
+          </Column>
+        </Grid>
       )}
     </LoadingPanel>
   );
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
similarity index 93%
rename from src/app/(main)/websites/[websiteId]/sessions/SessionInfo.tsx
rename to src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
index c2127cf57..4ebb462c3 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionInfo.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Icon, TextField, Column, Row, Label } from '@umami/react-zen';
+import { Icon, TextField, Column, Row, Label, Text } from '@umami/react-zen';
 import { useFormat, useLocale, useMessages, useRegionNames } from '@/components/hooks';
 import { TypeIcon } from '@/components/common/TypeIcon';
 import { KeyRound, Calendar } from '@/components/icons';
@@ -15,7 +15,7 @@ export function SessionInfo({ data }) {
   return (
     <Column gap="6">
       <Info label="ID">
-        <TextField value={data?.id} style={{ width: '100%' }} allowCopy />
+        <TextField value={data?.id} allowCopy />
       </Info>
 
       <Info label={formatMessage(labels.distinctId)} icon={<KeyRound />}>
@@ -83,7 +83,7 @@ const Info = ({
       <Label>{label}</Label>
       <Row alignItems="center" gap>
         {icon && <Icon>{icon}</Icon>}
-        {children || '—'}
+        <Text>{children || '—'}</Text>
       </Row>
     </Column>
   );
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionStats.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
similarity index 100%
rename from src/app/(main)/websites/[websiteId]/sessions/SessionStats.tsx
rename to src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx
new file mode 100644
index 000000000..8d85a7c73
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx
@@ -0,0 +1,16 @@
+import { SessionDetailsPage } from './SessionDetailsPage';
+import { Metadata } from 'next';
+
+export default async function WebsitePage({
+  params,
+}: {
+  params: Promise<{ websiteId: string; sessionId: string }>;
+}) {
+  const { websiteId, sessionId } = await params;
+
+  return <SessionDetailsPage websiteId={websiteId} sessionId={sessionId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Websites',
+};
diff --git a/src/app/share/[...shareId]/SharePage.tsx b/src/app/share/[...shareId]/SharePage.tsx
index f33798a1c..0fa3c0bfe 100644
--- a/src/app/share/[...shareId]/SharePage.tsx
+++ b/src/app/share/[...shareId]/SharePage.tsx
@@ -6,7 +6,6 @@ import { useShareTokenQuery } from '@/components/hooks';
 import { PageBody } from '@/components/common/PageBody';
 import { Header } from './Header';
 import { Footer } from './Footer';
-import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
 
 export function SharePage({ shareId }) {
   const { shareToken, isLoading } = useShareTokenQuery(shareId);
@@ -20,7 +19,6 @@ export function SharePage({ shareId }) {
       <PageBody gap>
         <Header />
         <WebsiteProvider websiteId={shareToken.websiteId}>
-          <WebsiteHeader showActions={false} />
           <WebsitePage websiteId={shareToken.websiteId} />
         </WebsiteProvider>
         <Footer />
diff --git a/src/components/common/LoadingPanel.tsx b/src/components/common/LoadingPanel.tsx
index b3ff7a09f..a0159a029 100644
--- a/src/components/common/LoadingPanel.tsx
+++ b/src/components/common/LoadingPanel.tsx
@@ -29,31 +29,25 @@ export function LoadingPanel({
 }: LoadingPanelProps) {
   const empty = isEmpty ?? checkEmpty(data);
 
-  // Show loading spinner only if no data exists
-  if (isLoading || isFetching) {
-    return (
-      <Column position="relative" height="100%" width="100%" {...props}>
-        <Loading icon={loadingIcon} placement={loadingPlacement} />
-      </Column>
-    );
-  }
+  return (
+    <>
+      {/* Show loading spinner only if no data exists */}
+      {(isLoading || isFetching) && (
+        <Column position="relative" height="100%" {...props}>
+          <Loading icon={loadingIcon} placement={loadingPlacement} />
+        </Column>
+      )}
 
-  // Show error
-  if (error) {
-    return <ErrorMessage />;
-  }
+      {/* Show error */}
+      {error && <ErrorMessage />}
 
-  // Show empty state (once loaded)
-  if (!error && !isLoading && !isFetching && empty) {
-    return renderEmpty();
-  }
+      {/* Show empty state (once loaded) */}
+      {!error && !isLoading && !isFetching && empty && renderEmpty()}
 
-  // Show main content when data exists
-  if (!isLoading && !isFetching && !error && !empty) {
-    return children;
-  }
-
-  return null;
+      {/* Show main content when data exists */}
+      {!isLoading && !isFetching && !error && !empty && children}
+    </>
+  );
 }
 
 function checkEmpty(data: any) {
diff --git a/src/components/hooks/queries/useEventDataEventsQuery.ts b/src/components/hooks/queries/useEventDataEventsQuery.ts
index 2c91dece5..5273181e5 100644
--- a/src/components/hooks/queries/useEventDataEventsQuery.ts
+++ b/src/components/hooks/queries/useEventDataEventsQuery.ts
@@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types';
 
 export function useEventDataEventsQuery(websiteId: string, options?: ReactQueryOptions) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery({
diff --git a/src/components/hooks/queries/useEventDataPropertiesQuery.ts b/src/components/hooks/queries/useEventDataPropertiesQuery.ts
index 19a2eb61d..26929700b 100644
--- a/src/components/hooks/queries/useEventDataPropertiesQuery.ts
+++ b/src/components/hooks/queries/useEventDataPropertiesQuery.ts
@@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types';
 
 export function useEventDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery<any>({
diff --git a/src/components/hooks/queries/useEventDataQuery.ts b/src/components/hooks/queries/useEventDataQuery.ts
index 7e6f66ec2..00f5d14de 100644
--- a/src/components/hooks/queries/useEventDataQuery.ts
+++ b/src/components/hooks/queries/useEventDataQuery.ts
@@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types';
 
 export function useEventDataQuery(websiteId: string, eventId: string, options?: ReactQueryOptions) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const params = useFilterParameters();
 
   return useQuery({
diff --git a/src/components/hooks/queries/useEventDataValuesQuery.ts b/src/components/hooks/queries/useEventDataValuesQuery.ts
index de3b0590b..4b56e5537 100644
--- a/src/components/hooks/queries/useEventDataValuesQuery.ts
+++ b/src/components/hooks/queries/useEventDataValuesQuery.ts
@@ -10,7 +10,7 @@ export function useEventDataValuesQuery(
   options?: ReactQueryOptions,
 ) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery<any>({
diff --git a/src/components/hooks/queries/useResultQuery.ts b/src/components/hooks/queries/useResultQuery.ts
index 7b7a7bd18..cbc5bf01b 100644
--- a/src/components/hooks/queries/useResultQuery.ts
+++ b/src/components/hooks/queries/useResultQuery.ts
@@ -10,7 +10,7 @@ export function useResultQuery<T = any>(
 ) {
   const { websiteId, ...parameters } = params;
   const { post, useQuery } = useApi();
-  const { startDate, endDate, timezone } = useDateParameters();
+  const { startDate, endDate, timezone } = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery<T>({
diff --git a/src/components/hooks/queries/useSessionDataPropertiesQuery.ts b/src/components/hooks/queries/useSessionDataPropertiesQuery.ts
index 2bb139501..633a6ff83 100644
--- a/src/components/hooks/queries/useSessionDataPropertiesQuery.ts
+++ b/src/components/hooks/queries/useSessionDataPropertiesQuery.ts
@@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types';
 
 export function useSessionDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery<any>({
diff --git a/src/components/hooks/queries/useSessionDataValuesQuery.ts b/src/components/hooks/queries/useSessionDataValuesQuery.ts
index 05373d21a..bf7a8cef7 100644
--- a/src/components/hooks/queries/useSessionDataValuesQuery.ts
+++ b/src/components/hooks/queries/useSessionDataValuesQuery.ts
@@ -9,7 +9,7 @@ export function useSessionDataValuesQuery(
   options?: ReactQueryOptions,
 ) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery<any>({
diff --git a/src/components/hooks/queries/useWebsiteEventsQuery.ts b/src/components/hooks/queries/useWebsiteEventsQuery.ts
index 51902d2f3..0798524ce 100644
--- a/src/components/hooks/queries/useWebsiteEventsQuery.ts
+++ b/src/components/hooks/queries/useWebsiteEventsQuery.ts
@@ -15,7 +15,7 @@ export function useWebsiteEventsQuery(
   options?: ReactQueryOptions,
 ) {
   const { get } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return usePagedQuery({
diff --git a/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts b/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts
index 50861cee6..86fbe428d 100644
--- a/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts
+++ b/src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts
@@ -5,7 +5,7 @@ import { ReactQueryOptions } from '@/lib/types';
 
 export function useWebsiteEventsSeriesQuery(websiteId: string, options?: ReactQueryOptions) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery({
diff --git a/src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts b/src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts
index 8fc9fc7bf..9718dfe13 100644
--- a/src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts
+++ b/src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts
@@ -19,7 +19,7 @@ export function useWebsiteExpandedMetricsQuery(
   options?: ReactQueryOptions<WebsiteExpandedMetricsData>,
 ) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery<WebsiteExpandedMetricsData>({
diff --git a/src/components/hooks/queries/useWebsiteMetricsQuery.ts b/src/components/hooks/queries/useWebsiteMetricsQuery.ts
index 8370db8eb..f521798e2 100644
--- a/src/components/hooks/queries/useWebsiteMetricsQuery.ts
+++ b/src/components/hooks/queries/useWebsiteMetricsQuery.ts
@@ -15,7 +15,7 @@ export function useWebsiteMetricsQuery(
   options?: ReactQueryOptions<WebsiteMetricsData>,
 ) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery<WebsiteMetricsData>({
diff --git a/src/components/hooks/queries/useWebsitePageviewsQuery.ts b/src/components/hooks/queries/useWebsitePageviewsQuery.ts
index 5784cae8e..c2a12b0b4 100644
--- a/src/components/hooks/queries/useWebsitePageviewsQuery.ts
+++ b/src/components/hooks/queries/useWebsitePageviewsQuery.ts
@@ -13,7 +13,7 @@ export function useWebsitePageviewsQuery(
   options?: ReactQueryOptions<WebsitePageviewsData>,
 ) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const queryParams = useFilterParameters();
 
   return useQuery<WebsitePageviewsData>({
diff --git a/src/components/hooks/queries/useWebsiteSessionQuery.ts b/src/components/hooks/queries/useWebsiteSessionQuery.ts
index 21e949114..053dae315 100644
--- a/src/components/hooks/queries/useWebsiteSessionQuery.ts
+++ b/src/components/hooks/queries/useWebsiteSessionQuery.ts
@@ -8,6 +8,5 @@ export function useWebsiteSessionQuery(websiteId: string, sessionId: string) {
     queryFn: () => {
       return get(`/websites/${websiteId}/sessions/${sessionId}`);
     },
-    enabled: Boolean(websiteId && sessionId),
   });
 }
diff --git a/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts b/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts
index 9c9aaddc7..8d1f5d556 100644
--- a/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts
+++ b/src/components/hooks/queries/useWebsiteSessionStatsQuery.ts
@@ -4,7 +4,7 @@ import { useDateParameters } from '../useDateParameters';
 
 export function useWebsiteSessionStatsQuery(websiteId: string, options?: Record<string, string>) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery({
diff --git a/src/components/hooks/queries/useWebsiteSessionsQuery.ts b/src/components/hooks/queries/useWebsiteSessionsQuery.ts
index a3de19ca0..f16cfc85e 100644
--- a/src/components/hooks/queries/useWebsiteSessionsQuery.ts
+++ b/src/components/hooks/queries/useWebsiteSessionsQuery.ts
@@ -10,7 +10,7 @@ export function useWebsiteSessionsQuery(
 ) {
   const { get } = useApi();
   const { modified } = useModified(`sessions`);
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return usePagedQuery({
diff --git a/src/components/hooks/queries/useWebsiteStatsQuery.ts b/src/components/hooks/queries/useWebsiteStatsQuery.ts
index 98ae9d8ff..c42613a9c 100644
--- a/src/components/hooks/queries/useWebsiteStatsQuery.ts
+++ b/src/components/hooks/queries/useWebsiteStatsQuery.ts
@@ -23,7 +23,7 @@ export function useWebsiteStatsQuery(
   options?: UseQueryOptions<WebsiteStatsData, Error, WebsiteStatsData>,
 ) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery<WebsiteStatsData>({
diff --git a/src/components/hooks/queries/useWeeklyTrafficQuery.ts b/src/components/hooks/queries/useWeeklyTrafficQuery.ts
index 5c09670ad..fe0bbae19 100644
--- a/src/components/hooks/queries/useWeeklyTrafficQuery.ts
+++ b/src/components/hooks/queries/useWeeklyTrafficQuery.ts
@@ -6,7 +6,7 @@ import { useFilterParameters } from '@/components/hooks/useFilterParameters';
 export function useWeeklyTrafficQuery(websiteId: string, params?: Record<string, string | number>) {
   const { get, useQuery } = useApi();
   const { modified } = useModified(`sessions`);
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
 
   return useQuery({
diff --git a/src/components/hooks/useDateRange.ts b/src/components/hooks/useDateRange.ts
index de53343a7..0b8db7ce1 100644
--- a/src/components/hooks/useDateRange.ts
+++ b/src/components/hooks/useDateRange.ts
@@ -2,20 +2,16 @@ import { useNavigation } from '@/components/hooks/useNavigation';
 import { useMemo } from 'react';
 import { getCompareDate, getOffsetDateRange, parseDateRange } from '@/lib/date';
 import { useLocale } from '@/components/hooks/useLocale';
-import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
-import { getItem } from '@/lib/storage';
+import { DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
 
 export function useDateRange(options: { ignoreOffset?: boolean } = {}) {
   const {
-    query: { date = '', offset = 0, compare = 'prev' },
+    query: { date = DEFAULT_DATE_RANGE_VALUE, offset = 0, compare = 'prev', all },
   } = useNavigation();
   const { locale } = useLocale();
 
   const dateRange = useMemo(() => {
-    const dateRangeObject = parseDateRange(
-      date || getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE_VALUE,
-      locale,
-    );
+    const dateRangeObject = parseDateRange(date, locale);
 
     return !options.ignoreOffset && offset
       ? getOffsetDateRange(dateRangeObject, +offset)
@@ -28,7 +24,7 @@ export function useDateRange(options: { ignoreOffset?: boolean } = {}) {
     date,
     offset,
     compare,
-    isAllTime: date.endsWith(`:all`),
+    isAllTime: !!all,
     isCustomRange: date.startsWith('range:'),
     dateRange,
     dateCompare,
diff --git a/src/components/input/DateFilter.tsx b/src/components/input/DateFilter.tsx
index 44c725cf8..cd0164915 100644
--- a/src/components/input/DateFilter.tsx
+++ b/src/components/input/DateFilter.tsx
@@ -99,13 +99,11 @@ export function DateFilter({
     );
   };
 
-  const selectedValue = value.endsWith(':all') ? 'all' : value;
-
   return (
     <>
       <Select
         {...props}
-        value={selectedValue}
+        value={value}
         placeholder={formatMessage(labels.selectDate)}
         onChange={handleChange}
         renderValue={renderValue}
diff --git a/src/components/input/ExportButton.tsx b/src/components/input/ExportButton.tsx
index 15fb21240..76f63e2c7 100644
--- a/src/components/input/ExportButton.tsx
+++ b/src/components/input/ExportButton.tsx
@@ -9,7 +9,7 @@ import { useFilterParameters } from '@/components/hooks/useFilterParameters';
 export function ExportButton({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const [isLoading, setIsLoading] = useState(false);
-  const date = useDateParameters();
+  const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
   const searchParams = useSearchParams();
   const { get } = useApi();
diff --git a/src/components/input/WebsiteDateFilter.tsx b/src/components/input/WebsiteDateFilter.tsx
index 200ea347e..6b59681b1 100644
--- a/src/components/input/WebsiteDateFilter.tsx
+++ b/src/components/input/WebsiteDateFilter.tsx
@@ -35,12 +35,13 @@ export function WebsiteDateFilter({
     if (date === 'all') {
       router.push(
         updateParams({
-          date: `${getDateRangeValue(websiteDateRange.startDate, websiteDateRange.endDate)}:all`,
+          date: getDateRangeValue(websiteDateRange.startDate, websiteDateRange.endDate),
           offset: undefined,
+          all: 1,
         }),
       );
     } else {
-      router.push(updateParams({ date, offset: undefined }));
+      router.push(updateParams({ date, offset: undefined, all: undefined }));
     }
   };
 
diff --git a/src/components/input/WebsiteSelect.tsx b/src/components/input/WebsiteSelect.tsx
index 01861fbd4..103e5c592 100644
--- a/src/components/input/WebsiteSelect.tsx
+++ b/src/components/input/WebsiteSelect.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Select, SelectProps, ListItem, Text, Row } from '@umami/react-zen';
-import { useUserWebsitesQuery, useMessages, useLoginQuery, useWebsite } from '@/components/hooks';
+import { Select, SelectProps, ListItem } from '@umami/react-zen';
+import { useUserWebsitesQuery, useMessages, useLoginQuery } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 
 export function WebsiteSelect({
@@ -15,15 +15,12 @@ export function WebsiteSelect({
   includeTeams?: boolean;
 } & SelectProps) {
   const { formatMessage, messages } = useMessages();
-  const website = useWebsite();
-  const [name, setName] = useState<string>(website?.name);
   const [search, setSearch] = useState('');
   const { user } = useLoginQuery();
   const { data, isLoading } = useUserWebsitesQuery(
     { userId: user?.id, teamId },
-    { search, pageSize: 10, includeTeams },
+    { search, pageSize: 5, includeTeams },
   );
-  const listItems: { id: string; name: string }[] = data?.['data'] || [];
 
   const handleSearch = (value: string) => {
     setSearch(value);
@@ -33,34 +30,19 @@ export function WebsiteSelect({
     setSearch('');
   };
 
-  const handleChange = (id: string) => {
-    setName(listItems.find(item => item.id === id)?.name);
-    onChange(id);
-  };
-
-  const renderValue = () => {
-    return (
-      <Row maxWidth="160px">
-        <Text truncate>{name}</Text>
-      </Row>
-    );
-  };
-
   return (
     <Select
       {...props}
-      items={listItems}
+      items={data?.['data'] || []}
       value={websiteId}
       isLoading={isLoading}
       allowSearch={true}
       searchValue={search}
       onSearch={handleSearch}
-      onChange={handleChange}
+      onChange={onChange}
       onOpenChange={handleOpenChange}
-      renderValue={renderValue}
       listProps={{
         renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
-        style: { maxHeight: '400px' },
       }}
     >
       {({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
diff --git a/src/styles/global.css b/src/styles/global.css
index d63ebf38e..5f3b16028 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,7 +3,7 @@ body {
   font-family: var(--font-family), sans-serif;
   color: var(--font-color);
   font-size: var(--font-size);
-  background-color: var(--base-color-2);
+  background-color: var(--background-color);
   width: 100%;
   min-height: 100vh;
 }