diff --git a/apps/api/src/controllers/live.controller.ts b/apps/api/src/controllers/live.controller.ts
index 6847bfe7..9a08cc01 100644
--- a/apps/api/src/controllers/live.controller.ts
+++ b/apps/api/src/controllers/live.controller.ts
@@ -9,6 +9,7 @@ import {
   getEvents,
   getLiveVisitors,
   getProfileById,
+  getProfileByIdCached,
   TABLE_NAMES,
   transformMinimalEvent,
 } from '@openpanel/db';
@@ -144,7 +145,10 @@ export async function wsProjectEvents(
   const message = async (channel: string, message: string) => {
     const event = getSuperJson<IServiceEvent>(message);
     if (event?.projectId === params.projectId) {
-      const profile = await getProfileById(event.profileId, event.projectId);
+      const profile = await getProfileByIdCached(
+        event.profileId,
+        event.projectId
+      );
       connection.socket.send(
         superjson.stringify(
           access
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 4213005f..884d5905 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -64,6 +64,7 @@
     "embla-carousel-react": "8.0.0-rc22",
     "flag-icons": "^7.1.0",
     "framer-motion": "^11.0.28",
+    "geist": "^1.3.1",
     "hamburger-react": "^2.5.0",
     "input-otp": "^1.2.4",
     "javascript-time-ago": "^2.5.9",
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
index 7a874917..caed65bb 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
@@ -31,15 +31,16 @@ import {
   getDefaultIntervalByRange,
   timeWindows,
 } from '@openpanel/constants';
-import type { getReportsByDashboardId } from '@openpanel/db';
+import type { getReportsByDashboardId, IServiceDashboard } from '@openpanel/db';
 
 import { OverviewReportRange } from '../../overview-sticky-header';
 
 interface ListReportsProps {
   reports: Awaited<ReturnType<typeof getReportsByDashboardId>>;
+  dashboard: IServiceDashboard;
 }
 
-export function ListReports({ reports }: ListReportsProps) {
+export function ListReports({ reports, dashboard }: ListReportsProps) {
   const router = useRouter();
   const params = useAppParams<{ dashboardId: string }>();
   const { range, startDate, endDate } = useOverviewOptions();
@@ -52,25 +53,28 @@ export function ListReports({ reports }: ListReportsProps) {
   });
   return (
     <>
-      <StickyBelowHeader className="flex items-center justify-between p-4">
-        <OverviewReportRange />
-        <Button
-          icon={PlusIcon}
-          onClick={() => {
-            router.push(
-              `/${params.organizationSlug}/${
-                params.projectId
-              }/reports?${new URLSearchParams({
-                dashboardId: params.dashboardId,
-              }).toString()}`
-            );
-          }}
-        >
-          <span className="max-sm:hidden">Create report</span>
-          <span className="sm:hidden">Report</span>
-        </Button>
-      </StickyBelowHeader>
-      <div className="mx-auto flex max-w-3xl flex-col gap-8 p-4 md:p-8">
+      <div className="row mb-4 items-center justify-between">
+        <h1 className="text-3xl font-semibold">{dashboard.name}</h1>
+        <div className="flex items-center justify-end gap-2">
+          <OverviewReportRange />
+          <Button
+            icon={PlusIcon}
+            onClick={() => {
+              router.push(
+                `/${params.organizationSlug}/${
+                  params.projectId
+                }/reports?${new URLSearchParams({
+                  dashboardId: params.dashboardId,
+                }).toString()}`
+              );
+            }}
+          >
+            <span className="max-sm:hidden">Create report</span>
+            <span className="sm:hidden">Report</span>
+          </Button>
+        </div>
+      </div>
+      <div className="flex max-w-6xl flex-col gap-8">
         {reports.map((report) => {
           const chartRange = report.range;
           return (
@@ -83,7 +87,7 @@ export function ListReports({ reports }: ListReportsProps) {
                 <div>
                   <div className="font-medium">{report.name}</div>
                   {chartRange !== null && (
-                    <div className="mt-2 flex gap-2 text-sm">
+                    <div className="mt-2 flex gap-2 ">
                       <span
                         className={
                           range !== null || (startDate && endDate)
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/page.tsx
index 6cb18c14..0fc967fe 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/page.tsx
@@ -1,4 +1,4 @@
-import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
+import { Padding } from '@/components/ui/padding';
 import { notFound } from 'next/navigation';
 
 import { getDashboardById, getReportsByDashboardId } from '@openpanel/db';
@@ -14,7 +14,7 @@ interface PageProps {
 }
 
 export default async function Page({
-  params: { organizationSlug, projectId, dashboardId },
+  params: { projectId, dashboardId },
 }: PageProps) {
   const [dashboard, reports] = await Promise.all([
     getDashboardById(dashboardId, projectId),
@@ -26,9 +26,8 @@ export default async function Page({
   }
 
   return (
-    <>
-      <PageLayout title={dashboard.name} organizationSlug={organizationSlug} />
-      <ListReports reports={reports} />
-    </>
+    <Padding>
+      <ListReports reports={reports} dashboard={dashboard} />
+    </Padding>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/header.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/header.tsx
index e39bf721..9ddc769a 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/header.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/header.tsx
@@ -4,23 +4,19 @@ import { Button } from '@/components/ui/button';
 import { pushModal } from '@/modals';
 import { PlusIcon } from 'lucide-react';
 
-import { StickyBelowHeader } from '../../layout-sticky-below-header';
-
 export function HeaderDashboards() {
   return (
-    <StickyBelowHeader>
-      <div className="flex items-center justify-between p-4">
-        <div />
-        <Button
-          icon={PlusIcon}
-          onClick={() => {
-            pushModal('AddDashboard');
-          }}
-        >
-          <span className="max-sm:hidden">Create dashboard</span>
-          <span className="sm:hidden">Dashboard</span>
-        </Button>
-      </div>
-    </StickyBelowHeader>
+    <div className="mb-4 flex items-center justify-between">
+      <h1 className="text-3xl font-semibold">Dashboards</h1>
+      <Button
+        icon={PlusIcon}
+        onClick={() => {
+          pushModal('AddDashboard');
+        }}
+      >
+        <span className="max-sm:hidden">Create dashboard</span>
+        <span className="sm:hidden">Dashboard</span>
+      </Button>
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/index.tsx
index 9456a94d..07e24066 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/index.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/index.tsx
@@ -1,8 +1,6 @@
-import { FullPageEmptyState } from '@/components/full-page-empty-state';
 import FullPageLoadingState from '@/components/full-page-loading-state';
+import { Padding } from '@/components/ui/padding';
 import withSuspense from '@/hocs/with-suspense';
-import type { LucideIcon } from 'lucide-react';
-import { Loader2Icon } from 'lucide-react';
 
 import { getDashboardsByProjectId } from '@openpanel/db';
 
@@ -16,7 +14,12 @@ interface Props {
 const ListDashboardsServer = async ({ projectId }: Props) => {
   const dashboards = await getDashboardsByProjectId(projectId);
 
-  return <ListDashboards dashboards={dashboards} />;
+  return (
+    <Padding>
+      <HeaderDashboards />
+      <ListDashboards dashboards={dashboards} />;
+    </Padding>
+  );
 };
 
 export default withSuspense(ListDashboardsServer, FullPageLoadingState);
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/list-dashboards.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/list-dashboards.tsx
index 999bd125..c9d04503 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/list-dashboards.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/list-dashboards.tsx
@@ -75,7 +75,7 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
 
   return (
     <>
-      <div className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 md:grid-cols-3">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         {dashboards.map((item) => {
           const visibleReports = item.reports.slice(
             0,
@@ -88,16 +88,16 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
                   href={`/${organizationSlug}/${projectId}/dashboards/${item.id}`}
                   className="flex flex-col p-4 @container"
                 >
-                  <div>
+                  <div className="col gap-2">
                     <div className="font-medium">{item.name}</div>
-                    <div className="text-xs text-muted-foreground">
+                    <div className="text-sm text-muted-foreground">
                       {format(item.updatedAt, 'HH:mm · MMM d')}
                     </div>
                   </div>
                   <div
                     className={cn(
-                      'mt-4 grid gap-4',
-                      'grid-cols-2 @xs:grid-cols-3 @lg:grid-cols-4'
+                      'mt-4 grid gap-2',
+                      'grid-cols-1 @sm:grid-cols-2'
                     )}
                   >
                     {visibleReports.map((report) => {
@@ -114,26 +114,26 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
 
                       return (
                         <div
-                          className="bg-def-200 flex flex-col rounded-xl p-4"
+                          className="row items-center gap-2 rounded-md bg-def-200 p-4 py-2"
                           key={report.id}
                         >
-                          <Icon size={24} className="text-highlight" />
-                          <div className="mt-2 w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs">
+                          <Icon size={24} />
+                          <div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm">
                             {report.name}
                           </div>
                         </div>
                       );
                     })}
                     {item.reports.length > 6 && (
-                      <div className="bg-def-200 flex flex-col rounded-xl p-4">
-                        <PlusIcon size={24} className="text-highlight" />
-                        <div className="mt-2 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs">
+                      <div className="row items-center gap-2 rounded-md bg-def-100 p-4 py-2">
+                        <PlusIcon size={24} />
+                        <div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm">
                           {item.reports.length - 5} more
                         </div>
                       </div>
                     )}
                   </div>
-                  {/* <span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-muted-foreground">
+                  {/* <span className="overflow-hidden text-ellipsis whitespace-nowrap  text-muted-foreground">
                     <span className="mr-2 font-medium">
                       {item.reports.length} reports
                     </span>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/page.tsx
index d169e82c..8787f9c2 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/page.tsx
@@ -1,23 +1,11 @@
-import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
-
 import ListDashboardsServer from './list-dashboards';
-import { HeaderDashboards } from './list-dashboards/header';
 
 interface PageProps {
   params: {
     projectId: string;
-    organizationSlug: string;
   };
 }
 
-export default function Page({
-  params: { projectId, organizationSlug },
-}: PageProps) {
-  return (
-    <>
-      <PageLayout title="Dashboards" organizationSlug={organizationSlug} />
-      <HeaderDashboards />
-      <ListDashboardsServer projectId={projectId} />
-    </>
-  );
+export default function Page({ params: { projectId } }: PageProps) {
+  return <ListDashboardsServer projectId={projectId} />;
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/charts.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/charts.tsx
new file mode 100644
index 00000000..7d89772e
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/charts.tsx
@@ -0,0 +1,181 @@
+'use client';
+
+import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
+import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
+import { ChartRootShortcut } from '@/components/report/chart';
+import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
+import {
+  useEventQueryFilters,
+  useEventQueryNamesFilter,
+} from '@/hooks/useEventQueryFilters';
+
+import type { IChartEvent } from '@openpanel/validation';
+
+interface Props {
+  projectId: string;
+}
+
+function Charts({ projectId }: Props) {
+  const [filters] = useEventQueryFilters();
+  const [events] = useEventQueryNamesFilter();
+  const fallback: IChartEvent[] = [
+    {
+      id: 'A',
+      name: '*',
+      displayName: 'All events',
+      segment: 'event',
+      filters: filters ?? [],
+    },
+  ];
+
+  return (
+    <div>
+      <div className="mb-2 flex items-center gap-2">
+        <OverviewFiltersDrawer
+          mode="events"
+          projectId={projectId}
+          enableEventsFilter
+        />
+        <OverviewFiltersButtons className="justify-end p-0" />
+      </div>
+      <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+        <Widget className="w-full">
+          <WidgetHead>
+            <span className="title">Events per day</span>
+          </WidgetHead>
+          <WidgetBody>
+            <ChartRootShortcut
+              projectId={projectId}
+              range="30d"
+              chartType="histogram"
+              events={
+                events && events.length > 0
+                  ? events.map((name) => ({
+                      id: name,
+                      name,
+                      displayName: name,
+                      segment: 'event',
+                      filters: filters ?? [],
+                    }))
+                  : fallback
+              }
+            />
+          </WidgetBody>
+        </Widget>
+        <Widget className="w-full">
+          <WidgetHead>
+            <span className="title">Event distribution</span>
+          </WidgetHead>
+          <WidgetBody>
+            <ChartRootShortcut
+              projectId={projectId}
+              range="30d"
+              chartType="pie"
+              breakdowns={[
+                {
+                  id: 'A',
+                  name: 'name',
+                },
+              ]}
+              events={
+                events && events.length > 0
+                  ? events.map((name) => ({
+                      id: name,
+                      name,
+                      displayName: name,
+                      segment: 'event',
+                      filters: filters ?? [],
+                    }))
+                  : [
+                      {
+                        id: 'A',
+                        name: '*',
+                        displayName: 'All events',
+                        segment: 'event',
+                        filters: filters ?? [],
+                      },
+                    ]
+              }
+            />
+          </WidgetBody>
+        </Widget>
+        <Widget className="w-full">
+          <WidgetHead>
+            <span className="title">Event distribution</span>
+          </WidgetHead>
+          <WidgetBody>
+            <ChartRootShortcut
+              projectId={projectId}
+              range="30d"
+              chartType="bar"
+              breakdowns={[
+                {
+                  id: 'A',
+                  name: 'name',
+                },
+              ]}
+              events={
+                events && events.length > 0
+                  ? events.map((name) => ({
+                      id: name,
+                      name,
+                      displayName: name,
+                      segment: 'event',
+                      filters: filters ?? [],
+                    }))
+                  : [
+                      {
+                        id: 'A',
+                        name: '*',
+                        displayName: 'All events',
+                        segment: 'event',
+                        filters: filters ?? [],
+                      },
+                    ]
+              }
+            />
+          </WidgetBody>
+        </Widget>
+        <Widget className="w-full">
+          <WidgetHead>
+            <span className="title">Event distribution</span>
+          </WidgetHead>
+          <WidgetBody>
+            <ChartRootShortcut
+              projectId={projectId}
+              range="30d"
+              chartType="linear"
+              breakdowns={[
+                {
+                  id: 'A',
+                  name: 'name',
+                },
+              ]}
+              events={
+                events && events.length > 0
+                  ? events.map((name) => ({
+                      id: name,
+                      name,
+                      displayName: name,
+                      segment: 'event',
+                      filters: filters ?? [],
+                    }))
+                  : [
+                      {
+                        id: 'A',
+                        name: '*',
+                        displayName: 'All events',
+                        segment: 'event',
+                        filters: filters ?? [],
+                      },
+                    ]
+              }
+            />
+          </WidgetBody>
+        </Widget>
+      </div>
+    </div>
+  );
+}
+
+export default Charts;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/charts/events-per-day-chart.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/charts/events-per-day-chart.tsx
deleted file mode 100644
index 6834e054..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/charts/events-per-day-chart.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { ChartRootShortcut } from '@/components/report/chart';
-import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
-
-import type { IChartEvent } from '@openpanel/validation';
-
-interface Props {
-  projectId: string;
-  events?: string[];
-  filters?: any[];
-}
-
-export function EventsPerDayChart({ projectId, filters, events }: Props) {
-  const fallback: IChartEvent[] = [
-    {
-      id: 'A',
-      name: '*',
-      displayName: 'All events',
-      segment: 'event',
-      filters: filters ?? [],
-    },
-  ];
-
-  return (
-    <Widget className="w-full">
-      <WidgetHead>
-        <span className="title">Events per day</span>
-      </WidgetHead>
-      <WidgetBody>
-        <ChartRootShortcut
-          projectId={projectId}
-          range="30d"
-          chartType="histogram"
-          events={
-            events && events.length > 0
-              ? events.map((name) => ({
-                  id: name,
-                  name,
-                  displayName: name,
-                  segment: 'event',
-                  filters: filters ?? [],
-                }))
-              : fallback
-          }
-        />
-      </WidgetBody>
-    </Widget>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/conversions.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/conversions.tsx
new file mode 100644
index 00000000..67ac16e4
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/conversions.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { EventsTable } from '@/components/events/table';
+import { api } from '@/trpc/client';
+
+type Props = {
+  projectId: string;
+  profileId?: string;
+};
+
+const Conversions = ({ projectId }: Props) => {
+  const query = api.event.conversions.useQuery(
+    {
+      projectId,
+    },
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  return <EventsTable query={query} />;
+};
+
+export default Conversions;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-conversions-list/event-conversions-list.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-conversions-list/event-conversions-list.tsx
deleted file mode 100644
index 34ec078a..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-conversions-list/event-conversions-list.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client';
-
-import { Fragment } from 'react';
-import { Widget, WidgetHead } from '@/components/widget';
-import { isSameDay } from 'date-fns';
-
-import type { IServiceEvent } from '@openpanel/db';
-
-import { EventListItem } from '../event-list/event-list-item';
-
-function showDateHeader(a: Date, b?: Date) {
-  if (!b) return true;
-  return !isSameDay(a, b);
-}
-
-interface EventListProps {
-  data: IServiceEvent[];
-}
-export function EventConversionsList({ data }: EventListProps) {
-  return (
-    <Widget className="w-full">
-      <WidgetHead>
-        <div className="title">Conversions</div>
-      </WidgetHead>
-      <div className="flex max-h-80 flex-col gap-2 overflow-y-auto p-4">
-        {data.map((item, index, list) => (
-          <Fragment key={item.id}>
-            {showDateHeader(item.createdAt, list[index - 1]?.createdAt) && (
-              <div className="flex flex-row justify-between gap-2 [&:not(:first-child)]:mt-12">
-                <div className="flex gap-2">
-                  <div className="flex h-8 items-center gap-2 rounded border border-def-200 bg-def-200 px-3 text-sm font-medium leading-none">
-                    {item.createdAt.toLocaleDateString()}
-                  </div>
-                </div>
-              </div>
-            )}
-            <EventListItem {...item} />
-          </Fragment>
-        ))}
-      </div>
-    </Widget>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-conversions-list/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-conversions-list/index.tsx
deleted file mode 100644
index fb204124..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-conversions-list/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import withLoadingWidget from '@/hocs/with-loading-widget';
-import { escape } from 'sqlstring';
-
-import { db, getEvents, TABLE_NAMES } from '@openpanel/db';
-
-import { EventConversionsList } from './event-conversions-list';
-
-interface Props {
-  projectId: string;
-}
-
-async function EventConversionsListServer({ projectId }: Props) {
-  const conversions = await db.eventMeta.findMany({
-    where: {
-      projectId,
-      conversion: true,
-    },
-  });
-
-  if (conversions.length === 0) {
-    return null;
-  }
-
-  const events = await getEvents(
-    `SELECT * FROM ${TABLE_NAMES.events} WHERE project_id = ${escape(projectId)} AND name IN (${conversions.map((c) => escape(c.name)).join(', ')}) ORDER BY created_at DESC LIMIT 20;`,
-    {
-      profile: true,
-      meta: true,
-    }
-  );
-
-  return <EventConversionsList data={events} />;
-}
-
-export default withLoadingWidget(EventConversionsListServer);
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-details.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-details.tsx
deleted file mode 100644
index 2d541d66..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-details.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import { useState } from 'react';
-import type { Dispatch, SetStateAction } from 'react';
-import { ChartRootShortcut } from '@/components/report/chart';
-import { Button } from '@/components/ui/button';
-import { KeyValue } from '@/components/ui/key-value';
-import {
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  useEventQueryFilters,
-  useEventQueryNamesFilter,
-} from '@/hooks/useEventQueryFilters';
-import { round } from 'mathjs';
-
-import type { IServiceEvent } from '@openpanel/db';
-
-import { EventEdit } from './event-edit';
-
-interface Props {
-  event: IServiceEvent;
-  open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-export function EventDetails({ event, open, setOpen }: Props) {
-  const { name } = event;
-  const [isEditOpen, setIsEditOpen] = useState(false);
-  const [, setFilter] = useEventQueryFilters({ shallow: false });
-  const [, setEvents] = useEventQueryNamesFilter({ shallow: false });
-
-  const common = [
-    {
-      name: 'Origin',
-      value: event.origin,
-    },
-    {
-      name: 'Duration',
-      value: event.duration ? round(event.duration / 1000, 1) : undefined,
-    },
-    {
-      name: 'Referrer',
-      value: event.referrer,
-      onClick() {
-        setFilter('referrer', event.referrer ?? '');
-      },
-    },
-    {
-      name: 'Referrer name',
-      value: event.referrerName,
-      onClick() {
-        setFilter('referrer_name', event.referrerName ?? '');
-      },
-    },
-    {
-      name: 'Referrer type',
-      value: event.referrerType,
-      onClick() {
-        setFilter('referrer_type', event.referrerType ?? '');
-      },
-    },
-    {
-      name: 'Brand',
-      value: event.brand,
-      onClick() {
-        setFilter('brand', event.brand ?? '');
-      },
-    },
-    {
-      name: 'Model',
-      value: event.model,
-      onClick() {
-        setFilter('model', event.model ?? '');
-      },
-    },
-    {
-      name: 'Browser',
-      value: event.browser,
-      onClick() {
-        setFilter('browser', event.browser ?? '');
-      },
-    },
-    {
-      name: 'Browser version',
-      value: event.browserVersion,
-      onClick() {
-        setFilter('browser_version', event.browserVersion ?? '');
-      },
-    },
-    {
-      name: 'OS',
-      value: event.os,
-      onClick() {
-        setFilter('os', event.os ?? '');
-      },
-    },
-    {
-      name: 'OS version',
-      value: event.osVersion,
-      onClick() {
-        setFilter('os_version', event.osVersion ?? '');
-      },
-    },
-    {
-      name: 'City',
-      value: event.city,
-      onClick() {
-        setFilter('city', event.city ?? '');
-      },
-    },
-    {
-      name: 'Region',
-      value: event.region,
-      onClick() {
-        setFilter('region', event.region ?? '');
-      },
-    },
-    {
-      name: 'Country',
-      value: event.country,
-      onClick() {
-        setFilter('country', event.country ?? '');
-      },
-    },
-    {
-      name: 'Device',
-      value: event.device,
-      onClick() {
-        setFilter('device', event.device ?? '');
-      },
-    },
-  ].filter((item) => typeof item.value === 'string' && item.value);
-
-  const properties = Object.entries(event.properties)
-    .map(([name, value]) => ({
-      name,
-      value: value as string | number | undefined,
-    }))
-    .filter((item) => typeof item.value === 'string' && item.value);
-
-  return (
-    <>
-      <Sheet open={open} onOpenChange={setOpen}>
-        <SheetContent>
-          <div>
-            <div className="flex flex-col gap-8">
-              <SheetHeader>
-                <SheetTitle>{name.replace('_', ' ')}</SheetTitle>
-              </SheetHeader>
-
-              {properties.length > 0 && (
-                <div>
-                  <div className="mb-2 text-sm font-medium">Params</div>
-                  <div className="flex flex-wrap gap-2">
-                    {properties.map((item) => (
-                      <KeyValue
-                        key={item.name}
-                        name={item.name.replace(/^__/, '')}
-                        value={item.value}
-                        onClick={() => {
-                          setFilter(
-                            `properties.${item.name}`,
-                            item.value ? String(item.value) : '',
-                            'is'
-                          );
-                        }}
-                      />
-                    ))}
-                  </div>
-                </div>
-              )}
-              <div>
-                <div className="mb-2 text-sm font-medium">Common</div>
-                <div className="flex flex-wrap gap-2">
-                  {common.map((item) => (
-                    <KeyValue
-                      key={item.name}
-                      name={item.name}
-                      value={item.value}
-                      onClick={() => item.onClick?.()}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <div className="mb-2 flex justify-between text-sm font-medium">
-                  <div>Similar events</div>
-                  <button
-                    className="text-muted-foreground hover:underline"
-                    onClick={() => {
-                      setEvents([event.name]);
-                      setOpen(false);
-                    }}
-                  >
-                    Show all
-                  </button>
-                </div>
-                <ChartRootShortcut
-                  projectId={event.projectId}
-                  chartType="histogram"
-                  events={[
-                    {
-                      id: 'A',
-                      name: event.name,
-                      displayName: 'Similar events',
-                      segment: 'event',
-                      filters: [],
-                    },
-                  ]}
-                />
-              </div>
-            </div>
-          </div>
-          <SheetFooter>
-            <Button
-              variant={'secondary'}
-              className="w-full"
-              onClick={() => setIsEditOpen(true)}
-            >
-              Customize &quot;{name}&quot;
-            </Button>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-      <EventEdit event={event} open={isEditOpen} setOpen={setIsEditOpen} />
-    </>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-icon.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-icon.tsx
index 0bfa9cda..d8220eee 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-icon.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-icon.tsx
@@ -21,7 +21,6 @@ const variants = cva('flex shrink-0 items-center justify-center rounded-full', {
 type EventIconProps = VariantProps<typeof variants> & {
   name: string;
   meta?: EventMeta;
-  projectId: string;
   className?: string;
 };
 
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list-item.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list-item.tsx
index 05262267..6ed0db7c 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list-item.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list-item.tsx
@@ -1,17 +1,16 @@
 'use client';
 
-import { useState } from 'react';
 import { SerieIcon } from '@/components/report/chart/SerieIcon';
 import { Tooltiper } from '@/components/ui/tooltip';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useNumber } from '@/hooks/useNumerFormatter';
+import { pushModal } from '@/modals';
 import { cn } from '@/utils/cn';
 import { getProfileName } from '@/utils/getters';
 import Link from 'next/link';
 
 import type { IServiceEvent, IServiceEventMinimal } from '@openpanel/db';
 
-import { EventDetails } from './event-details';
 import { EventIcon } from './event-icon';
 
 type EventListItemProps = IServiceEventMinimal | IServiceEvent;
@@ -20,7 +19,6 @@ export function EventListItem(props: EventListItemProps) {
   const { organizationSlug, projectId } = useAppParams();
   const { createdAt, name, path, duration, meta } = props;
   const profile = 'profile' in props ? props.profile : null;
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
 
   const number = useNumber();
 
@@ -52,17 +50,12 @@ export function EventListItem(props: EventListItemProps) {
 
   return (
     <>
-      {!isMinimal && (
-        <EventDetails
-          event={props}
-          open={isDetailsOpen}
-          setOpen={setIsDetailsOpen}
-        />
-      )}
       <button
         onClick={() => {
           if (!isMinimal) {
-            setIsDetailsOpen(true);
+            pushModal('EventDetails', {
+              id: props.id,
+            });
           }
         }}
         className={cn(
@@ -72,13 +65,8 @@ export function EventListItem(props: EventListItemProps) {
         )}
       >
         <div>
-          <div className="flex items-center gap-4 text-left text-sm">
-            <EventIcon
-              size="sm"
-              name={name}
-              meta={meta}
-              projectId={projectId}
-            />
+          <div className="flex items-center gap-4 text-left ">
+            <EventIcon size="sm" name={name} meta={meta} />
             <span>
               <span className="font-medium">{renderName()}</span>
               {'  '}
@@ -100,14 +88,14 @@ export function EventListItem(props: EventListItemProps) {
                 e.stopPropagation();
               }}
               href={`/${organizationSlug}/${projectId}/profiles/${profile?.id}`}
-              className="max-w-[80px] overflow-hidden text-ellipsis whitespace-nowrap text-sm text-muted-foreground hover:underline"
+              className="max-w-[80px] overflow-hidden text-ellipsis whitespace-nowrap  text-muted-foreground hover:underline"
             >
               {getProfileName(profile)}
             </Link>
           </Tooltiper>
 
           <Tooltiper asChild content={createdAt.toLocaleString()}>
-            <div className="text-sm text-muted-foreground">
+            <div className=" text-muted-foreground">
               {createdAt.toLocaleTimeString()}
             </div>
           </Tooltiper>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list.tsx
deleted file mode 100644
index 8c05453a..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client';
-
-import { Fragment } from 'react';
-import { FullPageEmptyState } from '@/components/full-page-empty-state';
-import { Pagination } from '@/components/pagination';
-import { Button } from '@/components/ui/button';
-import { useCursor } from '@/hooks/useCursor';
-import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
-import { isSameDay } from 'date-fns';
-import { GanttChartIcon } from 'lucide-react';
-
-import type { IServiceEvent } from '@openpanel/db';
-
-import { EventListItem } from './event-list-item';
-import EventListener from './event-listener';
-
-function showDateHeader(a: Date, b?: Date) {
-  if (!b) return true;
-  return !isSameDay(a, b);
-}
-
-interface EventListProps {
-  data: IServiceEvent[];
-  count: number;
-}
-
-function EventList({ data, count }: EventListProps) {
-  const { cursor, setCursor, loading } = useCursor();
-  const [filters] = useEventQueryFilters();
-
-  return (
-    <>
-      {data.length === 0 ? (
-        <FullPageEmptyState title="No events here" icon={GanttChartIcon}>
-          {cursor !== 0 ? (
-            <>
-              <p>Looks like you have reached the end of the list</p>
-              <Button
-                className="mt-4"
-                variant="outline"
-                size="sm"
-                onClick={() => setCursor((p) => Math.max(0, p - 1))}
-              >
-                Go back
-              </Button>
-            </>
-          ) : (
-            <>
-              {filters.length ? (
-                <p>Could not find any events with your filter</p>
-              ) : (
-                <p>We have not received any events yet</p>
-              )}
-            </>
-          )}
-        </FullPageEmptyState>
-      ) : (
-        <>
-          <div className="flex flex-col gap-2">
-            {data.map((item, index, list) => (
-              <Fragment key={item.id}>
-                {showDateHeader(item.createdAt, list[index - 1]?.createdAt) && (
-                  <div className="flex flex-row justify-between gap-2 [&:not(:first-child)]:mt-12">
-                    {index === 0 ? <EventListener /> : <div />}
-                    <div className="flex gap-2">
-                      <div className="flex h-8 items-center gap-2 rounded border border-def-200 bg-def-200 px-3 text-sm font-medium leading-none">
-                        {item.createdAt.toLocaleDateString()}
-                      </div>
-                      {index === 0 && (
-                        <Pagination
-                          size="sm"
-                          cursor={cursor}
-                          setCursor={setCursor}
-                          count={count}
-                          take={50}
-                          loading={loading}
-                        />
-                      )}
-                    </div>
-                  </div>
-                )}
-                <EventListItem {...item} />
-              </Fragment>
-            ))}
-          </div>
-          <Pagination
-            size="sm"
-            className="mt-2"
-            cursor={cursor}
-            setCursor={setCursor}
-            count={count}
-            take={50}
-            loading={loading}
-          />
-        </>
-      )}
-    </>
-  );
-}
-
-export default EventList;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-listener.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-listener.tsx
index feb0bd0a..02e59c48 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-listener.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-listener.tsx
@@ -6,11 +6,10 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useAppParams } from '@/hooks/useAppParams';
-import { useDebounceVal } from '@/hooks/useDebounceVal';
+import { useDebounceState } from '@/hooks/useDebounceState';
 import useWS from '@/hooks/useWS';
 import { cn } from '@/utils/cn';
 import dynamic from 'next/dynamic';
-import { useRouter } from 'next/navigation';
 
 import type { IServiceEventMinimal } from '@openpanel/db';
 
@@ -19,10 +18,13 @@ const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), {
   loading: () => <div>0</div>,
 });
 
-export default function EventListener() {
-  const router = useRouter();
+export default function EventListener({
+  onRefresh,
+}: {
+  onRefresh: () => void;
+}) {
   const { projectId } = useAppParams();
-  const counter = useDebounceVal(0, 1000, {
+  const counter = useDebounceState(0, 1000, {
     maxWait: 5000,
   });
 
@@ -38,9 +40,9 @@ export default function EventListener() {
         <button
           onClick={() => {
             counter.set(0);
-            router.refresh();
+            onRefresh();
           }}
-          className="flex h-8 items-center gap-2 rounded border border-border bg-card px-3 text-sm font-medium leading-none"
+          className="flex h-8 items-center gap-2 rounded border border-border bg-card px-3 font-medium leading-none"
         >
           <div className="relative">
             <div
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/index.tsx
deleted file mode 100644
index f5c630f2..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import withSuspense from '@/hocs/with-suspense';
-
-import { getEventList, getEventsCount } from '@openpanel/db';
-import type { IChartEventFilter } from '@openpanel/validation';
-
-import EventList from './event-list';
-
-type Props = {
-  cursor?: number;
-  projectId: string;
-  filters?: IChartEventFilter[];
-  eventNames?: string[];
-  profileId?: string;
-};
-
-const EventListServer = async ({
-  cursor,
-  projectId,
-  eventNames,
-  filters,
-  profileId,
-}: Props) => {
-  const count = Infinity;
-  const [events] = await Promise.all([
-    getEventList({
-      cursor,
-      projectId,
-      take: 50,
-      events: eventNames,
-      filters,
-      profileId,
-    }),
-  ]);
-
-  return <EventList data={events} count={count} />;
-};
-
-export default withSuspense(EventListServer, () => (
-  <div className="flex flex-col gap-2">
-    <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
-    <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
-    <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
-    <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
-    <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
-  </div>
-));
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/events.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/events.tsx
new file mode 100644
index 00000000..f28ddfe7
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/events.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { TableButtons } from '@/components/data-table';
+import { EventsTable } from '@/components/events/table';
+import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
+import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
+import {
+  useEventQueryFilters,
+  useEventQueryNamesFilter,
+} from '@/hooks/useEventQueryFilters';
+import { api } from '@/trpc/client';
+import { Loader2Icon } from 'lucide-react';
+import { parseAsInteger, useQueryState } from 'nuqs';
+
+import EventListener from './event-list/event-listener';
+
+type Props = {
+  projectId: string;
+  profileId?: string;
+};
+
+const Events = ({ projectId, profileId }: Props) => {
+  const [filters] = useEventQueryFilters();
+  const [eventNames] = useEventQueryNamesFilter();
+  const [cursor, setCursor] = useQueryState(
+    'cursor',
+    parseAsInteger.withDefault(0)
+  );
+  const query = api.event.events.useQuery(
+    {
+      cursor,
+      projectId,
+      take: 50,
+      events: eventNames,
+      filters,
+      profileId,
+    },
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  return (
+    <div>
+      <TableButtons>
+        <EventListener onRefresh={() => query.refetch()} />
+        <OverviewFiltersDrawer
+          mode="events"
+          projectId={projectId}
+          enableEventsFilter
+        />
+        <OverviewFiltersButtons className="justify-end p-0" />
+        {query.isRefetching && (
+          <div className="center-center size-8 rounded border bg-background">
+            <Loader2Icon
+              size={12}
+              className="size-4 shrink-0 animate-spin text-black text-highlight"
+            />
+          </div>
+        )}
+      </TableButtons>
+      <EventsTable query={query} cursor={cursor} setCursor={setCursor} />
+    </div>
+  );
+};
+
+export default Events;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/page.tsx
index 553103a4..587691cc 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/page.tsx
@@ -1,77 +1,50 @@
-import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
-import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
-import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
-import {
-  eventQueryFiltersParser,
-  eventQueryNamesFilter,
-} from '@/hooks/useEventQueryFilters';
-import { parseAsInteger } from 'nuqs';
+import { PageTabs, PageTabsLink } from '@/components/page-tabs';
+import { Padding } from '@/components/ui/padding';
+import { parseAsStringEnum } from 'nuqs';
 
-import { StickyBelowHeader } from '../layout-sticky-below-header';
-import { EventsPerDayChart } from './charts/events-per-day-chart';
-import EventConversionsListServer from './event-conversions-list';
-import EventListServer from './event-list';
+import Charts from './charts';
+import Conversions from './conversions';
+import Events from './events';
 
 interface PageProps {
   params: {
     projectId: string;
     organizationSlug: string;
   };
-  searchParams: {
-    events?: string;
-    cursor?: string;
-    f?: string;
-  };
+  searchParams: Record<string, string>;
 }
 
-const nuqsOptions = {
-  shallow: false,
-};
-
 export default function Page({
-  params: { projectId, organizationSlug },
+  params: { projectId },
   searchParams,
 }: PageProps) {
-  const cursor =
-    parseAsInteger.parseServerSide(searchParams.cursor ?? '') ?? undefined;
-  const filters =
-    eventQueryFiltersParser.parseServerSide(searchParams.f ?? '') ?? undefined;
-  const eventNames =
-    eventQueryNamesFilter.parseServerSide(searchParams.events) ?? undefined;
+  const tab = parseAsStringEnum(['events', 'conversions', 'charts'])
+    .withDefault('events')
+    .parseServerSide(searchParams.tab);
 
   return (
     <>
-      <PageLayout title="Events" organizationSlug={organizationSlug} />
-      <StickyBelowHeader className="flex justify-between p-4">
-        <OverviewFiltersDrawer
-          mode="events"
-          projectId={projectId}
-          nuqsOptions={nuqsOptions}
-          enableEventsFilter
-        />
-        <OverviewFiltersButtons
-          className="justify-end p-0"
-          nuqsOptions={nuqsOptions}
-        />
-      </StickyBelowHeader>
-      <div className="grid gap-4 p-4 md:grid-cols-2">
-        <div>
-          <EventListServer
-            projectId={projectId}
-            cursor={cursor}
-            filters={filters}
-            eventNames={eventNames}
-          />
+      <Padding>
+        <div className="mb-4">
+          <PageTabs>
+            <PageTabsLink href={`?tab=events`} isActive={tab === 'events'}>
+              Events
+            </PageTabsLink>
+            <PageTabsLink
+              href={`?tab=conversions`}
+              isActive={tab === 'conversions'}
+            >
+              Conversions
+            </PageTabsLink>
+            <PageTabsLink href={`?tab=charts`} isActive={tab === 'charts'}>
+              Charts
+            </PageTabsLink>
+          </PageTabs>
         </div>
-        <div className="flex flex-col gap-4">
-          <EventsPerDayChart
-            projectId={projectId}
-            events={eventNames}
-            filters={filters}
-          />
-          <EventConversionsListServer projectId={projectId} />
-        </div>
-      </div>
+        {tab === 'events' && <Events projectId={projectId} />}
+        {tab === 'conversions' && <Conversions projectId={projectId} />}
+        {tab === 'charts' && <Charts projectId={projectId} />}
+      </Padding>
     </>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-content.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-content.tsx
new file mode 100644
index 00000000..cf4ee0df
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-content.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { useSelectedLayoutSegments } from 'next/navigation';
+
+const NOT_MIGRATED_PAGES = ['reports'];
+
+export default function LayoutContent({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const segments = useSelectedLayoutSegments();
+
+  if (segments[0] && NOT_MIGRATED_PAGES.includes(segments[0])) {
+    return <div className="transition-all lg:pl-72">{children}</div>;
+  }
+
+  return <div className="transition-all max-lg:mt-12 lg:pl-72">{children}</div>;
+}
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx
index dfdbdf95..0e51bb9b 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx
@@ -1,22 +1,19 @@
 'use client';
 
 import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
 import { useAppParams } from '@/hooks/useAppParams';
+import { pushModal } from '@/modals';
 import { cn } from '@/utils/cn';
 import { useUser } from '@clerk/nextjs';
 import {
-  BookmarkIcon,
-  BuildingIcon,
-  CogIcon,
   GanttChartIcon,
   Globe2Icon,
-  KeySquareIcon,
   LayoutPanelTopIcon,
-  UserIcon,
-  UserSearchIcon,
+  PlusIcon,
+  ScanEyeIcon,
   UsersIcon,
   WallpaperIcon,
-  WarehouseIcon,
 } from 'lucide-react';
 import type { LucideProps } from 'lucide-react';
 import Link from 'next/link';
@@ -42,7 +39,7 @@ function LinkWithIcon({
   return (
     <Link
       className={cn(
-        'text-text hover:bg-def-200 flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all transition-colors',
+        'text-text flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200',
         active && 'bg-def-200',
         className
       )}
@@ -60,7 +57,6 @@ interface LayoutMenuProps {
 export default function LayoutMenu({ dashboards }: LayoutMenuProps) {
   const { user } = useUser();
 
-  const pathname = usePathname();
   const params = useAppParams();
   const hasProjectId =
     params.projectId &&
@@ -103,60 +99,40 @@ export default function LayoutMenu({ dashboards }: LayoutMenuProps) {
         label="Events"
         href={`/${params.organizationSlug}/${projectId}/events`}
       />
-      <LinkWithIcon
-        icon={UserSearchIcon}
-        label="Retention"
-        href={`/${params.organizationSlug}/${projectId}/retention`}
-      />
       <LinkWithIcon
         icon={UsersIcon}
         label="Profiles"
         href={`/${params.organizationSlug}/${projectId}/profiles`}
       />
       <LinkWithIcon
-        icon={CogIcon}
-        label="Settings"
-        href={`/${params.organizationSlug}/${projectId}/settings/organization`}
+        icon={ScanEyeIcon}
+        label="Retention"
+        href={`/${params.organizationSlug}/${projectId}/retention`}
       />
-      {pathname?.includes('/settings/') && (
-        <div className="flex flex-col gap-1 pl-7">
-          <LinkWithIcon
-            icon={BuildingIcon}
-            label="Organization"
-            href={`/${params.organizationSlug}/${projectId}/settings/organization`}
-          />
-          <LinkWithIcon
-            icon={WarehouseIcon}
-            label="Projects"
-            href={`/${params.organizationSlug}/${projectId}/settings/projects`}
-          />
-          <LinkWithIcon
-            icon={UserIcon}
-            label="Profile (yours)"
-            href={`/${params.organizationSlug}/${projectId}/settings/profile`}
-          />
-          <LinkWithIcon
-            icon={BookmarkIcon}
-            label="References"
-            href={`/${params.organizationSlug}/${projectId}/settings/references`}
-          />
+
+      <div className="mt-4">
+        <div className="mb-2 flex items-center justify-between">
+          <div className="text-muted-foreground">Your dashboards</div>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="text-muted-foreground"
+            onClick={() => pushModal('AddDashboard')}
+          >
+            <PlusIcon size={16} />
+          </Button>
         </div>
-      )}
-      {dashboards.length > 0 && (
-        <div className="mt-8">
-          <div className="mb-2 text-sm font-medium">Your dashboards</div>
-          <div className="flex flex-col gap-2">
-            {dashboards.map((item) => (
-              <LinkWithIcon
-                key={item.id}
-                icon={LayoutPanelTopIcon}
-                label={item.name}
-                href={`/${item.organizationSlug}/${item.projectId}/dashboards/${item.id}`}
-              />
-            ))}
-          </div>
+        <div className="flex flex-col gap-2">
+          {dashboards.map((item) => (
+            <LinkWithIcon
+              key={item.id}
+              icon={LayoutPanelTopIcon}
+              label={item.name}
+              href={`/${item.organizationSlug}/${item.projectId}/dashboards/${item.id}`}
+            />
+          ))}
         </div>
-      )}
+      </div>
     </>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-project-selector.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-project-selector.tsx
index 41dbaf2f..b16559b9 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-project-selector.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-project-selector.tsx
@@ -1,45 +1,144 @@
 'use client';
 
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { useAppParams } from '@/hooks/useAppParams';
+import { pushModal } from '@/modals';
+import { cn } from '@/utils/cn';
+import {
+  Building2Icon,
+  CheckIcon,
+  ChevronsUpDown,
+  ChevronsUpDownIcon,
+  PlusIcon,
+} from 'lucide-react';
 import { usePathname, useRouter } from 'next/navigation';
 
-import type { getProjectsByOrganizationSlug } from '@openpanel/db';
+import type {
+  getCurrentOrganizations,
+  getProjectsByOrganizationSlug,
+} from '@openpanel/db';
 
 interface LayoutProjectSelectorProps {
   projects: Awaited<ReturnType<typeof getProjectsByOrganizationSlug>>;
+  organizations?: Awaited<ReturnType<typeof getCurrentOrganizations>>;
+  align?: 'start' | 'end';
 }
 export default function LayoutProjectSelector({
   projects,
+  organizations,
+  align = 'start',
 }: LayoutProjectSelectorProps) {
   const router = useRouter();
   const { organizationSlug, projectId } = useAppParams();
   const pathname = usePathname() || '';
+  const [open, setOpen] = useState(false);
+
+  const changeProject = (newProjectId: string) => {
+    if (organizationSlug && projectId) {
+      const split = pathname
+        .replace(
+          `/${organizationSlug}/${projectId}`,
+          `/${organizationSlug}/${newProjectId}`
+        )
+        .split('/');
+      // slicing here will remove everything after /{orgId}/{projectId}/dashboards [slice here] /xxx/xxx/xxx
+      router.push(split.slice(0, 4).join('/'));
+    } else {
+      router.push(`/${organizationSlug}/${newProjectId}`);
+    }
+  };
+
+  const changeOrganization = (newOrganizationId: string) => {
+    router.push(`/${newOrganizationId}`);
+  };
 
   return (
-    <div>
-      <Combobox
-        portal
-        align="end"
-        className="w-auto min-w-0 max-sm:max-w-[100px]"
-        placeholder={'Select project'}
-        onChange={(value) => {
-          if (organizationSlug && projectId) {
-            const split = pathname.replace(projectId, value).split('/');
-            // slicing here will remove everything after /{orgId}/{projectId}/dashboards [slice here] /xxx/xxx/xxx
-            router.push(split.slice(0, 4).join('/'));
-          } else {
-            router.push(`/${organizationSlug}/${value}`);
-          }
-        }}
-        value={projectId}
-        items={
-          projects.map((item) => ({
-            label: item.name,
-            value: item.id,
-          })) ?? []
-        }
-      />
-    </div>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size={'sm'}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="flex min-w-0 flex-1 items-center justify-start"
+        >
+          <Building2Icon size={16} className="shrink-0" />
+          <span className="mx-2 truncate">
+            {projectId
+              ? projects.find((p) => p.id === projectId)?.name
+              : 'Select project'}
+          </span>
+          <ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} className="w-[200px]">
+        <DropdownMenuLabel>Projects</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          {projects.map((project) => (
+            <DropdownMenuItem
+              key={project.id}
+              onClick={() => changeProject(project.id)}
+            >
+              {project.name}
+              {project.id === projectId && (
+                <DropdownMenuShortcut>
+                  <CheckIcon size={16} />
+                </DropdownMenuShortcut>
+              )}
+            </DropdownMenuItem>
+          ))}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            className="text-emerald-600"
+            onClick={() => pushModal('AddProject')}
+          >
+            Create new project
+            <DropdownMenuShortcut>
+              <PlusIcon size={16} />
+            </DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        {!!organizations && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Organizations</DropdownMenuLabel>
+            <DropdownMenuGroup>
+              {organizations.map((organization) => (
+                <DropdownMenuItem
+                  key={organization.id}
+                  onClick={() => changeOrganization(organization.id)}
+                >
+                  {organization.name}
+                  {organization.id === organizationSlug && (
+                    <DropdownMenuShortcut>
+                      <CheckIcon size={16} />
+                    </DropdownMenuShortcut>
+                  )}
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem disabled>
+                New organization
+                <DropdownMenuShortcut>
+                  <PlusIcon size={16} />
+                </DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx
index 1ce9fb75..b2b1b80a 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx
@@ -1,30 +1,34 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Logo } from '@/components/logo';
-import { buttonVariants } from '@/components/ui/button';
+import { LogoSquare } from '@/components/logo';
+import SettingsToggle from '@/components/settings-toggle';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/utils/cn';
 import { Rotate as Hamburger } from 'hamburger-react';
-import { PlusIcon } from 'lucide-react';
-import Link from 'next/link';
+import { MenuIcon, XIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 
-import type { IServiceDashboards, IServiceOrganization } from '@openpanel/db';
+import type {
+  getProjectsByOrganizationSlug,
+  IServiceDashboards,
+  IServiceOrganization,
+} from '@openpanel/db';
 
 import LayoutMenu from './layout-menu';
-import LayoutOrganizationSelector from './layout-organization-selector';
+import LayoutProjectSelector from './layout-project-selector';
 
 interface LayoutSidebarProps {
   organizations: IServiceOrganization[];
   dashboards: IServiceDashboards;
   organizationSlug: string;
   projectId: string;
+  projects: Awaited<ReturnType<typeof getProjectsByOrganizationSlug>>;
 }
 export function LayoutSidebar({
   organizations,
   dashboards,
-  organizationSlug,
-  projectId,
+  projects,
 }: LayoutSidebarProps) {
   const [active, setActive] = useState(false);
   const pathname = usePathname();
@@ -52,30 +56,28 @@ export function LayoutSidebar({
         )}
       >
         <div className="absolute -right-12 flex h-16 items-center lg:hidden">
-          <Hamburger toggled={active} onToggle={setActive} size={20} />
+          <Button
+            size="icon"
+            onClick={() => setActive((p) => !p)}
+            variant={'outline'}
+          >
+            {active ? <XIcon size={16} /> : <MenuIcon size={16} />}
+          </Button>
         </div>
-        <div className="flex h-16 shrink-0 items-center border-b border-border px-4">
-          <Link href="/">
-            <Logo />
-          </Link>
+        <div className="flex h-16 shrink-0 items-center gap-4 border-b border-border px-4">
+          <LogoSquare className="max-h-8" />
+          <LayoutProjectSelector
+            align="start"
+            projects={projects}
+            organizations={organizations}
+          />
+          <SettingsToggle />
         </div>
         <div className="flex flex-grow flex-col gap-2 overflow-auto p-4">
           <LayoutMenu dashboards={dashboards} />
-          {/* Placeholder for LayoutOrganizationSelector */}
-          <div className="block h-32 shrink-0"></div>
         </div>
         <div className="fixed bottom-0 left-0 right-0">
           <div className="h-8 w-full bg-gradient-to-t from-card to-card/0"></div>
-          <div className="flex flex-col gap-2 bg-card p-4 pt-0">
-            <Link
-              className={cn('flex gap-2', buttonVariants())}
-              href={`/${organizationSlug}/${projectId}/reports`}
-            >
-              <PlusIcon size={16} />
-              Create a report
-            </Link>
-            <LayoutOrganizationSelector organizations={organizations} />
-          </div>
         </div>
       </div>
     </>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header.tsx
index 8ce44789..41875e12 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header.tsx
@@ -12,7 +12,7 @@ export function StickyBelowHeader({
   return (
     <div
       className={cn(
-        'top-0 z-20 border-b border-border bg-card md:sticky [[id=dashboard]_&]:top-16 [[id=dashboard]_&]:rounded-none',
+        'top-0 z-20 border-b border-border bg-card md:sticky',
         className
       )}
     >
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout.tsx
index 4be142c7..157f523b 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout.tsx
@@ -6,6 +6,7 @@ import {
   getDashboardsByProjectId,
 } from '@openpanel/db';
 
+import LayoutContent from './layout-content';
 import { LayoutSidebar } from './layout-sidebar';
 import SideEffects from './side-effects';
 
@@ -46,9 +47,15 @@ export default async function AppLayout({
   return (
     <div id="dashboard">
       <LayoutSidebar
-        {...{ organizationSlug, projectId, organizations, dashboards }}
+        {...{
+          organizationSlug,
+          projectId,
+          organizations,
+          projects,
+          dashboards,
+        }}
       />
-      <div className="transition-all lg:pl-72">{children}</div>
+      <LayoutContent>{children}</LayoutContent>
       <SideEffects />
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page-layout.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page-layout.tsx
index 15df48a2..7589b4ef 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page-layout.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page-layout.tsx
@@ -1,39 +1,15 @@
-import DarkModeToggle from '@/components/dark-mode-toggle';
-import withSuspense from '@/hocs/with-suspense';
-
-import { getCurrentProjects } from '@openpanel/db';
-
-import LayoutProjectSelector from './layout-project-selector';
-
 interface PageLayoutProps {
   title: React.ReactNode;
-  organizationSlug: string;
 }
 
-async function PageLayout({ title, organizationSlug }: PageLayoutProps) {
-  const projects = await getCurrentProjects(organizationSlug);
-
+function PageLayout({ title }: PageLayoutProps) {
   return (
     <>
-      <div className="sticky top-0 z-20 flex h-16 flex-shrink-0 items-center justify-between border-b border-border bg-card px-4 pl-12 lg:pl-4">
+      <div className="sticky top-0 z-20 flex h-16 flex-shrink-0 items-center justify-between border-b border-border bg-card px-4 pl-14 lg:pl-4">
         <div className="text-xl font-medium">{title}</div>
-        <div className="flex gap-2">
-          <div>
-            <DarkModeToggle className="hidden sm:flex" />
-          </div>
-          {projects.length > 0 && <LayoutProjectSelector projects={projects} />}
-        </div>
       </div>
     </>
   );
 }
 
-const Loading = ({ title }: PageLayoutProps) => (
-  <>
-    <div className="sticky top-0 z-20 flex h-16 flex-shrink-0 items-center justify-between border-b border-border bg-card px-4 pl-12 lg:pl-4">
-      <div className="text-xl font-medium">{title}</div>
-    </div>
-  </>
-);
-
-export default withSuspense(PageLayout, Loading);
+export default PageLayout;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx
index 833cce44..ad1f6a1f 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx
@@ -1,4 +1,3 @@
-import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
 import ServerLiveCounter from '@/components/overview/live-counter';
@@ -10,7 +9,6 @@ import OverviewTopPages from '@/components/overview/overview-top-pages';
 import OverviewTopSources from '@/components/overview/overview-top-sources';
 
 import OverviewMetrics from '../../../../components/overview/overview-metrics';
-import { StickyBelowHeader } from './layout-sticky-below-header';
 import { OverviewReportRange } from './overview-sticky-header';
 
 interface PageProps {
@@ -20,14 +18,11 @@ interface PageProps {
   };
 }
 
-export default function Page({
-  params: { organizationSlug, projectId },
-}: PageProps) {
+export default function Page({ params: { projectId } }: PageProps) {
   return (
     <>
-      <PageLayout title="Overview" organizationSlug={organizationSlug} />
-      <StickyBelowHeader>
-        <div className="flex justify-between gap-2 p-4">
+      <div className="col gap-2 p-4">
+        <div className="flex justify-between gap-2">
           <div className="flex gap-2">
             <OverviewReportRange />
             <OverviewFiltersDrawer projectId={projectId} mode="events" />
@@ -38,8 +33,8 @@ export default function Page({
           </div>
         </div>
         <OverviewFiltersButtons />
-      </StickyBelowHeader>
-      <div className="grid grid-cols-6 gap-4 p-4">
+      </div>
+      <div className="grid grid-cols-6 gap-4 p-4 pt-0">
         <OverviewMetrics projectId={projectId} />
         <OverviewTopSources projectId={projectId} />
         <OverviewTopPages projectId={projectId} />
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/most-events/most-events.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/most-events/most-events.tsx
index ffb6ebff..eb9cd2e9 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/most-events/most-events.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/most-events/most-events.tsx
@@ -18,12 +18,12 @@ const MostEvents = ({ data }: Props) => {
         {data.slice(0, 5).map((item) => (
           <div key={item.name} className="relative px-3 py-2">
             <div
-              className="bg-def-200 absolute bottom-0 left-0 top-0 rounded"
+              className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
               style={{
                 width: `${(item.count / max) * 100}%`,
               }}
             ></div>
-            <div className="relative flex justify-between text-sm">
+            <div className="relative flex justify-between ">
               <div>{item.name}</div>
               <div>{item.count}</div>
             </div>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/page.tsx
index a58400e1..9484bf65 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/page.tsx
@@ -1,25 +1,17 @@
-import { start } from 'repl';
-import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 import ClickToCopy from '@/components/click-to-copy';
 import { ListPropertiesIcon } from '@/components/events/list-properties-icon';
 import { ProfileAvatar } from '@/components/profiles/profile-avatar';
-import {
-  eventQueryFiltersParser,
-  eventQueryNamesFilter,
-} from '@/hooks/useEventQueryFilters';
+import { Padding } from '@/components/ui/padding';
 import { getProfileName } from '@/utils/getters';
 import { notFound } from 'next/navigation';
-import { parseAsInteger } from 'nuqs';
 
-import type { GetEventListOptions } from '@openpanel/db';
-import { getProfileById } from '@openpanel/db';
+import { getProfileByIdCached } from '@openpanel/db';
 
-import EventListServer from '../../events/event-list';
-import { StickyBelowHeader } from '../../layout-sticky-below-header';
 import MostEventsServer from './most-events';
 import PopularRoutesServer from './popular-routes';
 import ProfileActivityServer from './profile-activity';
 import ProfileCharts from './profile-charts';
+import Events from './profile-events';
 import ProfileMetrics from './profile-metrics';
 
 interface PageProps {
@@ -38,66 +30,50 @@ interface PageProps {
 }
 
 export default async function Page({
-  params: { projectId, profileId, organizationSlug },
-  searchParams,
+  params: { projectId, profileId },
 }: PageProps) {
-  const eventListOptions: GetEventListOptions = {
-    projectId,
-    profileId,
-    take: 50,
-    cursor:
-      parseAsInteger.parseServerSide(searchParams.cursor ?? '') ?? undefined,
-    events: eventQueryNamesFilter.parseServerSide(searchParams.events ?? ''),
-    filters:
-      eventQueryFiltersParser.parseServerSide(searchParams.f ?? '') ??
-      undefined,
-  };
-  const profile = await getProfileById(profileId, projectId);
+  const profile = await getProfileByIdCached(profileId, projectId);
 
   if (!profile) {
     return notFound();
   }
 
   return (
-    <>
-      <PageLayout organizationSlug={organizationSlug} title={<div />} />
-      <StickyBelowHeader className="!relative !top-auto !z-0 flex flex-col gap-8 p-4 md:flex-row md:items-center md:p-8">
-        <div className="flex flex-1 gap-4">
-          <ProfileAvatar {...profile} size={'lg'} />
-          <div className="min-w-0">
-            <ClickToCopy value={profile.id}>
-              <h1 className="max-w-full overflow-hidden text-ellipsis break-words text-lg font-semibold md:max-w-sm md:whitespace-nowrap md:text-2xl">
-                {getProfileName(profile)}
-              </h1>
-            </ClickToCopy>
-            <div className="mt-1 flex items-center gap-4">
-              <ListPropertiesIcon {...profile.properties} />
-            </div>
-          </div>
+    <Padding>
+      <div className="row mb-4 items-center gap-4">
+        <ProfileAvatar {...profile} />
+        <div className="min-w-0">
+          <ClickToCopy value={profile.id}>
+            <h1 className="max-w-full truncate text-3xl font-semibold">
+              {getProfileName(profile)}
+            </h1>
+          </ClickToCopy>
         </div>
-        <ProfileMetrics profileId={profileId} projectId={projectId} />
-      </StickyBelowHeader>
-      <div className="p-4">
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-6">
-          <div className="col-span-2">
+      </div>
+      <div>
+        <div className="grid grid-cols-6 gap-4">
+          <div className="col-span-6">
+            <ProfileMetrics projectId={projectId} profile={profile} />
+          </div>
+          <div className="col-span-6">
             <ProfileActivityServer
               profileId={profileId}
               projectId={projectId}
             />
           </div>
-          <div className="col-span-2">
+          <div className="col-span-6 md:col-span-3">
             <MostEventsServer profileId={profileId} projectId={projectId} />
           </div>
-          <div className="col-span-2">
+          <div className="col-span-6 md:col-span-3">
             <PopularRoutesServer profileId={profileId} projectId={projectId} />
           </div>
 
           <ProfileCharts profileId={profileId} projectId={projectId} />
         </div>
         <div className="mt-8">
-          <EventListServer {...eventListOptions} />
+          <Events profileId={profileId} projectId={projectId} />
         </div>
       </div>
-    </>
+    </Padding>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/popular-routes/popular-routes.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/popular-routes/popular-routes.tsx
index b31fd8f7..687df3b5 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/popular-routes/popular-routes.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/popular-routes/popular-routes.tsx
@@ -18,12 +18,12 @@ const PopularRoutes = ({ data }: Props) => {
         {data.slice(0, 5).map((item) => (
           <div key={item.path} className="relative px-3 py-2">
             <div
-              className="bg-def-200 absolute bottom-0 left-0 top-0 rounded"
+              className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
               style={{
                 width: `${(item.count / max) * 100}%`,
               }}
             ></div>
-            <div className="relative flex justify-between text-sm">
+            <div className="relative flex justify-between ">
               <div>{item.path}</div>
               <div>{item.count}</div>
             </div>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-activity/profile-activity.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-activity/profile-activity.tsx
index e14e7b36..783fd31d 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-activity/profile-activity.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-activity/profile-activity.tsx
@@ -15,6 +15,7 @@ import {
   endOfMonth,
   format,
   formatISO,
+  isSameMonth,
   startOfMonth,
   subMonths,
 } from 'date-fns';
@@ -43,19 +44,72 @@ const ProfileActivity = ({ data }: Props) => {
           <Button
             variant="outline"
             size="icon"
+            disabled={isSameMonth(startDate, new Date())}
             onClick={() => setStartDate(addMonths(startDate, 1))}
           >
             <ChevronRightIcon size={14} />
           </Button>
         </div>
       </WidgetHead>
-      <WidgetBody className="p-0">
-        <div className="grid grid-cols-2">
+      <WidgetBody>
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
           <div>
-            <div className="p-1 text-xs">
+            <div className="mb-2 text-sm">
+              {format(subMonths(startDate, 3), 'MMMM yyyy')}
+            </div>
+            <div className="-m-1 grid grid-cols-7 gap-1 p-1">
+              {eachDayOfInterval({
+                start: startOfMonth(subMonths(startDate, 3)),
+                end: endOfMonth(subMonths(startDate, 3)),
+              }).map((date) => {
+                const hit = data.find((item) =>
+                  item.date.includes(
+                    formatISO(date, { representation: 'date' })
+                  )
+                );
+                return (
+                  <div
+                    key={date.toISOString()}
+                    className={cn(
+                      'aspect-square w-full rounded',
+                      hit ? 'bg-highlight' : 'bg-def-200'
+                    )}
+                  ></div>
+                );
+              })}
+            </div>
+          </div>
+          <div>
+            <div className="mb-2 text-sm">
+              {format(subMonths(startDate, 2), 'MMMM yyyy')}
+            </div>
+            <div className="-m-1 grid grid-cols-7 gap-1 p-1">
+              {eachDayOfInterval({
+                start: startOfMonth(subMonths(startDate, 2)),
+                end: endOfMonth(subMonths(startDate, 2)),
+              }).map((date) => {
+                const hit = data.find((item) =>
+                  item.date.includes(
+                    formatISO(date, { representation: 'date' })
+                  )
+                );
+                return (
+                  <div
+                    key={date.toISOString()}
+                    className={cn(
+                      'aspect-square w-full rounded',
+                      hit ? 'bg-highlight' : 'bg-def-200'
+                    )}
+                  ></div>
+                );
+              })}
+            </div>
+          </div>
+          <div>
+            <div className="mb-2 text-sm">
               {format(subMonths(startDate, 1), 'MMMM yyyy')}
             </div>
-            <div className="grid grid-cols-7 gap-1 p-1">
+            <div className="-m-1 grid grid-cols-7 gap-1 p-1">
               {eachDayOfInterval({
                 start: startOfMonth(subMonths(startDate, 1)),
                 end: endOfMonth(subMonths(startDate, 1)),
@@ -78,8 +132,8 @@ const ProfileActivity = ({ data }: Props) => {
             </div>
           </div>
           <div>
-            <div className="p-1 text-xs">{format(startDate, 'MMMM yyyy')}</div>
-            <div className="grid grid-cols-7 gap-1 p-1">
+            <div className="mb-2 text-sm">{format(startDate, 'MMMM yyyy')}</div>
+            <div className="-m-1 grid grid-cols-7 gap-1 p-1">
               {eachDayOfInterval({
                 start: startDate,
                 end: endDate,
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-charts.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-charts.tsx
index 49ead233..6d01f60a 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-charts.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-charts.tsx
@@ -80,19 +80,19 @@ const ProfileCharts = ({ profileId, projectId }: Props) => {
 
   return (
     <>
-      <Widget className="col-span-3 w-full">
+      <Widget className="col-span-6 md:col-span-3">
         <WidgetHead>
           <span className="title">Page views</span>
         </WidgetHead>
-        <WidgetBody className="flex gap-2">
+        <WidgetBody>
           <ChartRoot {...pageViewsChart} />
         </WidgetBody>
       </Widget>
-      <Widget className="col-span-3 w-full">
+      <Widget className="col-span-6 md:col-span-3">
         <WidgetHead>
           <span className="title">Events per day</span>
         </WidgetHead>
-        <WidgetBody className="flex gap-2">
+        <WidgetBody>
           <ChartRoot {...eventsChart} />
         </WidgetBody>
       </Widget>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-events.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-events.tsx
new file mode 100644
index 00000000..e65e78e3
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-events.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { TableButtons } from '@/components/data-table';
+import { EventsTable } from '@/components/events/table';
+import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
+import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
+import {
+  useEventQueryFilters,
+  useEventQueryNamesFilter,
+} from '@/hooks/useEventQueryFilters';
+import { api } from '@/trpc/client';
+import { Loader2Icon } from 'lucide-react';
+import { parseAsInteger, useQueryState } from 'nuqs';
+
+import { GetEventListOptions } from '@openpanel/db';
+
+type Props = {
+  projectId: string;
+  profileId: string;
+};
+
+const Events = ({ projectId, profileId }: Props) => {
+  const [filters] = useEventQueryFilters();
+  const [eventNames] = useEventQueryNamesFilter();
+  const [cursor, setCursor] = useQueryState(
+    'cursor',
+    parseAsInteger.withDefault(0)
+  );
+  const query = api.event.events.useQuery(
+    {
+      cursor,
+      projectId,
+      take: 50,
+      events: eventNames,
+      filters,
+      profileId,
+    },
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  return (
+    <div>
+      <TableButtons>
+        <OverviewFiltersDrawer
+          mode="events"
+          projectId={projectId}
+          enableEventsFilter
+        />
+        <OverviewFiltersButtons className="justify-end p-0" />
+        {query.isRefetching && (
+          <div className="center-center size-8 rounded border bg-background">
+            <Loader2Icon
+              size={12}
+              className="size-4 shrink-0 animate-spin text-black text-highlight"
+            />
+          </div>
+        )}
+      </TableButtons>
+      <EventsTable query={query} cursor={cursor} setCursor={setCursor} />
+    </div>
+  );
+};
+
+export default Events;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-metrics/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-metrics/index.tsx
index 86beb12a..36900b68 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-metrics/index.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-metrics/index.tsx
@@ -1,17 +1,18 @@
 import withSuspense from '@/hocs/with-suspense';
 
+import type { IServiceProfile } from '@openpanel/db';
 import { getProfileMetrics } from '@openpanel/db';
 
 import ProfileMetrics from './profile-metrics';
 
 type Props = {
   projectId: string;
-  profileId: string;
+  profile: IServiceProfile;
 };
 
-const ProfileMetricsServer = async ({ projectId, profileId }: Props) => {
-  const data = await getProfileMetrics(profileId, projectId);
-  return <ProfileMetrics data={data} />;
+const ProfileMetricsServer = async ({ projectId, profile }: Props) => {
+  const data = await getProfileMetrics(profile.id, projectId);
+  return <ProfileMetrics data={data} profile={profile} />;
 };
 
 export default withSuspense(ProfileMetricsServer, () => null);
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-metrics/profile-metrics.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-metrics/profile-metrics.tsx
index 79d0f80b..da7e3659 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-metrics/profile-metrics.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-metrics/profile-metrics.tsx
@@ -1,66 +1,115 @@
 'use client';
 
+import { ListPropertiesIcon } from '@/components/events/list-properties-icon';
 import { useNumber } from '@/hooks/useNumerFormatter';
-import { utc } from '@/utils/date';
+import { cn } from '@/utils/cn';
+import { formatDateTime, utc } from '@/utils/date';
 import { formatDistanceToNow } from 'date-fns';
+import { parseAsStringEnum, useQueryState } from 'nuqs';
 
-import type { IProfileMetrics } from '@openpanel/db';
+import type { IProfileMetrics, IServiceProfile } from '@openpanel/db';
 
 type Props = {
   data: IProfileMetrics;
+  profile: IServiceProfile;
 };
 
-const ProfileMetrics = ({ data }: Props) => {
+function Card({ title, value }: { title: string; value: string }) {
+  return (
+    <div className="col gap-2 p-4 ring-[0.5px] ring-border">
+      <div className="text-muted-foreground">{title}</div>
+      <div className="font-mono truncate text-2xl font-bold">{value}</div>
+    </div>
+  );
+}
+
+function Info({ title, value }: { title: string; value: string }) {
+  return (
+    <div className="col gap-2">
+      <div className="capitalize text-muted-foreground">{title}</div>
+      <div className="font-mono truncate">{value || '-'}</div>
+    </div>
+  );
+}
+
+const ProfileMetrics = ({ data, profile }: Props) => {
+  const [tab, setTab] = useQueryState(
+    'tab',
+    parseAsStringEnum(['profile', 'properties']).withDefault('profile')
+  );
   const number = useNumber();
   return (
-    <div className="flex flex-wrap gap-6 whitespace-nowrap md:justify-end md:text-right">
-      <div>
-        <div className="text-xs font-medium text-muted-foreground">
-          First seen
-        </div>
-        <div className="text-lg font-semibold">
-          {formatDistanceToNow(utc(data.firstSeen))}
-        </div>
-      </div>
-      <div>
-        <div className="text-xs font-medium text-muted-foreground">
-          Last seen
-        </div>
-        <div className="text-lg font-semibold">
-          {formatDistanceToNow(utc(data.lastSeen))}
-        </div>
-      </div>
-      <div>
-        <div className="text-xs font-medium text-muted-foreground">
-          Sessions
-        </div>
-        <div className="text-lg font-semibold">
-          {number.format(data.sessions)}
-        </div>
-      </div>
-      <div>
-        <div className="text-xs font-medium text-muted-foreground">
-          Avg. Session
-        </div>
-        <div className="text-lg font-semibold">
-          {number.formatWithUnit(data.durationAvg / 1000, 'min')}
-        </div>
-      </div>
-      <div>
-        <div className="text-xs font-medium text-muted-foreground">
-          P90. Session
-        </div>
-        <div className="text-lg font-semibold">
-          {number.formatWithUnit(data.durationP90 / 1000, 'min')}
-        </div>
-      </div>
-      <div>
-        <div className="text-xs font-medium text-muted-foreground">
-          Page views
-        </div>
-        <div className="text-lg font-semibold">
-          {number.format(data.screenViews)}
+    <div className="@container">
+      <div className="grid grid-cols-2 overflow-hidden whitespace-nowrap  rounded-md border bg-background @xl:grid-cols-3 @4xl:grid-cols-6">
+        <div className="col-span-2 @xl:col-span-3 @4xl:col-span-6">
+          <div className="row border-b">
+            <button
+              onClick={() => setTab('profile')}
+              className={cn(
+                'p-4',
+                'opacity-50',
+                tab === 'profile' &&
+                  'border-b border-foreground text-foreground opacity-100'
+              )}
+            >
+              Profile
+            </button>
+            <div className="h-full w-px bg-border" />
+            <button
+              onClick={() => setTab('properties')}
+              className={cn(
+                'p-4',
+                'opacity-50',
+                tab === 'properties' &&
+                  'border-b border-foreground text-foreground opacity-100'
+              )}
+            >
+              Properties
+            </button>
+          </div>
+          <div className="grid grid-cols-2 gap-4 p-4">
+            {tab === 'profile' && (
+              <>
+                <Info title="ID" value={profile.id} />
+                <Info title="First name" value={profile.firstName} />
+                <Info title="Last name" value={profile.lastName} />
+                <Info title="Email" value={profile.email} />
+                <Info
+                  title="Updated"
+                  value={formatDateTime(new Date(profile.createdAt))}
+                />
+                <ListPropertiesIcon {...profile.properties} />
+              </>
+            )}
+            {tab === 'properties' && (
+              <>
+                {Object.entries(profile.properties)
+                  .filter(([key, value]) => value !== undefined)
+                  .map(([key, value]) => (
+                    <Info key={key} title={key} value={value as string} />
+                  ))}
+              </>
+            )}
+          </div>
         </div>
+        <Card
+          title="First seen"
+          value={formatDistanceToNow(utc(data.firstSeen))}
+        />
+        <Card
+          title="Last seen"
+          value={formatDistanceToNow(utc(data.lastSeen))}
+        />
+        <Card title="Sessions" value={number.format(data.sessions)} />
+        <Card
+          title="Avg. Session"
+          value={number.formatWithUnit(data.durationAvg / 1000, 'min')}
+        />
+        <Card
+          title="P90. Session"
+          value={number.formatWithUnit(data.durationP90 / 1000, 'min')}
+        />
+        <Card title="Page views" value={number.format(data.screenViews)} />
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/page.tsx
index 73f726f9..93a3a3f7 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/page.tsx
@@ -1,50 +1,45 @@
-import { Suspense } from 'react';
-import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
-import { eventQueryFiltersParser } from '@/hooks/useEventQueryFilters';
-import { parseAsInteger } from 'nuqs';
+import { PageTabs, PageTabsLink } from '@/components/page-tabs';
+import { Padding } from '@/components/ui/padding';
+import { parseAsStringEnum } from 'nuqs';
 
-import LastActiveUsersServer from '../retention/last-active-users';
-import ProfileListServer from './profile-list';
-import ProfileTopServer from './profile-top';
+import PowerUsers from './power-users';
+import Profiles from './profiles';
 
 interface PageProps {
   params: {
-    organizationSlug: string;
     projectId: string;
+    organizationSlug: string;
   };
-  searchParams: {
-    f?: string;
-    cursor?: string;
-  };
+  searchParams: Record<string, string>;
 }
 
-const nuqsOptions = {
-  shallow: false,
-};
-
 export default function Page({
-  params: { organizationSlug, projectId },
-  searchParams: { cursor, f },
+  params: { projectId },
+  searchParams,
 }: PageProps) {
+  const tab = parseAsStringEnum(['profiles', 'power-users'])
+    .withDefault('profiles')
+    .parseServerSide(searchParams.tab);
+
   return (
     <>
-      <PageLayout title="Profiles" organizationSlug={organizationSlug} />
-      <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-2">
-        <ProfileListServer
-          projectId={projectId}
-          cursor={parseAsInteger.parseServerSide(cursor ?? '') ?? undefined}
-          filters={
-            eventQueryFiltersParser.parseServerSide(f ?? '') ?? undefined
-          }
-        />
-        <div className="flex flex-col gap-4">
-          <LastActiveUsersServer projectId={projectId} />
-          <ProfileTopServer
-            projectId={projectId}
-            organizationSlug={organizationSlug}
-          />
+      <Padding>
+        <div className="mb-4">
+          <PageTabs>
+            <PageTabsLink href={`?tab=profiles`} isActive={tab === 'profiles'}>
+              Profiles
+            </PageTabsLink>
+            <PageTabsLink
+              href={`?tab=power-users`}
+              isActive={tab === 'power-users'}
+            >
+              Power users
+            </PageTabsLink>
+          </PageTabs>
         </div>
-      </div>
+        {tab === 'profiles' && <Profiles projectId={projectId} />}
+        {tab === 'power-users' && <PowerUsers projectId={projectId} />}
+      </Padding>
     </>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/power-users.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/power-users.tsx
new file mode 100644
index 00000000..de026da1
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/power-users.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { ProfilesTable } from '@/components/profiles/table';
+import { api } from '@/trpc/client';
+import { parseAsInteger, useQueryState } from 'nuqs';
+
+type Props = {
+  projectId: string;
+  profileId?: string;
+};
+
+const Events = ({ projectId }: Props) => {
+  const [cursor, setCursor] = useQueryState(
+    'cursor',
+    parseAsInteger.withDefault(0)
+  );
+  const query = api.profile.powerUsers.useQuery(
+    {
+      cursor,
+      projectId,
+      take: 50,
+      // filters,
+    },
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  return (
+    <div>
+      <ProfilesTable
+        query={query}
+        cursor={cursor}
+        setCursor={setCursor}
+        type="power-users"
+      />
+    </div>
+  );
+};
+
+export default Events;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-last-seen/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-last-seen/index.tsx
index 6c5bb1c5..9fe959a2 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-last-seen/index.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-last-seen/index.tsx
@@ -61,7 +61,7 @@ export default async function ProfileLastSeenServer({ projectId }: Props) {
         <div className="flex w-full flex-wrap items-start justify-start">
           {res.map(renderItem)}
         </div>
-        <div className="text-center text-xs text-muted-foreground">DAYS</div>
+        <div className="text-center text-sm text-muted-foreground">DAYS</div>
       </WidgetBody>
     </Widget>
   );
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-list/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-list/index.tsx
deleted file mode 100644
index b3548c1c..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-list/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import withLoadingWidget from '@/hocs/with-loading-widget';
-
-import { getProfileList, getProfileListCount } from '@openpanel/db';
-import type { IChartEventFilter } from '@openpanel/validation';
-
-import { ProfileList } from './profile-list';
-
-interface Props {
-  projectId: string;
-  cursor?: number;
-  filters?: IChartEventFilter[];
-}
-
-const limit = 40;
-
-async function ProfileListServer({ projectId, cursor, filters }: Props) {
-  const [profiles, count] = await Promise.all([
-    getProfileList({
-      projectId,
-      take: limit,
-      cursor,
-      filters,
-    }),
-    getProfileListCount({
-      projectId,
-      filters,
-    }),
-  ]);
-  return <ProfileList data={profiles} count={count} limit={limit} />;
-}
-
-export default withLoadingWidget(ProfileListServer);
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-list/profile-list.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-list/profile-list.tsx
deleted file mode 100644
index 6cc6f2b8..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-list/profile-list.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client';
-
-import { ListPropertiesIcon } from '@/components/events/list-properties-icon';
-import { FullPageEmptyState } from '@/components/full-page-empty-state';
-import { Pagination } from '@/components/pagination';
-import { ProfileAvatar } from '@/components/profiles/profile-avatar';
-import { Button } from '@/components/ui/button';
-import { Tooltiper } from '@/components/ui/tooltip';
-import { Widget, WidgetHead } from '@/components/widget';
-import { WidgetTable } from '@/components/widget-table';
-import { useAppParams } from '@/hooks/useAppParams';
-import { useCursor } from '@/hooks/useCursor';
-import { getProfileName } from '@/utils/getters';
-import { UsersIcon } from 'lucide-react';
-import Link from 'next/link';
-
-import type { IServiceProfile } from '@openpanel/db';
-
-interface ProfileListProps {
-  data: IServiceProfile[];
-  count: number;
-  limit?: number;
-}
-export function ProfileList({ data, count, limit = 50 }: ProfileListProps) {
-  const { organizationSlug, projectId } = useAppParams();
-  const { cursor, setCursor, loading } = useCursor();
-  return (
-    <Widget>
-      <WidgetHead className="flex items-center justify-between">
-        <div className="title">Profiles</div>
-        <Pagination
-          size="sm"
-          cursor={cursor}
-          setCursor={setCursor}
-          loading={loading}
-          count={count}
-          take={limit}
-        />
-      </WidgetHead>
-      {data.length ? (
-        <>
-          <WidgetTable
-            data={data}
-            keyExtractor={(item) => item.id}
-            columns={[
-              {
-                name: 'Name',
-                render(profile) {
-                  return (
-                    <Link
-                      href={`/${organizationSlug}/${projectId}/profiles/${profile.id}`}
-                      className="flex items-center gap-2 font-medium"
-                      title={getProfileName(profile, false)}
-                    >
-                      <ProfileAvatar size="sm" {...profile} />
-                      {getProfileName(profile)}
-                    </Link>
-                  );
-                },
-              },
-              {
-                name: '',
-                render(profile) {
-                  return <ListPropertiesIcon {...profile.properties} />;
-                },
-              },
-              {
-                name: 'Last seen',
-                render(profile) {
-                  return (
-                    <Tooltiper
-                      asChild
-                      content={profile.createdAt.toLocaleString()}
-                    >
-                      <div className="text-sm text-muted-foreground">
-                        {profile.createdAt.toLocaleTimeString()}
-                      </div>
-                    </Tooltiper>
-                  );
-                },
-              },
-            ]}
-          />
-          <div className="border-t border-border p-4">
-            <Pagination
-              cursor={cursor}
-              setCursor={setCursor}
-              count={count}
-              take={limit}
-            />
-          </div>
-        </>
-      ) : (
-        <FullPageEmptyState title="No profiles" icon={UsersIcon}>
-          {cursor !== 0 ? (
-            <>
-              <p>Looks like you have reached the end of the list</p>
-              <Button
-                className="mt-4"
-                variant="outline"
-                size="sm"
-                onClick={() => setCursor(Math.max(0, count / limit - 1))}
-              >
-                Go back
-              </Button>
-            </>
-          ) : (
-            <p>Looks like there are no profiles here</p>
-          )}
-        </FullPageEmptyState>
-      )}
-    </Widget>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-top/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-top/index.tsx
deleted file mode 100644
index 337edc1e..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profile-top/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { ListPropertiesIcon } from '@/components/events/list-properties-icon';
-import { ProfileAvatar } from '@/components/profiles/profile-avatar';
-import { Widget, WidgetHead } from '@/components/widget';
-import { WidgetTable } from '@/components/widget-table';
-import withLoadingWidget from '@/hocs/with-loading-widget';
-import { getProfileName } from '@/utils/getters';
-import Link from 'next/link';
-import { escape } from 'sqlstring';
-
-import { chQuery, getProfiles, TABLE_NAMES } from '@openpanel/db';
-
-interface Props {
-  projectId: string;
-  organizationSlug: string;
-}
-
-async function ProfileTopServer({ organizationSlug, projectId }: Props) {
-  // Days since last event from users
-  // group by days
-  const res = await chQuery<{ profile_id: string; count: number }>(
-    `SELECT profile_id, count(*) as count from ${TABLE_NAMES.events} where profile_id != '' and project_id = ${escape(projectId)} group by profile_id order by count() DESC LIMIT 50`
-  );
-  const profiles = await getProfiles(res.map((r) => r.profile_id));
-  const list = res.map((item) => {
-    return {
-      count: item.count,
-      ...(profiles.find((p) => p.id === item.profile_id)! ?? {}),
-    };
-  });
-
-  return (
-    <Widget className="w-full">
-      <WidgetHead>
-        <div className="title">Power users</div>
-      </WidgetHead>
-      <WidgetTable
-        data={list.filter((item) => !!item.id)}
-        keyExtractor={(item) => item.id}
-        columns={[
-          {
-            name: 'Name',
-            render(profile) {
-              return (
-                <Link
-                  href={`/${organizationSlug}/${projectId}/profiles/${profile.id}`}
-                  className="flex items-center gap-2 font-medium"
-                >
-                  <ProfileAvatar size="sm" {...profile} />
-                  {getProfileName(profile)}
-                </Link>
-              );
-            },
-          },
-          {
-            name: '',
-            render(profile) {
-              return <ListPropertiesIcon {...profile.properties} />;
-            },
-          },
-          {
-            name: 'Events',
-            render(profile) {
-              return profile.count;
-            },
-          },
-        ]}
-      />
-    </Widget>
-  );
-}
-
-export default withLoadingWidget(ProfileTopServer);
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profiles.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profiles.tsx
new file mode 100644
index 00000000..5c75be0a
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profiles.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { ProfilesTable } from '@/components/profiles/table';
+import { api } from '@/trpc/client';
+import { parseAsInteger, useQueryState } from 'nuqs';
+
+type Props = {
+  projectId: string;
+  profileId?: string;
+};
+
+const Events = ({ projectId }: Props) => {
+  const [cursor, setCursor] = useQueryState(
+    'cursor',
+    parseAsInteger.withDefault(0)
+  );
+  const query = api.profile.list.useQuery(
+    {
+      cursor,
+      projectId,
+      take: 50,
+      // filters,
+    },
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  return (
+    <div>
+      <ProfilesTable query={query} cursor={cursor} setCursor={setCursor} />
+    </div>
+  );
+};
+
+export default Events;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/map/map.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/map/map.tsx
index 1349d064..da382e56 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/map/map.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/map/map.tsx
@@ -99,7 +99,7 @@ const Map = ({ markers }: Props) => {
     <div
       className={cn(
         'fixed bottom-0 left-0 right-0 top-0',
-        !isFullscreen && 'top-16 lg:left-72'
+        !isFullscreen && 'lg:left-72'
       )}
       ref={ref}
     >
@@ -123,8 +123,8 @@ const Map = ({ markers }: Props) => {
                     <Geography
                       key={geo.rsmKey}
                       geography={geo}
-                      fill={theme.theme === 'dark' ? '#0f0f0f' : '#F0F4F9'}
-                      stroke={theme.theme === 'dark' ? '#262626' : '#DDE3E9'}
+                      fill={theme.theme === 'dark' ? '#000' : '#e5eef6'}
+                      stroke={theme.theme === 'dark' ? '#333' : '#bcccda'}
                       pointerEvents={'none'}
                     />
                   ))
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/page.tsx
index 0f8b9ab1..082eb086 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/page.tsx
@@ -18,23 +18,19 @@ type Props = {
     projectId: string;
   };
 };
-export default function Page({
-  params: { projectId, organizationSlug },
-}: Props) {
+export default function Page({ params: { projectId } }: Props) {
   return (
     <>
-      <PageLayout
-        title={<FullscreenOpen />}
-        {...{ projectId, organizationSlug }}
-      />
       <Fullscreen>
         <FullscreenClose />
         <RealtimeReloader projectId={projectId} />
         <Suspense>
           <RealtimeMap projectId={projectId} />
         </Suspense>
-        <div className="relative z-10 grid min-h-[calc(100vh-theme(spacing.16))] items-start gap-4 overflow-hidden p-8 md:grid-cols-3">
-          <div className="card bg-card/80 p-4">
+
+        <div className="row relative z-10 min-h-screen items-start gap-4 overflow-hidden p-8">
+          <FullscreenOpen />
+          <div className="card min-w-52 bg-card/80 p-4 md:min-w-80">
             <RealtimeLiveHistogram projectId={projectId} />
           </div>
           <div className="col-span-2">
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/realtime-live-histogram.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/realtime-live-histogram.tsx
index a5009da7..a910673a 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/realtime-live-histogram.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/realtime-live-histogram.tsx
@@ -83,7 +83,7 @@ export function RealtimeLiveHistogram({
         {staticArray.map((percent, i) => (
           <div
             key={i}
-            className="flex-1 animate-pulse rounded-md bg-def-200"
+            className="flex-1 animate-pulse rounded bg-def-200"
             style={{ height: `${percent}%` }}
           />
         ))}
@@ -103,7 +103,7 @@ export function RealtimeLiveHistogram({
             <TooltipTrigger asChild>
               <div
                 className={cn(
-                  'flex-1 rounded-md transition-all ease-in-out hover:scale-110',
+                  'flex-1 rounded transition-all ease-in-out hover:scale-110',
                   minute.count === 0 ? 'bg-def-200' : 'bg-highlight'
                 )}
                 style={{
@@ -138,11 +138,11 @@ const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), {
 function Wrapper({ children, count }: WrapperProps) {
   return (
     <div className="flex flex-col">
-      <div className="p-4">
+      <div className="col gap-2 p-4">
         <div className="font-medium text-muted-foreground">
           Unique vistors last 30 minutes
         </div>
-        <div className="text-6xl font-bold">
+        <div className="font-mono text-6xl font-bold">
           <AnimatedNumbers
             includeComma
             transitions={(index) => ({
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/[reportId]/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/[reportId]/page.tsx
index 6e24e274..4e9a7bc3 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/[reportId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/[reportId]/page.tsx
@@ -1,6 +1,5 @@
 import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 import EditReportName from '@/components/report/edit-report-name';
-import { Pencil } from 'lucide-react';
 import { notFound } from 'next/navigation';
 
 import { getReportById } from '@openpanel/db';
@@ -9,15 +8,12 @@ import ReportEditor from '../report-editor';
 
 interface PageProps {
   params: {
-    organizationSlug: string;
     projectId: string;
     reportId: string;
   };
 }
 
-export default async function Page({
-  params: { reportId, organizationSlug },
-}: PageProps) {
+export default async function Page({ params: { reportId } }: PageProps) {
   const report = await getReportById(reportId);
 
   if (!report) {
@@ -26,10 +22,7 @@ export default async function Page({
 
   return (
     <>
-      <PageLayout
-        organizationSlug={organizationSlug}
-        title={<EditReportName name={report.name} />}
-      />
+      <PageLayout title={<EditReportName name={report.name} />} />
       <ReportEditor report={report} />
     </>
   );
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/page.tsx
index 28d80493..9ac0223e 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/page.tsx
@@ -1,23 +1,12 @@
 import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 import EditReportName from '@/components/report/edit-report-name';
-import { Pencil } from 'lucide-react';
 
 import ReportEditor from './report-editor';
 
-interface PageProps {
-  params: {
-    organizationSlug: string;
-    projectId: string;
-  };
-}
-
-export default function Page({ params: { organizationSlug } }: PageProps) {
+export default function Page() {
   return (
     <>
-      <PageLayout
-        organizationSlug={organizationSlug}
-        title={<EditReportName name={undefined} />}
-      />
+      <PageLayout title={<EditReportName name={undefined} />} />
       <ReportEditor report={null} />
     </>
   );
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/last-active-users/chart.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/last-active-users/chart.tsx
index 859dec25..b2db1eb0 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/last-active-users/chart.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/last-active-users/chart.tsx
@@ -23,15 +23,15 @@ function Tooltip(props: any) {
     return null;
   }
   return (
-    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3 text-sm shadow-xl">
+    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3  shadow-xl">
       <div>
-        <div className="text-xs text-muted-foreground">
+        <div className="text-sm text-muted-foreground">
           Days since last seen
         </div>
         <div className="text-lg font-semibold">{payload.days}</div>
       </div>
       <div>
-        <div className="text-xs text-muted-foreground">Active users</div>
+        <div className="text-sm text-muted-foreground">Active users</div>
         <div className="text-lg font-semibold">{payload.users}</div>
       </div>
     </div>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/page.tsx
index 4c085ebb..da39f6a6 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/page.tsx
@@ -1,7 +1,7 @@
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Padding } from '@/components/ui/padding';
 import { AlertCircleIcon } from 'lucide-react';
 
-import PageLayout from '../page-layout';
 import LastActiveUsersServer from './last-active-users';
 import RollingActiveUsers from './rolling-active-users';
 import UsersRetentionSeries from './users-retention-series';
@@ -9,16 +9,15 @@ import WeeklyCohortsServer from './weekly-cohorts';
 
 type Props = {
   params: {
-    organizationSlug: string;
     projectId: string;
   };
 };
 
-const Retention = ({ params: { projectId, organizationSlug } }: Props) => {
+const Retention = ({ params: { projectId } }: Props) => {
   return (
-    <>
-      <PageLayout title="Retention" organizationSlug={organizationSlug} />
-      <div className="flex flex-col gap-8 p-8">
+    <Padding>
+      <h1 className="mb-4 text-3xl font-semibold">Retention</h1>
+      <div className="flex max-w-6xl flex-col gap-8">
         <Alert>
           <AlertCircleIcon size={18} />
           <AlertTitle>Experimental feature</AlertTitle>
@@ -59,7 +58,7 @@ const Retention = ({ params: { projectId, organizationSlug } }: Props) => {
         <UsersRetentionSeries projectId={projectId} />
         <WeeklyCohortsServer projectId={projectId} />
       </div>
-    </>
+    </Padding>
   );
 };
 
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/rolling-active-users/chart.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/rolling-active-users/chart.tsx
index 1cd88179..2cdee07c 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/rolling-active-users/chart.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/rolling-active-users/chart.tsx
@@ -29,20 +29,20 @@ function Tooltip(props: any) {
     return null;
   }
   return (
-    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3 text-sm shadow-xl">
-      <div className="text-xs text-muted-foreground">{payload.date}</div>
+    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3  shadow-xl">
+      <div className="text-sm text-muted-foreground">{payload.date}</div>
       <div>
-        <div className="text-xs text-muted-foreground">
+        <div className="text-sm text-muted-foreground">
           Monthly active users
         </div>
         <div className="text-lg font-semibold text-chart-2">{payload.mau}</div>
       </div>
       <div>
-        <div className="text-xs text-muted-foreground">Weekly active users</div>
+        <div className="text-sm text-muted-foreground">Weekly active users</div>
         <div className="text-lg font-semibold text-chart-1">{payload.wau}</div>
       </div>
       <div>
-        <div className="text-xs text-muted-foreground">Daily active users</div>
+        <div className="text-sm text-muted-foreground">Daily active users</div>
         <div className="text-lg font-semibold text-chart-0">{payload.dau}</div>
       </div>
     </div>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx
index b7001730..be03e574 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx
@@ -33,20 +33,20 @@ function Tooltip({ payload }: any) {
     return null;
   }
   return (
-    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3 text-sm shadow-xl">
+    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3  shadow-xl">
       <div className="flex justify-between gap-8">
         <div>{formatDate(new Date(date))}</div>
       </div>
       <div>
-        <div className="text-xs text-muted-foreground">Active Users</div>
+        <div className="text-sm text-muted-foreground">Active Users</div>
         <div className="text-lg font-semibold">{active_users}</div>
       </div>
       <div>
-        <div className="text-xs text-muted-foreground">Retained Users</div>
+        <div className="text-sm text-muted-foreground">Retained Users</div>
         <div className="text-lg font-semibold">{retained_users}</div>
       </div>
       <div>
-        <div className="text-xs text-muted-foreground">Retention</div>
+        <div className="text-sm text-muted-foreground">Retention</div>
         <div className="text-lg font-semibold">{round(retention, 2)}%</div>
       </div>
     </div>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/weekly-cohorts/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/weekly-cohorts/index.tsx
index 9c62032e..1fa9b1b5 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/weekly-cohorts/index.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/weekly-cohorts/index.tsx
@@ -15,7 +15,7 @@ const Cell = ({ value, ratio }: { value: number; ratio: number }) => {
       className={cn('relative h-8 border', ratio !== 0 && 'border-background')}
     >
       <div
-        className="bg-highlight absolute inset-0 z-0"
+        className="absolute inset-0 z-0 bg-highlight"
         style={{ opacity: ratio }}
       ></div>
       <div className="relative z-10">{value}</div>
@@ -76,7 +76,7 @@ const WeeklyCohortsServer = async ({ projectId }: Props) => {
             <tbody>
               {res.map((row) => (
                 <tr key={row.first_seen}>
-                  <td className="bg-def-100 text-def-1000 text-sm font-medium">
+                  <td className="text-def-1000 bg-def-100  font-medium">
                     {row.first_seen}
                   </td>
                   <Cell
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/create-invite.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/create-invite.tsx
index 5de9dfa8..2c9c5f21 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/create-invite.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/create-invite.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';
 import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
@@ -126,7 +128,7 @@ export default function CreateInvite({ projects }: Props) {
                     value: item.id,
                   }))}
                 />
-                <p className="mt-1 text-xs text-muted-foreground">
+                <p className="mt-1 text-sm text-muted-foreground">
                   Leave empty to give access to all projects
                 </p>
               </div>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/index.tsx
index dfa64e75..247eceb0 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/index.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/index.tsx
@@ -1,6 +1,9 @@
+import { TableButtons } from '@/components/data-table';
+import { InvitesTable } from '@/components/settings/invites';
+
 import { getInvites, getProjectsByOrganizationSlug } from '@openpanel/db';
 
-import Invites from './invites';
+import CreateInvite from './create-invite';
 
 interface Props {
   organizationSlug: string;
@@ -12,7 +15,14 @@ const InvitesServer = async ({ organizationSlug }: Props) => {
     getProjectsByOrganizationSlug(organizationSlug),
   ]);
 
-  return <Invites invites={invites} projects={projects} />;
+  return (
+    <div>
+      <TableButtons>
+        <CreateInvite projects={projects} />
+      </TableButtons>
+      <InvitesTable data={invites} projects={projects} />
+    </div>
+  );
 };
 
 export default InvitesServer;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/invites.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/invites.tsx
deleted file mode 100644
index ef37b7ca..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/invites.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client';
-
-import { TooltipComplete } from '@/components/tooltip-complete';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Widget, WidgetHead } from '@/components/widget';
-import { api } from '@/trpc/client';
-import { MoreHorizontalIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import { pathOr } from 'ramda';
-import { toast } from 'sonner';
-
-import type { IServiceInvite, IServiceProject } from '@openpanel/db';
-
-import CreateInvite from './create-invite';
-
-interface Props {
-  invites: IServiceInvite[];
-  projects: IServiceProject[];
-}
-
-const Invites = ({ invites, projects }: Props) => {
-  return (
-    <Widget>
-      <WidgetHead className="flex items-center justify-between">
-        <span className="title">Invites</span>
-        <CreateInvite projects={projects} />
-      </WidgetHead>
-      <Table className="mini">
-        <TableHeader>
-          <TableRow>
-            <TableHead>Mail</TableHead>
-            <TableHead>Role</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead>Access</TableHead>
-            <TableHead>More</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {invites.map((item) => {
-            return <Item {...item} projects={projects} key={item.id} />;
-          })}
-        </TableBody>
-      </Table>
-    </Widget>
-  );
-};
-
-interface ItemProps extends IServiceInvite {
-  projects: IServiceProject[];
-}
-
-function Item({ id, email, role, createdAt, projects, meta }: ItemProps) {
-  const router = useRouter();
-  const access = pathOr<string[]>([], ['access'], meta);
-  const revoke = api.organization.revokeInvite.useMutation({
-    onSuccess() {
-      toast.success(`Invite for ${email} revoked`);
-      router.refresh();
-    },
-    onError() {
-      toast.error(`Failed to revoke invite for ${email}`);
-    },
-  });
-  return (
-    <TableRow key={id}>
-      <TableCell className="font-medium">{email}</TableCell>
-      <TableCell>{role}</TableCell>
-      <TableCell>
-        <TooltipComplete content={new Date(createdAt).toLocaleString()}>
-          {new Date(createdAt).toLocaleDateString()}
-        </TooltipComplete>
-      </TableCell>
-      <TableCell>
-        {access.map((id) => {
-          const project = projects.find((p) => p.id === id);
-          if (!project) {
-            return (
-              <Badge key={id} className="mr-1">
-                Unknown
-              </Badge>
-            );
-          }
-          return (
-            <Badge key={id} color="blue" className="mr-1">
-              {project.name}
-            </Badge>
-          );
-        })}
-        {access.length === 0 && (
-          <Badge variant={'secondary'}>All projects</Badge>
-        )}
-      </TableCell>
-      <TableCell>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button icon={MoreHorizontalIcon} size="icon" variant={'outline'} />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem
-              className="text-destructive"
-              onClick={() => {
-                revoke.mutate({ memberId: id });
-              }}
-            >
-              Revoke invite
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export default Invites;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/members/index.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/members/index.tsx
index 89a424c3..1f485c02 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/members/index.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/members/index.tsx
@@ -1,6 +1,6 @@
-import { getMembers, getProjectsByOrganizationSlug } from '@openpanel/db';
+import { MembersTable } from '@/components/settings/members';
 
-import Members from './members';
+import { getMembers, getProjectsByOrganizationSlug } from '@openpanel/db';
 
 interface Props {
   organizationSlug: string;
@@ -12,7 +12,7 @@ const MembersServer = async ({ organizationSlug }: Props) => {
     getProjectsByOrganizationSlug(organizationSlug),
   ]);
 
-  return <Members members={members} projects={projects} />;
+  return <MembersTable data={members} projects={projects} />;
 };
 
 export default MembersServer;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/members/members.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/members/members.tsx
deleted file mode 100644
index fa9c7b12..00000000
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/members/members.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { TooltipComplete } from '@/components/tooltip-complete';
-import { Button } from '@/components/ui/button';
-import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Widget, WidgetHead } from '@/components/widget';
-import { api } from '@/trpc/client';
-import { MoreHorizontalIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
-
-import type { IServiceMember, IServiceProject } from '@openpanel/db';
-
-interface Props {
-  members: IServiceMember[];
-  projects: IServiceProject[];
-}
-
-const Members = ({ members, projects }: Props) => {
-  return (
-    <Widget>
-      <WidgetHead className="flex items-center justify-between">
-        <span className="title">Members</span>
-      </WidgetHead>
-      <Table className="mini">
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Role</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead>Access</TableHead>
-            <TableHead>More</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {members.map((item) => {
-            return <Item {...item} projects={projects} key={item.id} />;
-          })}
-        </TableBody>
-      </Table>
-    </Widget>
-  );
-};
-
-interface ItemProps extends IServiceMember {
-  projects: IServiceProject[];
-}
-
-function Item({
-  id,
-  user,
-  role,
-  organizationId,
-  createdAt,
-  projects,
-  access: prevAccess,
-}: ItemProps) {
-  const router = useRouter();
-  const mutation = api.organization.updateMemberAccess.useMutation();
-  const revoke = api.organization.removeMember.useMutation({
-    onSuccess() {
-      toast.success(
-        `${user?.firstName} has been removed from the organization`
-      );
-      router.refresh();
-    },
-    onError() {
-      toast.error(`Failed to remove ${user?.firstName} from the organization`);
-    },
-  });
-  const [access, setAccess] = useState<string[]>(
-    prevAccess.map((item) => item.projectId)
-  );
-
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <TableRow key={id}>
-      <TableCell className="font-medium">
-        <div>{[user?.firstName, user?.lastName].filter(Boolean).join(' ')}</div>
-        <div className="text-sm text-muted-foreground">{user?.email}</div>
-      </TableCell>
-      <TableCell>{role}</TableCell>
-      <TableCell>
-        <TooltipComplete content={new Date(createdAt).toLocaleString()}>
-          {new Date(createdAt).toLocaleDateString()}
-        </TooltipComplete>
-      </TableCell>
-      <TableCell>
-        <ComboboxAdvanced
-          placeholder="Restrict access to projects"
-          value={access}
-          onChange={(newAccess) => {
-            setAccess(newAccess);
-            mutation.mutate({
-              userId: user.id,
-              organizationSlug: organizationId,
-              access: newAccess as string[],
-            });
-          }}
-          items={projects.map((item) => ({
-            label: item.name,
-            value: item.id,
-          }))}
-        />
-      </TableCell>
-      <TableCell>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button icon={MoreHorizontalIcon} size="icon" variant={'outline'} />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem
-              className="text-destructive"
-              onClick={() => {
-                revoke.mutate({ organizationId: organizationId, userId: id });
-              }}
-            >
-              Remove member
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export default Members;
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/page.tsx
index f190caa6..c8a5a90a 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/page.tsx
@@ -1,8 +1,11 @@
 import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import { PageTabs, PageTabsLink } from '@/components/page-tabs';
+import { Padding } from '@/components/ui/padding';
 import { auth } from '@clerk/nextjs/server';
 import { ShieldAlertIcon } from 'lucide-react';
 import { notFound } from 'next/navigation';
+import { parseAsStringEnum } from 'nuqs';
 
 import { db } from '@openpanel/db';
 
@@ -14,11 +17,16 @@ interface PageProps {
   params: {
     organizationSlug: string;
   };
+  searchParams: Record<string, string>;
 }
 
 export default async function Page({
   params: { organizationSlug },
+  searchParams,
 }: PageProps) {
+  const tab = parseAsStringEnum(['org', 'members', 'invites'])
+    .withDefault('org')
+    .parseServerSide(searchParams.tab);
   const session = auth();
   const organization = await db.organization.findUnique({
     where: {
@@ -49,30 +57,36 @@ export default async function Page({
 
   const hasAccess = member?.role === 'org:admin';
 
+  if (!hasAccess) {
+    return (
+      <FullPageEmptyState icon={ShieldAlertIcon} title="No access">
+        You do not have access to this page. You need to be an admin of this
+        organization to access this page.
+      </FullPageEmptyState>
+    );
+  }
+
   return (
-    <>
-      <PageLayout
-        title={organization.name}
-        organizationSlug={organizationSlug}
-      />
-      {hasAccess ? (
-        <div className="grid gap-8 p-4 lg:grid-cols-2">
-          <EditOrganization organization={organization} />
-          <div className="col-span-2">
-            <MembersServer organizationSlug={organizationSlug} />
-          </div>
-          <div className="col-span-2">
-            <InvitesServer organizationSlug={organizationSlug} />
-          </div>
-        </div>
-      ) : (
-        <>
-          <FullPageEmptyState icon={ShieldAlertIcon} title="No access">
-            You do not have access to this page. You need to be an admin of this
-            organization to access this page.
-          </FullPageEmptyState>
-        </>
+    <Padding>
+      <PageTabs className="mb-4">
+        <PageTabsLink href={`?tab=org`} isActive={tab === 'org'}>
+          Organization
+        </PageTabsLink>
+        <PageTabsLink href={`?tab=members`} isActive={tab === 'members'}>
+          Members
+        </PageTabsLink>
+        <PageTabsLink href={`?tab=invites`} isActive={tab === 'invites'}>
+          Invites
+        </PageTabsLink>
+      </PageTabs>
+
+      {tab === 'org' && <EditOrganization organization={organization} />}
+      {tab === 'members' && (
+        <MembersServer organizationSlug={organizationSlug} />
       )}
-    </>
+      {tab === 'invites' && (
+        <InvitesServer organizationSlug={organizationSlug} />
+      )}
+    </Padding>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/profile/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/profile/page.tsx
index a4733704..e3838fc1 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/profile/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/profile/page.tsx
@@ -1,32 +1,18 @@
-import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
+import { Padding } from '@/components/ui/padding';
 import { auth } from '@clerk/nextjs/server';
 
 import { getUserById } from '@openpanel/db';
 
 import EditProfile from './edit-profile';
-import { Logout } from './logout';
 
-interface PageProps {
-  params: {
-    organizationSlug: string;
-  };
-}
-export default async function Page({
-  params: { organizationSlug },
-}: PageProps) {
+export default async function Page() {
   const { userId } = auth();
   const profile = await getUserById(userId!);
 
   return (
-    <>
-      <PageLayout
-        title={profile.lastName}
-        organizationSlug={organizationSlug}
-      />
-      <div className="flex flex-col gap-4 p-4">
-        <EditProfile profile={profile} />
-        <Logout />
-      </div>
-    </>
+    <Padding>
+      <h1 className="mb-4 text-2xl font-bold">Profile</h1>
+      <EditProfile profile={profile} />
+    </Padding>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/list-projects.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/list-projects.tsx
index 673c0332..97460007 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/list-projects.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/list-projects.tsx
@@ -24,93 +24,89 @@ interface ListProjectsProps {
 export default function ListProjects({ projects, clients }: ListProjectsProps) {
   return (
     <>
-      <StickyBelowHeader>
-        <div className="flex items-center justify-between p-4">
-          <div />
-          <Button icon={PlusIcon} onClick={() => pushModal('AddProject')}>
-            <span className="max-sm:hidden">Create project</span>
-            <span className="sm:hidden">Project</span>
-          </Button>
-        </div>
-      </StickyBelowHeader>
-      <div className="p-4">
-        <div className="card p-4">
-          <Alert className="mb-4">
-            <InfoIcon size={16} />
-            <AlertTitle>What is a project</AlertTitle>
-            <AlertDescription>
-              A project can be a website, mobile app or any other application
-              that you want to track event for. Each project can have one or
-              more clients. The client is used to send events to the project.
-            </AlertDescription>
-          </Alert>
-          <Accordion type="single" collapsible className="-mx-4">
-            {projects.map((project) => {
-              const pClients = clients.filter(
-                (client) => client.projectId === project.id
-              );
-              return (
-                <AccordionItem
-                  value={project.id}
-                  key={project.id}
-                  className="last:border-b-0"
-                >
-                  <AccordionTrigger className="px-4">
-                    <div className="flex-1 text-left">
-                      {project.name}
-                      <span className="ml-2 text-muted-foreground">
-                        {pClients.length > 0
-                          ? `(${pClients.length} clients)`
-                          : 'No clients created yet'}
-                      </span>
-                    </div>
-                    <div className="mx-4"></div>
-                  </AccordionTrigger>
-                  <AccordionContent className="px-4">
-                    <ProjectActions {...project} />
-                    <div className="mt-4 grid gap-4 md:grid-cols-3">
-                      {pClients.map((item) => {
-                        return (
-                          <div
-                            className="relative rounded border border-border p-4"
-                            key={item.id}
+      <div className="row mb-4 justify-between">
+        <h1 className="text-2xl font-bold">Projects</h1>
+        <Button icon={PlusIcon} onClick={() => pushModal('AddProject')}>
+          <span className="max-sm:hidden">Create project</span>
+          <span className="sm:hidden">Project</span>
+        </Button>
+      </div>
+      <div className="card p-4">
+        <Alert className="mb-4">
+          <InfoIcon size={16} />
+          <AlertTitle>What is a project</AlertTitle>
+          <AlertDescription>
+            A project can be a website, mobile app or any other application that
+            you want to track event for. Each project can have one or more
+            clients. The client is used to send events to the project.
+          </AlertDescription>
+        </Alert>
+        <Accordion type="single" collapsible className="-mx-4">
+          {projects.map((project) => {
+            const pClients = clients.filter(
+              (client) => client.projectId === project.id
+            );
+            return (
+              <AccordionItem
+                value={project.id}
+                key={project.id}
+                className="last:border-b-0"
+              >
+                <AccordionTrigger className="px-4">
+                  <div className="flex-1 text-left">
+                    {project.name}
+                    <span className="ml-2 text-muted-foreground">
+                      {pClients.length > 0
+                        ? `(${pClients.length} clients)`
+                        : 'No clients created yet'}
+                    </span>
+                  </div>
+                  <div className="mx-4"></div>
+                </AccordionTrigger>
+                <AccordionContent className="px-4">
+                  <ProjectActions {...project} />
+                  <div className="mt-4 grid gap-4 md:grid-cols-3">
+                    {pClients.map((item) => {
+                      return (
+                        <div
+                          className="relative rounded border border-border p-4"
+                          key={item.id}
+                        >
+                          <div className="mb-1 font-medium">{item.name}</div>
+                          <Tooltiper
+                            className="text-muted-foreground"
+                            content={item.id}
                           >
-                            <div className="mb-1 font-medium">{item.name}</div>
-                            <Tooltiper
-                              className="text-muted-foreground"
-                              content={item.id}
-                            >
-                              Client ID: ...{item.id.slice(-12)}
-                            </Tooltiper>
-                            <div className="text-muted-foreground">
-                              {item.cors &&
-                                item.cors !== '*' &&
-                                `Website: ${item.cors}`}
-                            </div>
-                            <div className="absolute right-4 top-4">
-                              <ClientActions {...item} />
-                            </div>
+                            Client ID: ...{item.id.slice(-12)}
+                          </Tooltiper>
+                          <div className="text-muted-foreground">
+                            {item.cors &&
+                              item.cors !== '*' &&
+                              `Website: ${item.cors}`}
                           </div>
-                        );
-                      })}
-                      <button
-                        onClick={() => {
-                          pushModal('AddClient', {
-                            projectId: project.id,
-                          });
-                        }}
-                        className="flex items-center justify-center gap-4 rounded bg-muted p-4"
-                      >
-                        <PlusSquareIcon />
-                        <div className="font-medium">New client</div>
-                      </button>
-                    </div>
-                  </AccordionContent>
-                </AccordionItem>
-              );
-            })}
-          </Accordion>
-        </div>
+                          <div className="absolute right-4 top-4">
+                            <ClientActions {...item} />
+                          </div>
+                        </div>
+                      );
+                    })}
+                    <button
+                      onClick={() => {
+                        pushModal('AddClient', {
+                          projectId: project.id,
+                        });
+                      }}
+                      className="flex items-center justify-center gap-4 rounded bg-muted p-4"
+                    >
+                      <PlusSquareIcon />
+                      <div className="font-medium">New client</div>
+                    </button>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            );
+          })}
+        </Accordion>
       </div>
     </>
   );
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/page.tsx
index c968f620..a0242f63 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/page.tsx
@@ -1,4 +1,5 @@
 import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
+import { Padding } from '@/components/ui/padding';
 
 import {
   getClientsByOrganizationSlug,
@@ -22,9 +23,8 @@ export default async function Page({
   ]);
 
   return (
-    <>
-      <PageLayout title="Projects" organizationSlug={organizationSlug} />
+    <Padding>
       <ListProjects projects={projects} clients={clients} />
-    </>
+    </Padding>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/references/list-references.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/references/list-references.tsx
index 85456771..d493af55 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/references/list-references.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/references/list-references.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { StickyBelowHeader } from '@/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header';
 import { DataTable } from '@/components/data-table';
 import { columns } from '@/components/references/table';
 import { Button } from '@/components/ui/button';
+import { Padding } from '@/components/ui/padding';
 import { pushModal } from '@/modals';
 import { PlusIcon } from 'lucide-react';
 
@@ -15,19 +15,15 @@ interface ListProjectsProps {
 
 export default function ListReferences({ data }: ListProjectsProps) {
   return (
-    <>
-      <StickyBelowHeader>
-        <div className="flex items-center justify-between p-4">
-          <div />
-          <Button icon={PlusIcon} onClick={() => pushModal('AddReference')}>
-            <span className="max-sm:hidden">Create reference</span>
-            <span className="sm:hidden">Reference</span>
-          </Button>
-        </div>
-      </StickyBelowHeader>
-      <div className="p-4">
-        <DataTable data={data} columns={columns} />
+    <Padding>
+      <div className="mb-4 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">References</h1>
+        <Button icon={PlusIcon} onClick={() => pushModal('AddReference')}>
+          <span className="max-sm:hidden">Create reference</span>
+          <span className="sm:hidden">Reference</span>
+        </Button>
       </div>
-    </>
+      <DataTable data={data} columns={columns} />
+    </Padding>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/references/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/references/page.tsx
index cd2593a0..c506cdec 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/references/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/references/page.tsx
@@ -1,5 +1,3 @@
-import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
-
 import { getReferences } from '@openpanel/db';
 
 import ListReferences from './list-references';
@@ -11,9 +9,7 @@ interface PageProps {
   };
 }
 
-export default async function Page({
-  params: { organizationSlug, projectId },
-}: PageProps) {
+export default async function Page({ params: { projectId } }: PageProps) {
   const references = await getReferences({
     where: {
       projectId,
@@ -24,7 +20,6 @@ export default async function Page({
 
   return (
     <>
-      <PageLayout title="References" organizationSlug={organizationSlug} />
       <ListReferences data={references} />
     </>
   );
diff --git a/apps/dashboard/src/app/(onboarding)/layout.tsx b/apps/dashboard/src/app/(onboarding)/layout.tsx
index a4108d55..af1c0e11 100644
--- a/apps/dashboard/src/app/(onboarding)/layout.tsx
+++ b/apps/dashboard/src/app/(onboarding)/layout.tsx
@@ -20,9 +20,9 @@ const Page = ({ children }: Props) => {
         </FullWidthNavbar>
         <div className="mx-auto w-full md:max-w-[95vw] lg:max-w-[80vw]">
           <div className="grid md:grid-cols-[25vw_1fr] lg:grid-cols-[20vw_1fr]">
-            <div className="max-w-screen bg-def-200 flex flex-col gap-4 overflow-hidden p-4 pr-0 md:bg-transparent md:py-14">
+            <div className="max-w-screen flex flex-col gap-4 overflow-hidden bg-def-200 p-4 pr-0 md:bg-transparent md:py-14">
               <div>
-                <div className="text-xs font-bold uppercase text-[#7b94ac]">
+                <div className="text-sm font-bold uppercase text-[#7b94ac]">
                   Welcome to Openpanel
                 </div>
                 <div className="text-xl font-medium leading-loose">
diff --git a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-app.tsx b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-app.tsx
index 2e65020b..b76f828e 100644
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-app.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-app.tsx
@@ -15,7 +15,7 @@ const ConnectApp = ({ client }: Props) => {
         <SmartphoneIcon />
         App
       </div>
-      <p className="mt-2 text-sm text-muted-foreground">
+      <p className="mt-2  text-muted-foreground">
         Pick a framework below to get started.
       </p>
       <div className="mt-4 grid gap-4 md:grid-cols-2">
@@ -30,7 +30,7 @@ const ConnectApp = ({ client }: Props) => {
             className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
             key={framework.name}
           >
-            <div className="bg-def-200 h-10 w-10 rounded-md p-2">
+            <div className="h-10 w-10 rounded-md bg-def-200 p-2">
               <img
                 className="h-full w-full object-contain"
                 src={framework.logo}
@@ -43,7 +43,7 @@ const ConnectApp = ({ client }: Props) => {
           </button>
         ))}
       </div>
-      <p className="mt-2 text-xs text-muted-foreground">
+      <p className="mt-2 text-sm text-muted-foreground">
         Missing a framework?{' '}
         <a
           href="mailto:hello@openpanel.dev"
diff --git a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx
index 39958511..c25f9597 100644
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx
@@ -15,7 +15,7 @@ const ConnectBackend = ({ client }: Props) => {
         <ServerIcon />
         Backend
       </div>
-      <p className="mt-2 text-sm text-muted-foreground">
+      <p className="mt-2  text-muted-foreground">
         Pick a framework below to get started.
       </p>
       <div className="mt-4 grid gap-4 md:grid-cols-2">
@@ -30,7 +30,7 @@ const ConnectBackend = ({ client }: Props) => {
             className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
             key={framework.name}
           >
-            <div className="bg-def-200 h-10 w-10 rounded-md p-2">
+            <div className="h-10 w-10 rounded-md bg-def-200 p-2">
               <img
                 className="h-full w-full object-contain"
                 src={framework.logo}
@@ -43,7 +43,7 @@ const ConnectBackend = ({ client }: Props) => {
           </button>
         ))}
       </div>
-      <p className="mt-2 text-xs text-muted-foreground">
+      <p className="mt-2 text-sm text-muted-foreground">
         Missing a framework?{' '}
         <a
           href="mailto:hello@openpanel.dev"
diff --git a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-web.tsx b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-web.tsx
index b14dbe6c..fcc54716 100644
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-web.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-web.tsx
@@ -15,7 +15,7 @@ const ConnectWeb = ({ client }: Props) => {
         <MonitorIcon />
         Website
       </div>
-      <p className="mt-2 text-sm text-muted-foreground">
+      <p className="mt-2  text-muted-foreground">
         Pick a framework below to get started.
       </p>
       <div className="mt-4 grid gap-4 md:grid-cols-2">
@@ -30,7 +30,7 @@ const ConnectWeb = ({ client }: Props) => {
             className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
             key={framework.name}
           >
-            <div className="bg-def-200 h-10 w-10 rounded-md p-2">
+            <div className="h-10 w-10 rounded-md bg-def-200 p-2">
               <img
                 className="h-full w-full object-contain"
                 src={framework.logo}
@@ -43,7 +43,7 @@ const ConnectWeb = ({ client }: Props) => {
           </button>
         ))}
       </div>
-      <p className="mt-2 text-xs text-muted-foreground">
+      <p className="mt-2 text-sm text-muted-foreground">
         Missing a framework?{' '}
         <a
           href="mailto:hello@openpanel.dev"
diff --git a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify-listener.tsx b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify-listener.tsx
index f96f16e8..ba0256b7 100644
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify-listener.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify-listener.tsx
@@ -61,7 +61,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
       <div className="flex items-center gap-2 text-2xl capitalize">
         {client?.name}
       </div>
-      <div className="mt-2 text-xs font-semibold text-muted-foreground">
+      <div className="mt-2 text-sm font-semibold text-muted-foreground">
         Connection status: {renderBadge()}
       </div>
 
@@ -81,13 +81,13 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
           {isConnected ? (
             <div className="flex flex-col-reverse">
               {events.length > 5 && (
-                <div className="flex items-center gap-2 text-sm">
+                <div className="flex items-center gap-2 ">
                   <CheckIcon size={14} />{' '}
                   <span>{events.length - 5} more events</span>
                 </div>
               )}
               {events.slice(-5).map((event, index) => (
-                <div key={index} className="flex items-center gap-2 text-sm">
+                <div key={index} className="flex items-center gap-2 ">
                   <CheckIcon size={14} />{' '}
                   <span className="font-medium">{event.name}</span>{' '}
                   <span className="ml-auto text-emerald-800">
@@ -97,7 +97,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
               ))}
             </div>
           ) : (
-            <div className="text-sm">
+            <div className="">
               Verify that your events works before submitting any changes to App
               Store/Google Play
             </div>
@@ -105,7 +105,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
         </div>
       </div>
 
-      <div className="mt-2 text-xs text-muted-foreground">
+      <div className="mt-2 text-sm text-muted-foreground">
         You can{' '}
         <button
           className="underline"
diff --git a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify.tsx b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify.tsx
index 10a628d8..25322ff8 100644
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify.tsx
@@ -73,7 +73,7 @@ const Verify = ({ project, events }: Props) => {
           {!verified && (
             <Link
               href={`/${project.organizationSlug}/${project.id}`}
-              className="text-sm text-muted-foreground underline"
+              className=" text-muted-foreground underline"
             >
               Skip for now
             </Link>
diff --git a/apps/dashboard/src/app/(onboarding)/skip-onboarding.tsx b/apps/dashboard/src/app/(onboarding)/skip-onboarding.tsx
index 4a4f14ed..bf1708fb 100644
--- a/apps/dashboard/src/app/(onboarding)/skip-onboarding.tsx
+++ b/apps/dashboard/src/app/(onboarding)/skip-onboarding.tsx
@@ -34,7 +34,7 @@ const SkipOnboarding = () => {
           });
         }
       }}
-      className="flex items-center gap-2 text-sm text-muted-foreground"
+      className="flex items-center gap-2  text-muted-foreground"
     >
       Skip onboarding
       <ChevronLastIcon size={16} />
diff --git a/apps/dashboard/src/app/(onboarding)/steps.tsx b/apps/dashboard/src/app/(onboarding)/steps.tsx
index 49209608..6d8c5ceb 100644
--- a/apps/dashboard/src/app/(onboarding)/steps.tsx
+++ b/apps/dashboard/src/app/(onboarding)/steps.tsx
@@ -59,9 +59,9 @@ const Steps = ({ className }: Props) => {
   const currentIndex = steps.findIndex((i) => i.status === 'current');
   return (
     <div className="relative">
-      <div className="bg-def-200 absolute bottom-4 left-4 top-4 w-px"></div>
+      <div className="absolute bottom-4 left-4 top-4 w-px bg-def-200"></div>
       <div
-        className="bg-highlight absolute left-4 top-4 w-px"
+        className="absolute left-4 top-4 w-px bg-highlight"
         style={{
           height: `calc(${((currentIndex + 1) / steps.length) * 100}% - 3.5rem)`,
         }}
@@ -86,17 +86,17 @@ const Steps = ({ className }: Props) => {
           >
             <div
               className={cn(
-                'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm text-white'
+                'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full  text-white'
               )}
             >
               <div
                 className={cn(
-                  'bg-highlight absolute inset-0 z-0 rounded-full',
+                  'absolute inset-0 z-0 rounded-full bg-highlight',
                   step.status === 'pending' && 'bg-def-400'
                 )}
               ></div>
               {step.status === 'current' && (
-                <div className="bg-highlight absolute inset-1 z-0 animate-ping-slow rounded-full"></div>
+                <div className="absolute inset-1 z-0 animate-ping-slow rounded-full bg-highlight"></div>
               )}
               <div className="relative">
                 {step.status === 'completed' && <CheckCheckIcon size={14} />}
@@ -109,7 +109,7 @@ const Steps = ({ className }: Props) => {
               </div>
             </div>
 
-            <div className="text-sm font-medium">{step.name}</div>
+            <div className=" font-medium">{step.name}</div>
           </div>
         ))}
       </div>
diff --git a/apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx b/apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx
index d2ba94fd..a358581e 100644
--- a/apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx
+++ b/apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx
@@ -49,7 +49,7 @@ export default async function Page({
             href="https://openpanel.dev?utm_source=openpanel.dev&utm_medium=share"
             className="flex flex-col items-end text-lg font-medium"
           >
-            <span className="text-xs">POWERED BY</span>
+            <span className="text-sm">POWERED BY</span>
             <span>openpanel.dev</span>
           </a>
         </div>
diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
index 71563cc6..2f4c1ebb 100644
--- a/apps/dashboard/src/app/layout.tsx
+++ b/apps/dashboard/src/app/layout.tsx
@@ -6,6 +6,9 @@ import Providers from './providers';
 import '@/styles/globals.css';
 import '/node_modules/flag-icons/css/flag-icons.min.css';
 
+import { GeistMono } from 'geist/font/mono';
+import { GeistSans } from 'geist/font/sans';
+
 export const metadata = {
   title: 'Overview - Openpanel.dev',
 };
@@ -25,7 +28,11 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={cn('grainy bg-def-100 min-h-screen font-sans antialiased')}
+        className={cn(
+          'grainy min-h-screen bg-def-100 font-sans text-base antialiased',
+          GeistSans.variable,
+          GeistMono.variable
+        )}
       >
         <NextTopLoader
           showSpinner={false}
diff --git a/apps/dashboard/src/components/clients/create-client-success.tsx b/apps/dashboard/src/components/clients/create-client-success.tsx
index ce151734..591a8c1b 100644
--- a/apps/dashboard/src/components/clients/create-client-success.tsx
+++ b/apps/dashboard/src/components/clients/create-client-success.tsx
@@ -16,7 +16,7 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
         <div className="w-full">
           <CopyInput label="Secret" value={secret} />
           {cors && (
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="mt-1 text-sm text-muted-foreground">
               You will only need the secret if you want to send server events.
             </p>
           )}
@@ -25,7 +25,7 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
       {cors && (
         <div className="text-left">
           <Label>CORS settings</Label>
-          <div className="flex items-center justify-between rounded border-input bg-def-200 p-2 px-3 font-mono text-sm">
+          <div className="font-mono flex items-center justify-between rounded border-input bg-def-200 p-2 px-3 ">
             {cors}
           </div>
         </div>
diff --git a/apps/dashboard/src/components/clients/table.tsx b/apps/dashboard/src/components/clients/table.tsx
index 68dfe4c1..12d26213 100644
--- a/apps/dashboard/src/components/clients/table.tsx
+++ b/apps/dashboard/src/components/clients/table.tsx
@@ -13,7 +13,7 @@ export const columns: ColumnDef<IServiceClientWithProject>[] = [
       return (
         <div>
           <div>{row.original.name}</div>
-          <div className="text-sm text-muted-foreground">
+          <div className=" text-muted-foreground">
             {row.original.project?.name ?? 'No project'}
           </div>
         </div>
diff --git a/apps/dashboard/src/components/color-square.tsx b/apps/dashboard/src/components/color-square.tsx
index 61fbf8d1..cbdd63fd 100644
--- a/apps/dashboard/src/components/color-square.tsx
+++ b/apps/dashboard/src/components/color-square.tsx
@@ -7,7 +7,7 @@ export function ColorSquare({ children, className }: ColorSquareProps) {
   return (
     <div
       className={cn(
-        'flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-medium text-white [.mini_&]:h-4 [.mini_&]:w-4 [.mini_&]:text-[0.6rem]',
+        'flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-blue-600 text-sm font-medium text-white [.mini_&]:h-4 [.mini_&]:w-4 [.mini_&]:text-[0.6rem]',
         className
       )}
     >
diff --git a/apps/dashboard/src/components/data-table.tsx b/apps/dashboard/src/components/data-table.tsx
index a4f24418..162c86ba 100644
--- a/apps/dashboard/src/components/data-table.tsx
+++ b/apps/dashboard/src/components/data-table.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { cn } from '@/utils/cn';
 import {
   flexRender,
   getCoreRowModel,
@@ -7,20 +8,27 @@ import {
 } from '@tanstack/react-table';
 import type { ColumnDef } from '@tanstack/react-table';
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from './ui/table';
+import { Grid, GridBody, GridCell, GridHeader, GridRow } from './grid-table';
 
 interface DataTableProps<TData> {
   columns: ColumnDef<TData, any>[];
   data: TData[];
 }
 
+export function TableButtons({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn('mb-2 flex flex-wrap items-center gap-2', className)}>
+      {children}
+    </div>
+  );
+}
+
 export function DataTable<TData>({ columns, data }: DataTableProps<TData>) {
   const table = useReactTable({
     data,
@@ -29,47 +37,45 @@ export function DataTable<TData>({ columns, data }: DataTableProps<TData>) {
   });
 
   return (
-    <Table>
-      <TableHeader>
+    <Grid columns={columns.length}>
+      <GridHeader>
         {table.getHeaderGroups().map((headerGroup) => (
-          <TableRow key={headerGroup.id}>
-            {headerGroup.headers.map((header) => {
-              return (
-                <TableHead key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </TableHead>
-              );
-            })}
-          </TableRow>
+          <GridRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <GridCell key={header.id} isHeader>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+              </GridCell>
+            ))}
+          </GridRow>
         ))}
-      </TableHeader>
-      <TableBody>
+      </GridHeader>
+      <GridBody>
         {table.getRowModel().rows?.length ? (
           table.getRowModel().rows.map((row) => (
-            <TableRow
+            <GridRow
               key={row.id}
               data-state={row.getIsSelected() && 'selected'}
             >
               {row.getVisibleCells().map((cell) => (
-                <TableCell key={cell.id}>
+                <GridCell key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
+                </GridCell>
               ))}
-            </TableRow>
+            </GridRow>
           ))
         ) : (
-          <TableRow>
-            <TableCell colSpan={columns.length} className="h-24 text-center">
-              No results.
-            </TableCell>
-          </TableRow>
+          <GridRow>
+            <GridCell colSpan={columns.length}>
+              <div className="h-24 text-center">No results.</div>
+            </GridCell>
+          </GridRow>
         )}
-      </TableBody>
-    </Table>
+      </GridBody>
+    </Grid>
   );
 }
diff --git a/apps/dashboard/src/components/events/table/columns.tsx b/apps/dashboard/src/components/events/table/columns.tsx
new file mode 100644
index 00000000..0f36da45
--- /dev/null
+++ b/apps/dashboard/src/components/events/table/columns.tsx
@@ -0,0 +1,145 @@
+import { EventIcon } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-icon';
+import { ProjectLink } from '@/components/links';
+import { SerieIcon } from '@/components/report/chart/SerieIcon';
+import { TooltipComplete } from '@/components/tooltip-complete';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import { pushModal } from '@/modals';
+import { formatDateTime, formatTime } from '@/utils/date';
+import { getProfileName } from '@/utils/getters';
+import type { ColumnDef } from '@tanstack/react-table';
+import { isToday } from 'date-fns';
+
+import type { IServiceEvent } from '@openpanel/db';
+
+export function useColumns() {
+  const number = useNumber();
+  const columns: ColumnDef<IServiceEvent>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell({ row }) {
+        const { name, path, duration } = row.original;
+        const renderName = () => {
+          if (name === 'screen_view') {
+            if (path.includes('/')) {
+              return <span className="max-w-md truncate">{path}</span>;
+            }
+
+            return (
+              <>
+                <span className="text-muted-foreground">Screen: </span>
+                <span className="max-w-md truncate">{path}</span>
+              </>
+            );
+          }
+
+          return name.replace(/_/g, ' ');
+        };
+
+        const renderDuration = () => {
+          if (name === 'screen_view') {
+            return (
+              <span className="text-muted-foreground">
+                {number.shortWithUnit(duration / 1000, 'min')}
+              </span>
+            );
+          }
+
+          return null;
+        };
+
+        return (
+          <div className="flex items-center gap-2">
+            <EventIcon
+              size="sm"
+              name={row.original.name}
+              meta={row.original.meta}
+            />
+            <span className="flex gap-2">
+              <button
+                onClick={() => {
+                  pushModal('EventDetails', {
+                    id: row.original.id,
+                  });
+                }}
+                className="font-medium"
+              >
+                {renderName()}
+              </button>
+              {renderDuration()}
+            </span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'country',
+      header: 'Country',
+      cell({ row }) {
+        const { country, city } = row.original;
+        return (
+          <div className="inline-flex min-w-full flex-none items-center gap-2">
+            <SerieIcon name={country} />
+            <span>{city}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'os',
+      header: 'OS',
+      cell({ row }) {
+        const { os } = row.original;
+        return (
+          <div className="flex min-w-full items-center gap-2">
+            <SerieIcon name={os} />
+            <span>{os}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'browser',
+      header: 'Browser',
+      cell({ row }) {
+        const { browser } = row.original;
+        return (
+          <div className="inline-flex min-w-full flex-none items-center gap-2">
+            <SerieIcon name={browser} />
+            <span>{browser}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'profileId',
+      header: 'Profile',
+      cell({ row }) {
+        const { profile } = row.original;
+        if (!profile) {
+          return null;
+        }
+        return (
+          <ProjectLink
+            href={`/profiles/${profile?.id}`}
+            className="max-w-[80px] overflow-hidden text-ellipsis whitespace-nowrap font-medium hover:underline"
+          >
+            {getProfileName(profile)}
+          </ProjectLink>
+        );
+      },
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Created at',
+      cell({ row }) {
+        const date = row.original.createdAt;
+        return (
+          <div>{isToday(date) ? formatTime(date) : formatDateTime(date)}</div>
+        );
+      },
+    },
+  ];
+
+  return columns;
+}
diff --git a/apps/dashboard/src/components/events/table/index.tsx b/apps/dashboard/src/components/events/table/index.tsx
new file mode 100644
index 00000000..875565e2
--- /dev/null
+++ b/apps/dashboard/src/components/events/table/index.tsx
@@ -0,0 +1,71 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { DataTable } from '@/components/data-table';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import { Pagination } from '@/components/pagination';
+import { Button } from '@/components/ui/button';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { GanttChartIcon } from 'lucide-react';
+
+import type { IServiceEvent } from '@openpanel/db';
+
+import { useColumns } from './columns';
+
+type Props =
+  | {
+      query: UseQueryResult<IServiceEvent[]>;
+    }
+  | {
+      query: UseQueryResult<IServiceEvent[]>;
+      cursor: number;
+      setCursor: Dispatch<SetStateAction<number>>;
+    };
+
+export const EventsTable = ({ query, ...props }: Props) => {
+  const columns = useColumns();
+  const { data, isFetching, isLoading } = query;
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+      </div>
+    );
+  }
+
+  if (data?.length === 0) {
+    return (
+      <FullPageEmptyState title="No events here" icon={GanttChartIcon}>
+        <p>Could not find any events</p>
+        {'cursor' in props && props.cursor !== 0 && (
+          <Button
+            className="mt-8"
+            variant="outline"
+            onClick={() => props.setCursor((p) => p - 1)}
+          >
+            Go to previous page
+          </Button>
+        )}
+      </FullPageEmptyState>
+    );
+  }
+
+  return (
+    <>
+      <DataTable data={data ?? []} columns={columns} />
+      {'cursor' in props && (
+        <Pagination
+          className="mt-2"
+          setCursor={props.setCursor}
+          cursor={props.cursor}
+          count={Infinity}
+          take={50}
+          loading={isFetching}
+        />
+      )}
+    </>
+  );
+};
diff --git a/apps/dashboard/src/components/forms/checkbox-item.tsx b/apps/dashboard/src/components/forms/checkbox-item.tsx
index 00cd83b9..3f24f3e8 100644
--- a/apps/dashboard/src/components/forms/checkbox-item.tsx
+++ b/apps/dashboard/src/components/forms/checkbox-item.tsx
@@ -24,7 +24,7 @@ export const CheckboxItem = forwardRef<HTMLButtonElement, Props>(
       <div>
         <label
           className={cn(
-            'hover:bg-def-200 flex items-center gap-4 px-4 py-6 transition-colors',
+            'flex items-center gap-4 px-4 py-6 transition-colors hover:bg-def-200',
             disabled && 'cursor-not-allowed opacity-50'
           )}
           htmlFor={id}
@@ -32,8 +32,8 @@ export const CheckboxItem = forwardRef<HTMLButtonElement, Props>(
           {Icon && <div className="w-6 shrink-0">{<Icon />}</div>}
           <div className="flex-1">
             <div className="font-medium">{label}</div>
-            <div className="text-sm text-muted-foreground">{description}</div>
-            {error && <div className="text-xs text-red-600">{error}</div>}
+            <div className=" text-muted-foreground">{description}</div>
+            {error && <div className="text-sm text-red-600">{error}</div>}
           </div>
           <div>
             <Switch
diff --git a/apps/dashboard/src/components/forms/copy-input.tsx b/apps/dashboard/src/components/forms/copy-input.tsx
index d80c3b0f..c9c7239f 100644
--- a/apps/dashboard/src/components/forms/copy-input.tsx
+++ b/apps/dashboard/src/components/forms/copy-input.tsx
@@ -17,7 +17,7 @@ const CopyInput = ({ label, value, className }: Props) => {
       onClick={() => clipboard(value)}
     >
       {!!label && <Label>{label}</Label>}
-      <div className="flex items-center justify-between rounded border-input bg-def-200 p-2 px-3 font-mono text-sm">
+      <div className="font-mono flex items-center justify-between rounded border-input bg-def-200 p-2 px-3 ">
         {value}
         <CopyIcon size={16} />
       </div>
diff --git a/apps/dashboard/src/components/forms/input-with-label.tsx b/apps/dashboard/src/components/forms/input-with-label.tsx
index 1c698d16..972d9cf2 100644
--- a/apps/dashboard/src/components/forms/input-with-label.tsx
+++ b/apps/dashboard/src/components/forms/input-with-label.tsx
@@ -38,7 +38,7 @@ export const WithLabel = ({
         </Label>
         {error && (
           <Tooltiper asChild content={error}>
-            <div className="flex items-center gap-1 text-sm leading-none text-destructive">
+            <div className="flex items-center gap-1  leading-none text-destructive">
               Issues
               <BanIcon size={14} />
             </div>
diff --git a/apps/dashboard/src/components/forms/tag-input.tsx b/apps/dashboard/src/components/forms/tag-input.tsx
index fdd42f12..727eeeb4 100644
--- a/apps/dashboard/src/components/forms/tag-input.tsx
+++ b/apps/dashboard/src/components/forms/tag-input.tsx
@@ -112,7 +112,7 @@ const TagInput = ({
             data-tag={tag}
             key={tag}
             className={cn(
-              'inline-flex items-center gap-2 rounded bg-def-200 px-2 py-1 text-sm',
+              'inline-flex items-center gap-2 rounded bg-def-200 px-2 py-1 ',
               isMarkedForDeletion &&
                 i === value.length - 1 &&
                 'bg-destructive-foreground ring-2 ring-destructive/50 ring-offset-1',
@@ -136,7 +136,7 @@ const TagInput = ({
       <input
         ref={inputRef}
         placeholder={`${placeholder} ↵`}
-        className="min-w-20 flex-1 py-1 text-sm focus-visible:outline-none"
+        className="min-w-20 flex-1 py-1  focus-visible:outline-none"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
         onKeyDown={handleKeyDown}
diff --git a/apps/dashboard/src/components/fullscreen-toggle.tsx b/apps/dashboard/src/components/fullscreen-toggle.tsx
index b15d6b97..03876c1d 100644
--- a/apps/dashboard/src/components/fullscreen-toggle.tsx
+++ b/apps/dashboard/src/components/fullscreen-toggle.tsx
@@ -7,6 +7,7 @@ import { ChevronLeftIcon, FullscreenIcon } from 'lucide-react';
 import { parseAsBoolean, useQueryState } from 'nuqs';
 import { useDebounce } from 'usehooks-ts';
 
+import { Button } from './ui/button';
 import { Tooltiper } from './ui/tooltip';
 
 type Props = {
@@ -37,18 +38,21 @@ export const Fullscreen = (props: Props) => {
 };
 
 export const FullscreenOpen = () => {
-  const [, setIsFullscreen] = useFullscreen();
+  const [fullscreen, setIsFullscreen] = useFullscreen();
+  if (fullscreen) {
+    return null;
+  }
   return (
     <Tooltiper content="Toggle fullscreen" asChild>
-      <button
-        className="flex items-center gap-2"
+      <Button
+        variant="outline"
+        size="icon"
         onClick={() => {
           setIsFullscreen((p) => !p);
         }}
       >
-        <FullscreenIcon />
-        Realtime
-      </button>
+        <FullscreenIcon className="size-4" />
+      </Button>
     </Tooltiper>
   );
 };
diff --git a/apps/dashboard/src/components/grid-table.tsx b/apps/dashboard/src/components/grid-table.tsx
new file mode 100644
index 00000000..6a6ea926
--- /dev/null
+++ b/apps/dashboard/src/components/grid-table.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+export const Grid: React.FC<
+  React.HTMLAttributes<HTMLDivElement> & { columns: number }
+> = ({ className, columns, children, ...props }) => (
+  <div className={cn('card', className)}>
+    <div className="relative w-full overflow-auto rounded-md">
+      <div
+        className={cn('grid w-full')}
+        style={{
+          gridTemplateColumns: `repeat(${columns}, auto)`,
+          width: 'max-content',
+          minWidth: '100%',
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    </div>
+  </div>
+);
+
+export const GridHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <div className={cn('contents', className)} {...props}>
+    {children}
+  </div>
+);
+
+export const GridBody: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <div
+    className={cn('contents [&>*:last-child]:border-0', className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export const GridCell: React.FC<
+  React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType;
+    colSpan?: number;
+    isHeader?: boolean;
+  }
+> = ({
+  className,
+  children,
+  as: Component = 'div',
+  colSpan,
+  isHeader,
+  ...props
+}) => (
+  <Component
+    className={cn(
+      'flex h-12 items-center whitespace-nowrap px-4 align-middle shadow-[0_0_0_0.5px] shadow-border',
+      isHeader && 'h-10 bg-def-100 font-semibold text-muted-foreground',
+      colSpan && `col-span-${colSpan}`,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </Component>
+);
+
+export const GridRow: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <div
+    className={cn(
+      'contents transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
diff --git a/apps/dashboard/src/components/links.tsx b/apps/dashboard/src/components/links.tsx
new file mode 100644
index 00000000..3965cc1b
--- /dev/null
+++ b/apps/dashboard/src/components/links.tsx
@@ -0,0 +1,23 @@
+import { useAppParams } from '@/hooks/useAppParams';
+import type { LinkProps } from 'next/link';
+import Link from 'next/link';
+
+export function ProjectLink({
+  children,
+  ...props
+}: LinkProps & {
+  children: React.ReactNode;
+  className?: string;
+  title?: string;
+}) {
+  const { organizationSlug, projectId } = useAppParams();
+  if (typeof props.href === 'string') {
+    return (
+      <Link {...props} href={`/${organizationSlug}/${projectId}/${props.href}`}>
+        {children}
+      </Link>
+    );
+  }
+
+  return <p>ProjectLink</p>;
+}
diff --git a/apps/dashboard/src/components/overview/filters/overview-filters-buttons.tsx b/apps/dashboard/src/components/overview/filters/overview-filters-buttons.tsx
index 02a4ee16..1af9f0b5 100644
--- a/apps/dashboard/src/components/overview/filters/overview-filters-buttons.tsx
+++ b/apps/dashboard/src/components/overview/filters/overview-filters-buttons.tsx
@@ -23,7 +23,7 @@ export function OverviewFiltersButtons({
   const [filters, setFilter] = useEventQueryFilters(nuqsOptions);
   if (filters.length === 0 && events.length === 0) return null;
   return (
-    <div className={cn('flex flex-wrap gap-2 px-4 pb-4', className)}>
+    <div className={cn('flex flex-wrap gap-2', className)}>
       {events.map((event) => (
         <Button
           key={event}
@@ -32,7 +32,7 @@ export function OverviewFiltersButtons({
           icon={X}
           onClick={() => setEvents((p) => p.filter((e) => e !== event))}
         >
-          <strong>{event}</strong>
+          <strong className="font-semibold">{event}</strong>
         </Button>
       ))}
       {filters.map((filter) => {
@@ -49,7 +49,7 @@ export function OverviewFiltersButtons({
             onClick={() => setFilter(filter.name, filter.value[0], 'is')}
           >
             <span className="mr-1">{getPropertyLabel(filter.name)} is</span>
-            <strong>{filter.value[0]}</strong>
+            <strong className="font-semibold">{filter.value[0]}</strong>
           </Button>
         );
       })}
diff --git a/apps/dashboard/src/components/overview/live-counter/live-counter.tsx b/apps/dashboard/src/components/overview/live-counter/live-counter.tsx
index 53540dbb..53aba29a 100644
--- a/apps/dashboard/src/components/overview/live-counter/live-counter.tsx
+++ b/apps/dashboard/src/components/overview/live-counter/live-counter.tsx
@@ -7,7 +7,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { useDebounceVal } from '@/hooks/useDebounceVal';
+import { useDebounceState } from '@/hooks/useDebounceState';
 import useWS from '@/hooks/useWS';
 import { cn } from '@/utils/cn';
 import { useQueryClient } from '@tanstack/react-query';
@@ -28,7 +28,7 @@ const FIFTEEN_SECONDS = 1000 * 30;
 
 export default function LiveCounter({ data = 0, projectId }: LiveCounterProps) {
   const client = useQueryClient();
-  const counter = useDebounceVal(data, 1000, {
+  const counter = useDebounceState(data, 1000, {
     maxWait: 5000,
   });
   const lastRefresh = useRef(Date.now());
diff --git a/apps/dashboard/src/components/overview/overview-chart-toggle.tsx b/apps/dashboard/src/components/overview/overview-chart-toggle.tsx
index 66ac3463..fb38a4c6 100644
--- a/apps/dashboard/src/components/overview/overview-chart-toggle.tsx
+++ b/apps/dashboard/src/components/overview/overview-chart-toggle.tsx
@@ -13,7 +13,7 @@ export function OverviewChartToggle({ chartType, setChartType }: Props) {
   return (
     <Button
       size={'icon'}
-      variant={'outline'}
+      variant={'ghost'}
       onClick={() => {
         setChartType((p) => (p === 'linear' ? 'bar' : 'linear'));
       }}
diff --git a/apps/dashboard/src/components/overview/overview-details-button.tsx b/apps/dashboard/src/components/overview/overview-details-button.tsx
index 49ac0444..c0bed8d4 100644
--- a/apps/dashboard/src/components/overview/overview-details-button.tsx
+++ b/apps/dashboard/src/components/overview/overview-details-button.tsx
@@ -3,22 +3,25 @@ import { ScanEyeIcon } from 'lucide-react';
 
 import type { IChartProps } from '@openpanel/validation';
 
+import { Button } from '../ui/button';
+
 type Props = {
   chart: IChartProps;
 };
 
 const OverviewDetailsButton = ({ chart }: Props) => {
   return (
-    <button
-      className="-mb-2 mt-5 flex w-full items-center justify-center gap-2 text-sm font-semibold"
+    <Button
+      size="icon"
+      variant="ghost"
       onClick={() => {
         pushModal('OverviewChartDetails', {
           chart: chart,
         });
       }}
     >
-      <ScanEyeIcon size={18} /> Details
-    </button>
+      <ScanEyeIcon size={18} />
+    </Button>
   );
 };
 
diff --git a/apps/dashboard/src/components/overview/overview-live-histogram.tsx b/apps/dashboard/src/components/overview/overview-live-histogram.tsx
index 538f79e1..36b57e03 100644
--- a/apps/dashboard/src/components/overview/overview-live-histogram.tsx
+++ b/apps/dashboard/src/components/overview/overview-live-histogram.tsx
@@ -131,7 +131,7 @@ interface WrapperProps {
 function Wrapper({ children, count }: WrapperProps) {
   return (
     <div className="flex h-full flex-col">
-      <div className="relative mb-1 text-xs font-medium text-muted-foreground">
+      <div className="relative mb-1 text-sm font-medium text-muted-foreground">
         {count} unique vistors last 30 minutes
       </div>
       <div className="relative flex h-full w-full flex-1 items-end gap-1">
diff --git a/apps/dashboard/src/components/overview/overview-metrics.tsx b/apps/dashboard/src/components/overview/overview-metrics.tsx
index f67219a8..8d85941e 100644
--- a/apps/dashboard/src/components/overview/overview-metrics.tsx
+++ b/apps/dashboard/src/components/overview/overview-metrics.tsx
@@ -192,8 +192,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
 
   return (
     <>
-      <div className="relative -top-0.5 col-span-6 -m-4 mb-0 md:m-0">
-        <div className="card mb-2 grid grid-cols-4">
+      <div className="relative -top-0.5 col-span-6 -m-4 mb-0 mt-0 md:m-0">
+        <div className="card mb-2 grid grid-cols-4 overflow-hidden rounded-md">
           {reports.map((report, index) => (
             <button
               key={index}
diff --git a/apps/dashboard/src/components/overview/overview-top-bots.tsx b/apps/dashboard/src/components/overview/overview-top-bots.tsx
index d6a56d7c..54340636 100644
--- a/apps/dashboard/src/components/overview/overview-top-bots.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-bots.tsx
@@ -32,7 +32,7 @@ const OverviewTopBots = ({ projectId }: Props) => {
     <>
       <div className="-m-4">
         <WidgetTable
-          className="max-w-full [&_td:first-child]:w-full [&_th]:text-xs [&_tr]:text-xs"
+          className="max-w-full [&_td:first-child]:w-full [&_th]:text-sm [&_tr]:text-sm"
           data={data}
           keyExtractor={(item) => item.id}
           columns={[
diff --git a/apps/dashboard/src/components/overview/overview-top-devices.tsx b/apps/dashboard/src/components/overview/overview-top-devices.tsx
index e38dc46d..5a998af6 100644
--- a/apps/dashboard/src/components/overview/overview-top-devices.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-devices.tsx
@@ -11,7 +11,7 @@ import { LazyChart } from '../report/chart/LazyChart';
 import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import OverviewDetailsButton from './overview-details-button';
-import { WidgetButtons, WidgetHead } from './overview-widget';
+import { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
 import { useOverviewOptions } from './useOverviewOptions';
 import { useOverviewWidget } from './useOverviewWidget';
 
@@ -271,10 +271,7 @@ export default function OverviewTopDevices({
     <>
       <Widget className="col-span-6 md:col-span-3">
         <WidgetHead>
-          <div className="title">
-            {widget.title}
-            <OverviewChartToggle {...{ chartType, setChartType }} />
-          </div>
+          <div className="title">{widget.title}</div>
           <WidgetButtons>
             {widgets.map((w) => (
               <button
@@ -312,8 +309,11 @@ export default function OverviewTopDevices({
               }
             }}
           />
-          <OverviewDetailsButton chart={widget.chart} />
         </WidgetBody>
+        <WidgetFooter>
+          <OverviewDetailsButton chart={widget.chart} />
+          <OverviewChartToggle {...{ chartType, setChartType }} />
+        </WidgetFooter>
       </Widget>
     </>
   );
diff --git a/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx b/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
index 0d759176..ac6ba4ae 100644
--- a/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
@@ -10,7 +10,7 @@ import type { IChartType } from '@openpanel/validation';
 import { Widget, WidgetBody } from '../../widget';
 import { OverviewChartToggle } from '../overview-chart-toggle';
 import OverviewDetailsButton from '../overview-details-button';
-import { WidgetButtons, WidgetHead } from '../overview-widget';
+import { WidgetButtons, WidgetFooter, WidgetHead } from '../overview-widget';
 import { useOverviewOptions } from '../useOverviewOptions';
 import { useOverviewWidget } from '../useOverviewWidget';
 
@@ -143,10 +143,7 @@ export default function OverviewTopEvents({
     <>
       <Widget className="col-span-6 md:col-span-3">
         <WidgetHead>
-          <div className="title">
-            {widget.title}
-            <OverviewChartToggle {...{ chartType, setChartType }} />
-          </div>
+          <div className="title">{widget.title}</div>
           <WidgetButtons>
             {widgets
               .filter((item) => item.hide !== true)
@@ -163,8 +160,11 @@ export default function OverviewTopEvents({
         </WidgetHead>
         <WidgetBody>
           <LazyChart hideID {...widget.chart} previous={false} />
-          <OverviewDetailsButton chart={widget.chart} />
         </WidgetBody>
+        <WidgetFooter>
+          <OverviewDetailsButton chart={widget.chart} />
+          <OverviewChartToggle {...{ chartType, setChartType }} />
+        </WidgetFooter>
       </Widget>
     </>
   );
diff --git a/apps/dashboard/src/components/overview/overview-top-geo.tsx b/apps/dashboard/src/components/overview/overview-top-geo.tsx
index 62b43ba2..375da2a7 100644
--- a/apps/dashboard/src/components/overview/overview-top-geo.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-geo.tsx
@@ -13,7 +13,7 @@ import { LazyChart } from '../report/chart/LazyChart';
 import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import OverviewDetailsButton from './overview-details-button';
-import { WidgetButtons, WidgetHead } from './overview-widget';
+import { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
 import { useOverviewOptions } from './useOverviewOptions';
 import { useOverviewWidget } from './useOverviewWidget';
 
@@ -143,10 +143,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
     <>
       <Widget className="col-span-6 md:col-span-3">
         <WidgetHead>
-          <div className="title">
-            {widget.title}
-            <OverviewChartToggle {...{ chartType, setChartType }} />
-          </div>
+          <div className="title">{widget.title}</div>
           <WidgetButtons>
             {widgets.map((w) => (
               <button
@@ -180,8 +177,11 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
               }
             }}
           />
-          <OverviewDetailsButton chart={widget.chart} />
         </WidgetBody>
+        <WidgetFooter>
+          <OverviewDetailsButton chart={widget.chart} />
+          <OverviewChartToggle {...{ chartType, setChartType }} />
+        </WidgetFooter>
       </Widget>
       <Widget className="col-span-6 md:col-span-3">
         <WidgetHead>
diff --git a/apps/dashboard/src/components/overview/overview-top-pages.tsx b/apps/dashboard/src/components/overview/overview-top-pages.tsx
index d515a177..53d0ad6f 100644
--- a/apps/dashboard/src/components/overview/overview-top-pages.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-pages.tsx
@@ -14,7 +14,7 @@ import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import OverviewDetailsButton from './overview-details-button';
 import OverviewTopBots from './overview-top-bots';
-import { WidgetButtons, WidgetHead } from './overview-widget';
+import { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
 import { useOverviewOptions } from './useOverviewOptions';
 import { useOverviewWidget } from './useOverviewWidget';
 
@@ -154,10 +154,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
     <>
       <Widget className="col-span-6 md:col-span-3">
         <WidgetHead>
-          <div className="title">
-            {widget.title}
-            <OverviewChartToggle {...{ chartType, setChartType }} />
-          </div>
+          <div className="title">{widget.title}</div>
           <WidgetButtons>
             {widgets.map((w) => (
               <button
@@ -196,8 +193,13 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
               ]}
             />
           )}
-          {widget.chart?.name && <OverviewDetailsButton chart={widget.chart} />}
         </WidgetBody>
+        {widget.chart?.name && (
+          <WidgetFooter>
+            <OverviewDetailsButton chart={widget.chart} />
+            <OverviewChartToggle {...{ chartType, setChartType }} />
+          </WidgetFooter>
+        )}
       </Widget>
     </>
   );
diff --git a/apps/dashboard/src/components/overview/overview-top-sources.tsx b/apps/dashboard/src/components/overview/overview-top-sources.tsx
index 1ddc8044..58dd3851 100644
--- a/apps/dashboard/src/components/overview/overview-top-sources.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-sources.tsx
@@ -2,9 +2,7 @@
 
 import { useState } from 'react';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
-import { pushModal } from '@/modals';
 import { cn } from '@/utils/cn';
-import { ScanEyeIcon } from 'lucide-react';
 
 import type { IChartType } from '@openpanel/validation';
 
@@ -12,7 +10,7 @@ import { LazyChart } from '../report/chart/LazyChart';
 import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import OverviewDetailsButton from './overview-details-button';
-import { WidgetButtons, WidgetHead } from './overview-widget';
+import { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
 import { useOverviewOptions } from './useOverviewOptions';
 import { useOverviewWidget } from './useOverviewWidget';
 
@@ -282,10 +280,7 @@ export default function OverviewTopSources({
     <>
       <Widget className="col-span-6 md:col-span-3">
         <WidgetHead>
-          <div className="title">
-            {widget.title}
-            <OverviewChartToggle {...{ chartType, setChartType }} />
-          </div>
+          <div className="title">{widget.title}</div>
 
           <WidgetButtons>
             {widgets.map((w) => (
@@ -335,8 +330,11 @@ export default function OverviewTopSources({
               }
             }}
           />
-          <OverviewDetailsButton chart={widget.chart} />
         </WidgetBody>
+        <WidgetFooter>
+          <OverviewDetailsButton chart={widget.chart} />
+          <OverviewChartToggle {...{ chartType, setChartType }} />
+        </WidgetFooter>
       </Widget>
     </>
   );
diff --git a/apps/dashboard/src/components/overview/overview-widget.tsx b/apps/dashboard/src/components/overview/overview-widget.tsx
index 8e981477..c768d934 100644
--- a/apps/dashboard/src/components/overview/overview-widget.tsx
+++ b/apps/dashboard/src/components/overview/overview-widget.tsx
@@ -85,7 +85,7 @@ export function WidgetButtons({
     <div
       ref={container}
       className={cn(
-        '-mb-px -mt-2 flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b-2 [&_button.active]:border-black [&_button.active]:opacity-100 dark:[&_button.active]:border-white [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
+        '-mb-px -mt-2 flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b-2 [&_button.active]:border-black [&_button.active]:opacity-100 dark:[&_button.active]:border-white [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-sm [&_button]:opacity-50',
         className
       )}
       style={{ gap }}
@@ -93,7 +93,12 @@ export function WidgetButtons({
     >
       {Children.map(children, (child, index) => {
         return (
-          <div className={cn('flex', slice < index ? hidden : 'opacity-100')}>
+          <div
+            className={cn(
+              'flex [&_button]:leading-normal',
+              slice < index ? hidden : 'opacity-100'
+            )}
+          >
             {child}
           </div>
         );
@@ -123,3 +128,21 @@ export function WidgetButtons({
     </div>
   );
 }
+
+export function WidgetFooter({
+  className,
+  children,
+  ...props
+}: WidgetHeadProps) {
+  return (
+    <div
+      className={cn(
+        'flex rounded-b-md border-t bg-def-100 p-2  py-1',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/page-tabs.tsx b/apps/dashboard/src/components/page-tabs.tsx
new file mode 100644
index 00000000..ea947d9e
--- /dev/null
+++ b/apps/dashboard/src/components/page-tabs.tsx
@@ -0,0 +1,62 @@
+import { cn } from '@/utils/cn';
+import Link from 'next/link';
+
+export function PageTabs({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn('overflow-x-auto', className)}>
+      <div className="flex gap-4 whitespace-nowrap text-3xl font-semibold">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function PageTabsLink({
+  href,
+  children,
+  isActive = false,
+}: {
+  href: string;
+  children: React.ReactNode;
+  isActive?: boolean;
+}) {
+  return (
+    <Link
+      className={cn(
+        'inline-block opacity-100 transition-transform hover:translate-y-[-1px]',
+        isActive ? 'opacity-100' : 'opacity-50'
+      )}
+      href={href}
+    >
+      {children}
+    </Link>
+  );
+}
+
+export function PageTabsItem({
+  onClick,
+  children,
+  isActive = false,
+}: {
+  onClick: () => void;
+  children: React.ReactNode;
+  isActive?: boolean;
+}) {
+  return (
+    <button
+      className={cn(
+        'inline-block opacity-100 transition-transform hover:translate-y-[-1px]',
+        isActive ? 'opacity-100' : 'opacity-50'
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/apps/dashboard/src/components/pagination.tsx b/apps/dashboard/src/components/pagination.tsx
index ffaec39d..efba9a44 100644
--- a/apps/dashboard/src/components/pagination.tsx
+++ b/apps/dashboard/src/components/pagination.tsx
@@ -77,17 +77,6 @@ export function Pagination({
         disabled={isNextDisabled}
         icon={ChevronRightIcon}
       />
-
-      {size === 'base' && (
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => setCursor(lastCursor)}
-          disabled={isNextDisabled}
-          className="max-sm:hidden"
-          icon={ChevronsRightIcon}
-        />
-      )}
     </div>
   );
 }
diff --git a/apps/dashboard/src/components/profiles/profile-avatar.tsx b/apps/dashboard/src/components/profiles/profile-avatar.tsx
index 63bbba0e..125c0ace 100644
--- a/apps/dashboard/src/components/profiles/profile-avatar.tsx
+++ b/apps/dashboard/src/components/profiles/profile-avatar.tsx
@@ -43,7 +43,7 @@ export function ProfileAvatar({
           size === 'lg'
             ? 'text-lg'
             : size === 'sm'
-              ? 'text-xs'
+              ? 'text-sm'
               : size === 'xs'
                 ? 'text-[8px]'
                 : 'text-base',
diff --git a/apps/dashboard/src/components/profiles/table/columns.tsx b/apps/dashboard/src/components/profiles/table/columns.tsx
new file mode 100644
index 00000000..d14aa77c
--- /dev/null
+++ b/apps/dashboard/src/components/profiles/table/columns.tsx
@@ -0,0 +1,102 @@
+import { ProjectLink } from '@/components/links';
+import { SerieIcon } from '@/components/report/chart/SerieIcon';
+import { Tooltiper } from '@/components/ui/tooltip';
+import { formatDateTime, formatTime } from '@/utils/date';
+import { getProfileName } from '@/utils/getters';
+import type { ColumnDef } from '@tanstack/react-table';
+import { isToday } from 'date-fns';
+
+import type { IServiceProfile } from '@openpanel/db';
+
+import { ProfileAvatar } from '../profile-avatar';
+
+export function useColumns(type?: 'profiles' | 'power-users') {
+  const columns: ColumnDef<IServiceProfile>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => {
+        const profile = row.original;
+        return (
+          <ProjectLink
+            href={`/profiles/${profile.id}`}
+            className="flex items-center gap-2 font-medium"
+            title={getProfileName(profile, false)}
+          >
+            <ProfileAvatar size="sm" {...profile} />
+            {getProfileName(profile)}
+          </ProjectLink>
+        );
+      },
+    },
+    {
+      accessorKey: 'country',
+      header: 'Country',
+      cell({ row }) {
+        const { country, city } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={country} />
+            <span className="truncate">{city}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'os',
+      header: 'OS',
+      cell({ row }) {
+        const { os } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={os} />
+            <span className="truncate">{os}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'browser',
+      header: 'Browser',
+      cell({ row }) {
+        const { browser } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={browser} />
+            <span className="truncate">{browser}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Last seen',
+      cell: ({ row }) => {
+        const profile = row.original;
+        return (
+          <Tooltiper asChild content={formatDateTime(profile.createdAt)}>
+            <div className="text-muted-foreground">
+              {isToday(profile.createdAt)
+                ? formatTime(profile.createdAt)
+                : formatDateTime(profile.createdAt)}
+            </div>
+          </Tooltiper>
+        );
+      },
+    },
+  ];
+
+  if (type === 'power-users') {
+    columns.unshift({
+      accessorKey: 'count',
+      header: 'Events',
+      cell: ({ row }) => {
+        const profile = row.original;
+        // @ts-expect-error
+        return <div>{profile.count}</div>;
+      },
+    });
+  }
+
+  return columns;
+}
diff --git a/apps/dashboard/src/components/profiles/table/index.tsx b/apps/dashboard/src/components/profiles/table/index.tsx
new file mode 100644
index 00000000..e16a4f5e
--- /dev/null
+++ b/apps/dashboard/src/components/profiles/table/index.tsx
@@ -0,0 +1,72 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { DataTable } from '@/components/data-table';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import { Pagination } from '@/components/pagination';
+import { Button } from '@/components/ui/button';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { GanttChartIcon } from 'lucide-react';
+
+import type { IServiceProfile } from '@openpanel/db';
+
+import { useColumns } from './columns';
+
+type CommonProps = {
+  type?: 'profiles' | 'power-users';
+  query: UseQueryResult<IServiceProfile[]>;
+};
+type Props =
+  | CommonProps
+  | (CommonProps & {
+      cursor: number;
+      setCursor: Dispatch<SetStateAction<number>>;
+    });
+
+export const ProfilesTable = ({ type, query, ...props }: Props) => {
+  const columns = useColumns(type);
+  const { data, isFetching, isLoading } = query;
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+      </div>
+    );
+  }
+
+  if (data?.length === 0) {
+    return (
+      <FullPageEmptyState title="No profiles here" icon={GanttChartIcon}>
+        <p>Could not find any profiles</p>
+        {'cursor' in props && props.cursor !== 0 && (
+          <Button
+            className="mt-8"
+            variant="outline"
+            onClick={() => props.setCursor((p) => p - 1)}
+          >
+            Go to previous page
+          </Button>
+        )}
+      </FullPageEmptyState>
+    );
+  }
+
+  return (
+    <>
+      <DataTable data={data ?? []} columns={columns} />
+      {'cursor' in props && (
+        <Pagination
+          className="mt-2"
+          setCursor={props.setCursor}
+          cursor={props.cursor}
+          count={Infinity}
+          take={50}
+          loading={isFetching}
+        />
+      )}
+    </>
+  );
+};
diff --git a/apps/dashboard/src/components/projects/project-card.tsx b/apps/dashboard/src/components/projects/project-card.tsx
index 11715e43..2cbce8e9 100644
--- a/apps/dashboard/src/components/projects/project-card.tsx
+++ b/apps/dashboard/src/components/projects/project-card.tsx
@@ -23,7 +23,7 @@ function ProjectCard({ id, name, organizationSlug }: IServiceProject) {
           <ProjectChart id={id} />
         </Suspense>
       </div>
-      <div className="flex justify-end gap-4 text-sm">
+      <div className="flex justify-end gap-4 ">
         <Suspense>
           <ProjectMetrics id={id} />
         </Suspense>
diff --git a/apps/dashboard/src/components/report/PreviousDiffIndicator.tsx b/apps/dashboard/src/components/report/PreviousDiffIndicator.tsx
index b10288b7..3784a020 100644
--- a/apps/dashboard/src/components/report/PreviousDiffIndicator.tsx
+++ b/apps/dashboard/src/components/report/PreviousDiffIndicator.tsx
@@ -62,10 +62,10 @@ export function PreviousDiffIndicator({
 
   const renderIcon = () => {
     if (state === 'positive') {
-      return <ArrowUpIcon strokeWidth={3} size={12} color="#000" />;
+      return <ArrowUpIcon strokeWidth={3} size={10} color="#000" />;
     }
     if (state === 'negative') {
-      return <ArrowDownIcon strokeWidth={3} size={12} color="#000" />;
+      return <ArrowDownIcon strokeWidth={3} size={10} color="#000" />;
     }
     return null;
   };
@@ -74,7 +74,7 @@ export function PreviousDiffIndicator({
     <>
       <div
         className={cn(
-          'flex items-center gap-1 font-medium',
+          'font-mono flex items-center gap-1 font-medium',
           size === 'lg' && 'gap-2',
           className
         )}
diff --git a/apps/dashboard/src/components/report/chart/MetricCard.tsx b/apps/dashboard/src/components/report/chart/MetricCard.tsx
index a24a9e04..f8f8b1c5 100644
--- a/apps/dashboard/src/components/report/chart/MetricCard.tsx
+++ b/apps/dashboard/src/components/report/chart/MetricCard.tsx
@@ -89,21 +89,21 @@ export function MetricCard({
           )}
         </AutoSizer>
       </div>
-      <div className="relative">
+      <div className="col relative gap-2">
         <div className="flex items-center justify-between gap-2">
-          <div className="flex min-w-0 items-center gap-2 text-left font-semibold">
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
+          <div className="flex min-w-0 items-center gap-2 text-left">
+            <span className="truncate text-muted-foreground">
               <SerieName name={serie.names} />
             </span>
           </div>
         </div>
         <div className="flex items-end justify-between">
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
+          <div className="font-mono truncate text-3xl font-bold">
             {renderValue(serie.metrics[metric], 'ml-1 font-light text-xl')}
           </div>
           <PreviousDiffIndicator
             {...previous}
-            className="text-xs text-muted-foreground"
+            className="text-sm text-muted-foreground"
           />
         </div>
       </div>
diff --git a/apps/dashboard/src/components/report/chart/ReportBarChart.tsx b/apps/dashboard/src/components/report/chart/ReportBarChart.tsx
index 9922e6b7..63cf8e16 100644
--- a/apps/dashboard/src/components/report/chart/ReportBarChart.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportBarChart.tsx
@@ -37,7 +37,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
   return (
     <div
       className={cn(
-        'flex flex-col text-xs',
+        'flex flex-col text-sm',
         editMode ? 'card gap-2 p-4 text-base' : '-m-3 gap-1'
       )}
     >
@@ -60,9 +60,9 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
                   : {})}
               >
                 <div
-                  className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
+                  className="absolute bottom-0.5 left-1 right-1 top-0.5 rounded bg-def-200"
                   style={{
-                    width: `${(serie.metrics.sum / maxCount) * 100}%`,
+                    width: `calc(${(serie.metrics.sum / maxCount) * 100}% - 8px)`,
                   }}
                 />
                 <div className="relative z-10 flex w-full flex-1 items-center gap-4 overflow-hidden px-3 py-2">
@@ -70,7 +70,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
                     <SerieIcon name={serie.names[0]} />
                     <SerieName name={serie.names} />
                   </div>
-                  <div className="flex flex-shrink-0 items-center justify-end gap-4">
+                  <div className="font-mono flex flex-shrink-0 items-center justify-end gap-4">
                     <PreviousDiffIndicator
                       {...serie.metrics.previous?.[metric]}
                     />
diff --git a/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx b/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
index fc0b31b9..012159a1 100644
--- a/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
@@ -42,7 +42,7 @@ export function ReportChartTooltip({
   const hidden = sorted.slice(limit);
 
   return (
-    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3 text-sm shadow-xl">
+    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3  shadow-xl">
       {visible.map((item, index) => {
         // If we have a <Cell /> component, payload can be nested
         const payload = item.payload.payload ?? item.payload;
@@ -65,20 +65,22 @@ export function ReportChartTooltip({
                 className="w-[3px] rounded-full"
                 style={{ background: data.color }}
               />
-              <div className="flex flex-1 flex-col">
+              <div className="col flex-1 gap-1">
                 <div className="flex items-center gap-1">
                   <SerieIcon name={data.names} />
                   <SerieName name={data.names} />
                 </div>
-                <div className="flex justify-between gap-8">
-                  <div>{number.formatWithUnit(data.count, unit)}</div>
-
-                  <div className="flex gap-1">
-                    <PreviousDiffIndicator {...data.previous}>
-                      {!!data.previous &&
-                        `(${number.formatWithUnit(data.previous.value, unit)})`}
-                    </PreviousDiffIndicator>
+                <div className="font-mono flex justify-between gap-8 font-medium">
+                  <div className="row gap-1">
+                    {number.formatWithUnit(data.count, unit)}
+                    {!!data.previous && (
+                      <span className="text-muted-foreground">
+                        ({number.formatWithUnit(data.previous.value, unit)})
+                      </span>
+                    )}
                   </div>
+
+                  <PreviousDiffIndicator {...data.previous} />
                 </div>
               </div>
             </div>
diff --git a/apps/dashboard/src/components/report/chart/ReportLineChart.tsx b/apps/dashboard/src/components/report/chart/ReportLineChart.tsx
index b83d79ea..ece9e258 100644
--- a/apps/dashboard/src/components/report/chart/ReportLineChart.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportLineChart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
 import { useNumber } from '@/hooks/useNumerFormatter';
 import { useRechartDataModel } from '@/hooks/useRechartDataModel';
@@ -10,24 +10,19 @@ import type { IChartData } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { getChartColor } from '@/utils/theme';
 import { isSameDay, isSameHour, isSameMonth } from 'date-fns';
-import { SplineIcon } from 'lucide-react';
-import { last, pathOr } from 'ramda';
+import { last } from 'ramda';
 import {
   Area,
   CartesianGrid,
   ComposedChart,
   Legend,
   Line,
-  LineChart,
   ReferenceLine,
   Tooltip,
   XAxis,
   YAxis,
 } from 'recharts';
 
-import type { IServiceReference } from '@openpanel/db';
-import type { IChartLineType, IInterval } from '@openpanel/validation';
-
 import { getYAxisWidth } from './chart-utils';
 import { useChartContext } from './ChartProvider';
 import { ReportChartTooltip } from './ReportChartTooltip';
diff --git a/apps/dashboard/src/components/report/chart/index.tsx b/apps/dashboard/src/components/report/chart/index.tsx
index 7032cae7..2daac349 100644
--- a/apps/dashboard/src/components/report/chart/index.tsx
+++ b/apps/dashboard/src/components/report/chart/index.tsx
@@ -48,6 +48,7 @@ interface ChartRootShortcutProps {
   chartType?: IChartProps['chartType'];
   interval?: IChartProps['interval'];
   events: IChartProps['events'];
+  breakdowns?: IChartProps['breakdowns'];
 }
 
 export const ChartRootShortcut = ({
@@ -57,12 +58,13 @@ export const ChartRootShortcut = ({
   chartType = 'linear',
   interval = 'day',
   events,
+  breakdowns,
 }: ChartRootShortcutProps) => {
   return (
     <ChartRoot
       projectId={projectId}
       range={range}
-      breakdowns={[]}
+      breakdowns={breakdowns ?? []}
       previous={previous}
       chartType={chartType}
       interval={interval}
diff --git a/apps/dashboard/src/components/report/funnel/Funnel.old.tsx b/apps/dashboard/src/components/report/funnel/Funnel.old.tsx
index 736f42fb..f4abc929 100644
--- a/apps/dashboard/src/components/report/funnel/Funnel.old.tsx
+++ b/apps/dashboard/src/components/report/funnel/Funnel.old.tsx
@@ -132,7 +132,7 @@ export function FunnelSteps({
                 </div>
                 {finalStep ? (
                   <div className={cn('flex flex-col items-center p-4')}>
-                    <div className="text-xs font-medium uppercase">
+                    <div className="text-sm font-medium uppercase">
                       Conversion
                     </div>
                     <div
@@ -143,13 +143,13 @@ export function FunnelSteps({
                     >
                       {round(step.percent, 1)}%
                     </div>
-                    <div className="mt-0 text-sm font-medium uppercase text-muted-foreground">
+                    <div className="mt-0  font-medium uppercase text-muted-foreground">
                       Converted {step.current} of {totalSessions} sessions
                     </div>
                   </div>
                 ) : (
                   <div className={cn('flex flex-col items-center p-4')}>
-                    <div className="text-xs font-medium uppercase">Dropoff</div>
+                    <div className="text-sm font-medium uppercase">Dropoff</div>
                     <div
                       className={cn(
                         'text-3xl font-bold uppercase',
@@ -158,7 +158,7 @@ export function FunnelSteps({
                     >
                       {round(step.dropoff.percent, 1)}%
                     </div>
-                    <div className="mt-0 text-sm font-medium uppercase text-muted-foreground">
+                    <div className="mt-0  font-medium uppercase text-muted-foreground">
                       Lost {step.dropoff.count} sessions
                     </div>
                   </div>
diff --git a/apps/dashboard/src/components/report/funnel/Funnel.tsx b/apps/dashboard/src/components/report/funnel/Funnel.tsx
index a326ef5a..834d5d5c 100644
--- a/apps/dashboard/src/components/report/funnel/Funnel.tsx
+++ b/apps/dashboard/src/components/report/funnel/Funnel.tsx
@@ -1,17 +1,14 @@
 'use client';
 
 import { ColorSquare } from '@/components/color-square';
-import { AutoSizer } from '@/components/react-virtualized-auto-sizer';
 import { TooltipComplete } from '@/components/tooltip-complete';
 import { Progress } from '@/components/ui/progress';
 import { Widget, WidgetBody } from '@/components/widget';
 import type { RouterOutputs } from '@/trpc/client';
 import { cn } from '@/utils/cn';
-import { round } from '@/utils/math';
 import { getChartColor } from '@/utils/theme';
-import { AlertCircleIcon, TrendingUp } from 'lucide-react';
+import { AlertCircleIcon } from 'lucide-react';
 import { last } from 'ramda';
-import { Cell, Pie, PieChart } from 'recharts';
 
 import { getPreviousMetric } from '@openpanel/common';
 import { alphabetIds } from '@openpanel/constants';
@@ -40,7 +37,7 @@ function InsightCard({
 }) {
   return (
     <div className="flex flex-col rounded-lg border border-border p-4 py-3">
-      <span className="text-sm">{title}</span>
+      <span className="">{title}</span>
       <div className="whitespace-nowrap text-lg">{children}</div>
     </div>
   );
diff --git a/apps/dashboard/src/components/report/sidebar/EventPropertiesCombobox.tsx b/apps/dashboard/src/components/report/sidebar/EventPropertiesCombobox.tsx
index 8d8ecbd4..52e5f5a8 100644
--- a/apps/dashboard/src/components/report/sidebar/EventPropertiesCombobox.tsx
+++ b/apps/dashboard/src/components/report/sidebar/EventPropertiesCombobox.tsx
@@ -54,7 +54,7 @@ export function EventPropertiesCombobox({
     >
       <button
         className={cn(
-          'flex items-center gap-1 rounded-md border border-border p-1 px-2 text-xs font-medium leading-none',
+          'flex items-center gap-1 rounded-md border border-border p-1 px-2 text-sm font-medium leading-none',
           !event.property && 'border-destructive text-destructive'
         )}
       >
diff --git a/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx b/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
index 42c2e9a3..0743f4d2 100644
--- a/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
+++ b/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
@@ -106,7 +106,7 @@ export function ReportEvents() {
               </div>
 
               {/* Segment and Filter buttons */}
-              <div className="flex gap-2 p-2 pt-0 text-sm">
+              <div className="flex gap-2 p-2 pt-0 ">
                 <DropdownMenuComposed
                   onChange={(segment) => {
                     dispatch(
@@ -148,7 +148,7 @@ export function ReportEvents() {
                   ]}
                   label="Segment"
                 >
-                  <button className="flex items-center gap-1 rounded-md border border-border bg-card p-1 px-2 text-xs font-medium leading-none">
+                  <button className="flex items-center gap-1 rounded-md border border-border bg-card p-1 px-2 text-sm font-medium leading-none">
                     {event.segment === 'user' ? (
                       <>
                         <Users size={12} /> Unique users
@@ -216,7 +216,7 @@ export function ReportEvents() {
         />
       </div>
       <label
-        className="mt-4 flex cursor-pointer select-none items-center gap-2 text-sm font-medium"
+        className="mt-4 flex cursor-pointer select-none items-center gap-2  font-medium"
         htmlFor="previous"
       >
         <Checkbox
diff --git a/apps/dashboard/src/components/report/sidebar/filters/FilterItem.tsx b/apps/dashboard/src/components/report/sidebar/filters/FilterItem.tsx
index bfa7de03..12eb65b1 100644
--- a/apps/dashboard/src/components/report/sidebar/filters/FilterItem.tsx
+++ b/apps/dashboard/src/components/report/sidebar/filters/FilterItem.tsx
@@ -103,7 +103,7 @@ export function FilterItem({ filter, event }: FilterProps) {
         <ColorSquare className="bg-emerald-500">
           <SlidersHorizontal size={10} />
         </ColorSquare>
-        <div className="flex flex-1 text-sm">
+        <div className="flex flex-1 ">
           <RenderDots truncate>{filter.name}</RenderDots>
         </div>
         <Button variant="ghost" size="sm" onClick={removeFilter}>
diff --git a/apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx b/apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
index ba7c62c8..0ff0dead 100644
--- a/apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
+++ b/apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
@@ -63,7 +63,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
         );
       }}
     >
-      <button className="flex items-center gap-1 rounded-md border border-border bg-card p-1 px-2 text-xs font-medium leading-none">
+      <button className="flex items-center gap-1 rounded-md border border-border bg-card p-1 px-2 text-sm font-medium leading-none">
         <FilterIcon size={12} /> Add filter
       </button>
     </Combobox>
diff --git a/apps/dashboard/src/components/settings-toggle.tsx b/apps/dashboard/src/components/settings-toggle.tsx
new file mode 100644
index 00000000..2a49c56d
--- /dev/null
+++ b/apps/dashboard/src/components/settings-toggle.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { CheckIcon, MoreHorizontalIcon, PlusIcon } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { ProjectLink } from './links';
+
+interface Props {
+  className?: string;
+}
+
+export default function SettingsToggle({ className }: Props) {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" className={className}>
+          <MoreHorizontalIcon className="h-[1.2rem] w-[1.2rem]" />
+          <span className="sr-only">Toggle settings</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="w-56">
+        <DropdownMenuItem asChild>
+          <ProjectLink href="/reports">
+            Create report
+            <DropdownMenuShortcut>
+              <PlusIcon className="h-4 w-4" />
+            </DropdownMenuShortcut>
+          </ProjectLink>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Settings</DropdownMenuLabel>
+        <DropdownMenuItem asChild>
+          <ProjectLink href="/settings/organization">Organization</ProjectLink>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <ProjectLink href="/settings/projects">Projects</ProjectLink>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <ProjectLink href="/settings/profile">Your profile</ProjectLink>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <ProjectLink href="/settings/references">References</ProjectLink>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="flex w-full items-center justify-between">
+            Theme
+            <DropdownMenuShortcut>{theme}</DropdownMenuShortcut>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="p-0">
+            {['system', 'light', 'dark'].map((themeOption) => (
+              <DropdownMenuItem
+                key={themeOption}
+                onClick={() => setTheme(themeOption)}
+                className="capitalize"
+              >
+                {themeOption}
+                {theme === themeOption && (
+                  <CheckIcon className="ml-2 h-4 w-4" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="text-red-600">Logout</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/dashboard/src/components/settings/invites/columns.tsx b/apps/dashboard/src/components/settings/invites/columns.tsx
new file mode 100644
index 00000000..10fb374c
--- /dev/null
+++ b/apps/dashboard/src/components/settings/invites/columns.tsx
@@ -0,0 +1,112 @@
+import { TooltipComplete } from '@/components/tooltip-complete';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { api } from '@/trpc/client';
+import type { ColumnDef, Row } from '@tanstack/react-table';
+import { MoreHorizontalIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { pathOr } from 'ramda';
+import { toast } from 'sonner';
+
+import type { IServiceInvite, IServiceProject } from '@openpanel/db';
+
+export function useColumns(
+  projects: IServiceProject[]
+): ColumnDef<IServiceInvite>[] {
+  return [
+    {
+      accessorKey: 'email',
+      header: 'Mail',
+      cell: ({ row }) => (
+        <div className="font-medium">{row.original.email}</div>
+      ),
+    },
+    {
+      accessorKey: 'role',
+      header: 'Role',
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Created',
+      cell: ({ row }) => (
+        <TooltipComplete
+          content={new Date(row.original.createdAt).toLocaleString()}
+        >
+          {new Date(row.original.createdAt).toLocaleDateString()}
+        </TooltipComplete>
+      ),
+    },
+    {
+      accessorKey: 'access',
+      header: 'Access',
+      cell: ({ row }) => {
+        const access = pathOr<string[]>([], ['meta', 'access'], row.original);
+        return (
+          <>
+            {access.map((id) => {
+              const project = projects.find((p) => p.id === id);
+              if (!project) {
+                return (
+                  <Badge key={id} className="mr-1">
+                    Unknown
+                  </Badge>
+                );
+              }
+              return (
+                <Badge key={id} color="blue" className="mr-1">
+                  {project.name}
+                </Badge>
+              );
+            })}
+            {access.length === 0 && (
+              <Badge variant={'secondary'}>All projects</Badge>
+            )}
+          </>
+        );
+      },
+    },
+    {
+      id: 'actions',
+      cell: ({ row }) => {
+        return <ActionCell row={row} />;
+      },
+    },
+  ];
+}
+
+function ActionCell({ row }: { row: Row<IServiceInvite> }) {
+  const router = useRouter();
+  const revoke = api.organization.revokeInvite.useMutation({
+    onSuccess() {
+      toast.success(`Invite for ${row.original.email} revoked`);
+      router.refresh();
+    },
+    onError() {
+      toast.error(`Failed to revoke invite for ${row.original.email}`);
+    },
+  });
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button icon={MoreHorizontalIcon} size="icon" variant={'outline'} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem
+          className="text-destructive"
+          onClick={() => {
+            revoke.mutate({ memberId: row.original.id });
+          }}
+        >
+          Revoke invite
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/dashboard/src/components/settings/invites/index.tsx b/apps/dashboard/src/components/settings/invites/index.tsx
new file mode 100644
index 00000000..d7d35cf5
--- /dev/null
+++ b/apps/dashboard/src/components/settings/invites/index.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { DataTable } from '@/components/data-table';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import { GanttChartIcon } from 'lucide-react';
+
+import type { IServiceInvite, IServiceProject } from '@openpanel/db';
+
+import { useColumns } from './columns';
+
+type CommonProps = {
+  projects: IServiceProject[];
+  data: IServiceInvite[];
+};
+
+type Props = CommonProps;
+
+export const InvitesTable = ({ projects, data }: Props) => {
+  const columns = useColumns(projects);
+
+  if (!data) {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+      </div>
+    );
+  }
+
+  if (data?.length === 0) {
+    return (
+      <FullPageEmptyState title="No members here" icon={GanttChartIcon}>
+        <p>Could not find any members</p>
+      </FullPageEmptyState>
+    );
+  }
+
+  return (
+    <>
+      <DataTable data={data ?? []} columns={columns} />
+    </>
+  );
+};
diff --git a/apps/dashboard/src/components/settings/members/columns.tsx b/apps/dashboard/src/components/settings/members/columns.tsx
new file mode 100644
index 00000000..23ff9cac
--- /dev/null
+++ b/apps/dashboard/src/components/settings/members/columns.tsx
@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { TooltipComplete } from '@/components/tooltip-complete';
+import { Button } from '@/components/ui/button';
+import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { api } from '@/trpc/client';
+import type { ColumnDef, Row } from '@tanstack/react-table';
+import { MoreHorizontalIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+
+import type { IServiceMember, IServiceProject } from '@openpanel/db';
+
+export function useColumns(projects: IServiceProject[]) {
+  const columns: ColumnDef<IServiceMember>[] = [
+    {
+      accessorKey: 'user',
+      header: 'Name',
+      cell: ({ row }) => {
+        const user = row.original.user;
+        if (!user) return null;
+        return [user.firstName, user.lastName].filter(Boolean).join(' ');
+      },
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+      cell: ({ row }) => {
+        const user = row.original.user;
+        if (!user) return null;
+        return <div className="font-medium">{user.email}</div>;
+      },
+    },
+    {
+      accessorKey: 'role',
+      header: 'Role',
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Created',
+      cell: ({ row }) => (
+        <TooltipComplete
+          content={new Date(row.original.createdAt).toLocaleString()}
+        >
+          {new Date(row.original.createdAt).toLocaleDateString()}
+        </TooltipComplete>
+      ),
+    },
+    {
+      accessorKey: 'access',
+      header: 'Access',
+      cell: ({ row }) => {
+        return <AccessCell row={row} projects={projects} />;
+      },
+    },
+    {
+      id: 'actions',
+      cell: ({ row }) => {
+        return <ActionsCell row={row} />;
+      },
+    },
+  ];
+
+  return columns;
+}
+
+function AccessCell({
+  row,
+  projects,
+}: {
+  row: Row<IServiceMember>;
+  projects: IServiceProject[];
+}) {
+  const [access, setAccess] = useState<string[]>(
+    row.original.access.map((item) => item.projectId)
+  );
+  const mutation = api.organization.updateMemberAccess.useMutation();
+
+  return (
+    <ComboboxAdvanced
+      placeholder="Restrict access to projects"
+      value={access}
+      onChange={(newAccess) => {
+        setAccess(newAccess);
+        mutation.mutate({
+          userId: row.original.user!.id,
+          organizationSlug: row.original.organizationId,
+          access: newAccess as string[],
+        });
+      }}
+      items={projects.map((item) => ({
+        label: item.name,
+        value: item.id,
+      }))}
+    />
+  );
+}
+
+function ActionsCell({ row }: { row: Row<IServiceMember> }) {
+  const router = useRouter();
+  const revoke = api.organization.removeMember.useMutation({
+    onSuccess() {
+      toast.success(
+        `${row.original.user?.firstName} has been removed from the organization`
+      );
+      router.refresh();
+    },
+    onError() {
+      toast.error(
+        `Failed to remove ${row.original.user?.firstName} from the organization`
+      );
+    },
+  });
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button icon={MoreHorizontalIcon} size="icon" variant={'outline'} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem
+          className="text-destructive"
+          onClick={() => {
+            revoke.mutate({
+              organizationId: row.original.organizationId,
+              userId: row.original.id,
+            });
+          }}
+        >
+          Remove member
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/dashboard/src/components/settings/members/index.tsx b/apps/dashboard/src/components/settings/members/index.tsx
new file mode 100644
index 00000000..b08e7463
--- /dev/null
+++ b/apps/dashboard/src/components/settings/members/index.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { DataTable } from '@/components/data-table';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import { GanttChartIcon } from 'lucide-react';
+
+import type { IServiceMember, IServiceProject } from '@openpanel/db';
+
+import { useColumns } from './columns';
+
+type CommonProps = {
+  projects: IServiceProject[];
+  data: IServiceMember[];
+};
+
+type Props = CommonProps;
+
+export const MembersTable = ({ projects, data }: Props) => {
+  const columns = useColumns(projects);
+
+  if (!data) {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+      </div>
+    );
+  }
+
+  if (data?.length === 0) {
+    return (
+      <FullPageEmptyState title="No members here" icon={GanttChartIcon}>
+        <p>Could not find any members</p>
+      </FullPageEmptyState>
+    );
+  }
+
+  return (
+    <>
+      <DataTable data={data ?? []} columns={columns} />
+    </>
+  );
+};
diff --git a/apps/dashboard/src/components/ui/accordion.tsx b/apps/dashboard/src/components/ui/accordion.tsx
index 1c45b241..8bc3a485 100644
--- a/apps/dashboard/src/components/ui/accordion.tsx
+++ b/apps/dashboard/src/components/ui/accordion.tsx
@@ -43,7 +43,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="overflow-hidden  transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn('pb-4 pt-0', className)}>{children}</div>
diff --git a/apps/dashboard/src/components/ui/alert-dialog.tsx b/apps/dashboard/src/components/ui/alert-dialog.tsx
index e846f76a..94237d75 100644
--- a/apps/dashboard/src/components/ui/alert-dialog.tsx
+++ b/apps/dashboard/src/components/ui/alert-dialog.tsx
@@ -90,7 +90,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn(' text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/apps/dashboard/src/components/ui/alert.tsx b/apps/dashboard/src/components/ui/alert.tsx
index 2f44f1f6..639d3ddf 100644
--- a/apps/dashboard/src/components/ui/alert.tsx
+++ b/apps/dashboard/src/components/ui/alert.tsx
@@ -52,7 +52,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    className={cn(' [&_p]:leading-relaxed', className)}
     {...props}
   />
 ));
diff --git a/apps/dashboard/src/components/ui/avatar.tsx b/apps/dashboard/src/components/ui/avatar.tsx
index 2817f1c6..e4664e5e 100644
--- a/apps/dashboard/src/components/ui/avatar.tsx
+++ b/apps/dashboard/src/components/ui/avatar.tsx
@@ -11,7 +11,7 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      'relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full text-sm',
+      'relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full ',
       className
     )}
     {...props}
diff --git a/apps/dashboard/src/components/ui/badge.tsx b/apps/dashboard/src/components/ui/badge.tsx
index d400590a..5051c9cf 100644
--- a/apps/dashboard/src/components/ui/badge.tsx
+++ b/apps/dashboard/src/components/ui/badge.tsx
@@ -6,14 +6,14 @@ import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 
 const badgeVariants = cva(
-  'inline-flex h-[20px] items-center rounded-full border px-1.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex h-[20px] items-center rounded-full border px-1.5 text-sm font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
         default:
           'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
         secondary:
-          'bg-def-100 hover:bg-def-100/80 border-transparent text-secondary-foreground',
+          'border-transparent bg-def-100 text-secondary-foreground hover:bg-def-100/80',
         destructive:
           'border-transparent bg-destructive-foreground text-destructive hover:bg-destructive/80',
         success:
diff --git a/apps/dashboard/src/components/ui/button.tsx b/apps/dashboard/src/components/ui/button.tsx
index 4aab1a3f..934ce898 100644
--- a/apps/dashboard/src/components/ui/button.tsx
+++ b/apps/dashboard/src/components/ui/button.tsx
@@ -10,7 +10,7 @@ import { Loader2 } from 'lucide-react';
 import Link from 'next/link';
 
 const buttonVariants = cva(
-  'inline-flex flex-shrink-0 select-none items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex flex-shrink-0 select-none items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/dashboard/src/components/ui/calendar.tsx b/apps/dashboard/src/components/ui/calendar.tsx
index da706261..6881753d 100644
--- a/apps/dashboard/src/components/ui/calendar.tsx
+++ b/apps/dashboard/src/components/ui/calendar.tsx
@@ -20,7 +20,7 @@ function Calendar({
         months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
         month: 'space-y-4',
         caption: 'flex justify-center pt-1 relative items-center',
-        caption_label: 'text-sm font-medium',
+        caption_label: ' font-medium',
         nav: 'space-x-1 flex items-center',
         nav_button: cn(
           buttonVariants({ variant: 'outline' }),
@@ -33,7 +33,7 @@ function Calendar({
         head_cell:
           'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
         row: 'flex w-full mt-2',
-        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        cell: 'h-9 w-9 text-center  p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
         day: cn(
           buttonVariants({ variant: 'ghost' }),
           'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
diff --git a/apps/dashboard/src/components/ui/checkbox.tsx b/apps/dashboard/src/components/ui/checkbox.tsx
index 00c7413c..930d5afa 100644
--- a/apps/dashboard/src/components/ui/checkbox.tsx
+++ b/apps/dashboard/src/components/ui/checkbox.tsx
@@ -52,7 +52,7 @@ const CheckboxInput = React.forwardRef<
     )}
   >
     <Checkbox ref={ref} {...props} className="relative top-0.5" />
-    <div className="text-sm font-medium">{props.children}</div>
+    <div className=" font-medium">{props.children}</div>
   </label>
 ));
 CheckboxInput.displayName = 'CheckboxInput';
diff --git a/apps/dashboard/src/components/ui/command.tsx b/apps/dashboard/src/components/ui/command.tsx
index 91b9f2af..852cdfc9 100644
--- a/apps/dashboard/src/components/ui/command.tsx
+++ b/apps/dashboard/src/components/ui/command.tsx
@@ -45,7 +45,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-11 w-full rounded-md bg-transparent py-3  outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
@@ -72,11 +72,7 @@ const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center " {...props} />
 ));
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
@@ -88,7 +84,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
       className
     )}
     {...props}
@@ -116,7 +112,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5  outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     data-disabled={props.disabled}
@@ -133,7 +129,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground',
+        'ml-auto text-sm tracking-widest text-muted-foreground',
         className
       )}
       {...props}
diff --git a/apps/dashboard/src/components/ui/dialog.tsx b/apps/dashboard/src/components/ui/dialog.tsx
index a94426d1..a6c98889 100644
--- a/apps/dashboard/src/components/ui/dialog.tsx
+++ b/apps/dashboard/src/components/ui/dialog.tsx
@@ -99,7 +99,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn(' text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/apps/dashboard/src/components/ui/dropdown-menu.tsx b/apps/dashboard/src/components/ui/dropdown-menu.tsx
index e571de6b..877ce2b8 100644
--- a/apps/dashboard/src/components/ui/dropdown-menu.tsx
+++ b/apps/dashboard/src/components/ui/dropdown-menu.tsx
@@ -26,7 +26,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5  outline-none focus:bg-accent data-[state=open]:bg-accent',
       inset && 'pl-8',
       className
     )}
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:mr-2',
+      'relative flex min-h-8 cursor-pointer select-none items-center rounded-sm px-2  py-1.5 outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:mr-2',
       inset && 'pl-8',
       className
     )}
@@ -98,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2  outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2  outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -145,11 +145,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-sm font-semibold',
-      inset && 'pl-8',
-      className
-    )}
+    className={cn('px-2 py-1.5  font-semibold', inset && 'pl-8', className)}
     {...props}
   />
 ));
@@ -173,7 +169,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      className={cn('ml-auto text-sm tracking-widest opacity-60', className)}
       {...props}
     />
   );
diff --git a/apps/dashboard/src/components/ui/input-otp.tsx b/apps/dashboard/src/components/ui/input-otp.tsx
index a8137afa..1618961f 100644
--- a/apps/dashboard/src/components/ui/input-otp.tsx
+++ b/apps/dashboard/src/components/ui/input-otp.tsx
@@ -38,7 +38,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input  transition-all first:rounded-l-md first:border-l last:rounded-r-md',
         isActive && 'z-10 ring-2 ring-ring ring-offset-background',
         className
       )}
diff --git a/apps/dashboard/src/components/ui/input.tsx b/apps/dashboard/src/components/ui/input.tsx
index fec1c455..8c075cb3 100644
--- a/apps/dashboard/src/components/ui/input.tsx
+++ b/apps/dashboard/src/components/ui/input.tsx
@@ -6,11 +6,11 @@ import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 
 const inputVariant = cva(
-  'flex w-full rounded-md border border-input bg-card ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50',
+  'file: flex w-full rounded-md border border-input bg-card ring-offset-background file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       size: {
-        default: 'h-8 px-3 py-2 text-sm',
+        default: 'h-8 px-3 py-2 ',
         large: 'h-12 px-4 py-3 text-lg',
       },
     },
diff --git a/apps/dashboard/src/components/ui/key-value.tsx b/apps/dashboard/src/components/ui/key-value.tsx
index d4eee7c1..1a8c657c 100644
--- a/apps/dashboard/src/components/ui/key-value.tsx
+++ b/apps/dashboard/src/components/ui/key-value.tsx
@@ -15,7 +15,7 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
   return (
     <Component
       className={cn(
-        'group flex min-w-0 max-w-full divide-x self-start overflow-hidden rounded-md border border-border text-xs font-medium transition-transform',
+        'group flex min-w-0 max-w-full divide-x self-start overflow-hidden rounded-md border border-border text-sm font-medium transition-transform',
         clickable && 'hover:-translate-y-0.5'
       )}
       {...{ href, onClick }}
@@ -23,7 +23,7 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
       <div className="bg-black/5 p-1 px-2 capitalize">{name}</div>
       <div
         className={cn(
-          'overflow-hidden text-ellipsis whitespace-nowrap bg-card p-1 px-2 font-mono text-highlight',
+          'font-mono overflow-hidden text-ellipsis whitespace-nowrap bg-card p-1 px-2 text-highlight',
           clickable && 'group-hover:underline'
         )}
       >
diff --git a/apps/dashboard/src/components/ui/label.tsx b/apps/dashboard/src/components/ui/label.tsx
index 75c2d449..95ec4944 100644
--- a/apps/dashboard/src/components/ui/label.tsx
+++ b/apps/dashboard/src/components/ui/label.tsx
@@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 
 const labelVariants = cva(
-  'mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+  'mb-2 block  font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 );
 
 const Label = React.forwardRef<
diff --git a/apps/dashboard/src/components/ui/padding.tsx b/apps/dashboard/src/components/ui/padding.tsx
new file mode 100644
index 00000000..95aa9445
--- /dev/null
+++ b/apps/dashboard/src/components/ui/padding.tsx
@@ -0,0 +1,17 @@
+import { cn } from '@/utils/cn';
+
+const padding = 'p-4 lg:p-8';
+
+export const Padding = ({
+  className,
+  ...props
+}: React.HtmlHTMLAttributes<HTMLDivElement>) => {
+  return <div className={cn(padding, className)} {...props} />;
+};
+
+export const Spacer = ({
+  className,
+  ...props
+}: React.HtmlHTMLAttributes<HTMLDivElement>) => {
+  return <div className={cn('h-8', className)} {...props} />;
+};
diff --git a/apps/dashboard/src/components/ui/progress.tsx b/apps/dashboard/src/components/ui/progress.tsx
index b27d48c3..59dc72f4 100644
--- a/apps/dashboard/src/components/ui/progress.tsx
+++ b/apps/dashboard/src/components/ui/progress.tsx
@@ -13,7 +13,7 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      'bg-def-200 relative h-4 w-full min-w-16 overflow-hidden rounded shadow-sm',
+      'relative h-4 w-full min-w-16 overflow-hidden rounded bg-def-200 shadow-sm',
       size == 'sm' && 'h-2',
       size == 'lg' && 'h-8',
       className
@@ -28,7 +28,7 @@ const Progress = React.forwardRef<
       }}
     />
     {value && size != 'sm' && (
-      <div className="z-5 absolute bottom-0 top-0 flex items-center px-2 text-xs font-semibold">
+      <div className="z-5 absolute bottom-0 top-0 flex items-center px-2 text-sm font-semibold">
         <div>{round(value, 2)}%</div>
       </div>
     )}
diff --git a/apps/dashboard/src/components/ui/sheet.tsx b/apps/dashboard/src/components/ui/sheet.tsx
index 09321138..b73a1cfb 100644
--- a/apps/dashboard/src/components/ui/sheet.tsx
+++ b/apps/dashboard/src/components/ui/sheet.tsx
@@ -70,7 +70,7 @@ const SheetContent = React.forwardRef<
       <SheetPrimitive.Close id="close-sheet" className="hidden" />
       <SheetPrimitive.Close
         onClick={onClose}
-        className="data-[state=open]:bg-def-100 absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-def-100"
       >
         <XIcon className="h-4 w-4" />
         <span className="sr-only">Close</span>
@@ -126,7 +126,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn(' text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/apps/dashboard/src/components/ui/table.tsx b/apps/dashboard/src/components/ui/table.tsx
index 77cb3a9a..fdddb30b 100644
--- a/apps/dashboard/src/components/ui/table.tsx
+++ b/apps/dashboard/src/components/ui/table.tsx
@@ -13,7 +13,7 @@ const Table = React.forwardRef<
     <div className={cn('relative w-full', overflow && 'overflow-auto')}>
       <table
         ref={ref}
-        className={cn('w-full caption-bottom text-sm', className)}
+        className={cn('w-full caption-bottom', className)}
         {...props}
       />
     </div>
@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-10 border-b border-border bg-def-200 px-4 text-left align-middle text-sm font-medium text-muted-foreground shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
+      'h-10 whitespace-nowrap border-b border-border bg-def-100 px-4 text-left align-middle  font-semibold text-muted-foreground shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
       className
     )}
     {...props}
@@ -104,7 +104,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    className={cn('mt-4  text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/apps/dashboard/src/components/ui/tabs.tsx b/apps/dashboard/src/components/ui/tabs.tsx
index 7bce04c8..6ad9c77f 100644
--- a/apps/dashboard/src/components/ui/tabs.tsx
+++ b/apps/dashboard/src/components/ui/tabs.tsx
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5  font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       className
     )}
     {...props}
diff --git a/apps/dashboard/src/components/ui/textarea.tsx b/apps/dashboard/src/components/ui/textarea.tsx
index bde7c006..62bf261f 100644
--- a/apps/dashboard/src/components/ui/textarea.tsx
+++ b/apps/dashboard/src/components/ui/textarea.tsx
@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex min-h-[80px] w-full rounded-md border border-input bg-card px-3 py-2  ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
diff --git a/apps/dashboard/src/components/ui/toast.tsx b/apps/dashboard/src/components/ui/toast.tsx
index f88e1905..36665fbf 100644
--- a/apps/dashboard/src/components/ui/toast.tsx
+++ b/apps/dashboard/src/components/ui/toast.tsx
@@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      'hover:bg-def-100 inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium  ring-offset-background transition-colors hover:bg-def-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
       className
     )}
     {...props}
@@ -94,7 +94,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn('text-sm font-semibold', className)}
+    className={cn(' font-semibold', className)}
     {...props}
   />
 ));
@@ -106,7 +106,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn('text-sm opacity-90', className)}
+    className={cn(' opacity-90', className)}
     {...props}
   />
 ));
diff --git a/apps/dashboard/src/components/ui/toggle.tsx b/apps/dashboard/src/components/ui/toggle.tsx
index 2d4d4c7f..361f7401 100644
--- a/apps/dashboard/src/components/ui/toggle.tsx
+++ b/apps/dashboard/src/components/ui/toggle.tsx
@@ -5,7 +5,7 @@ import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 
 const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'inline-flex items-center justify-center rounded-md  font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
   {
     variants: {
       variant: {
diff --git a/apps/dashboard/src/components/ui/tooltip.tsx b/apps/dashboard/src/components/ui/tooltip.tsx
index 9cc2533c..4be77548 100644
--- a/apps/dashboard/src/components/ui/tooltip.tsx
+++ b/apps/dashboard/src/components/ui/tooltip.tsx
@@ -22,7 +22,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 overflow-hidden rounded-md border bg-popover-foreground px-3 py-1.5 text-sm text-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 overflow-hidden rounded-md border bg-popover-foreground px-3 py-1.5  text-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
diff --git a/apps/dashboard/src/components/widget-table.tsx b/apps/dashboard/src/components/widget-table.tsx
index 297207ce..cdf5c573 100644
--- a/apps/dashboard/src/components/widget-table.tsx
+++ b/apps/dashboard/src/components/widget-table.tsx
@@ -20,7 +20,7 @@ export const WidgetTableHead = ({
   return (
     <thead
       className={cn(
-        'bg-def-100 text-def-1000 sticky top-0 z-10 border-b border-border text-sm [&_th:last-child]:text-right [&_th]:whitespace-nowrap [&_th]:p-4 [&_th]:py-2 [&_th]:text-left [&_th]:font-medium',
+        'text-def-1000 sticky top-0 z-10 border-b border-border bg-def-100  [&_th:last-child]:text-right [&_th]:whitespace-nowrap [&_th]:p-4 [&_th]:py-2 [&_th]:text-left [&_th]:font-medium',
         className
       )}
     >
@@ -49,7 +49,7 @@ export function WidgetTable<T>({
           {data.map((item) => (
             <tr
               key={keyExtractor(item)}
-              className="border-b border-border text-right text-sm last:border-0 [&_td:first-child]:text-left [&_td]:p-4"
+              className="border-b border-border text-right  last:border-0 [&_td:first-child]:text-left [&_td]:p-4"
             >
               {columns.map((column) => (
                 <td key={column.name}>{column.render(item)}</td>
diff --git a/apps/dashboard/src/hooks/useCursor.ts b/apps/dashboard/src/hooks/useCursor.ts
index 77eed95d..3b76b58a 100644
--- a/apps/dashboard/src/hooks/useCursor.ts
+++ b/apps/dashboard/src/hooks/useCursor.ts
@@ -1,6 +1,8 @@
 import { useTransition } from 'react';
 import { parseAsInteger, useQueryState } from 'nuqs';
 
+import { useDebounceValue } from './useDebounceValue';
+
 export function useCursor() {
   const [loading, startTransition] = useTransition();
   const [cursor, setCursor] = useQueryState(
@@ -15,3 +17,18 @@ export function useCursor() {
     loading,
   };
 }
+
+export type UseDebouncedCursor = ReturnType<typeof useDebouncedCursor>;
+
+export function useDebouncedCursor() {
+  const [cursor, setCursor] = useQueryState(
+    'cursor',
+    parseAsInteger.withDefault(0)
+  );
+  const debouncedCursor = useDebounceValue(cursor, 200);
+  return {
+    value: cursor,
+    set: setCursor,
+    debounced: debouncedCursor,
+  };
+}
diff --git a/apps/dashboard/src/hooks/useDebounceVal.ts b/apps/dashboard/src/hooks/useDebounceState.ts
similarity index 94%
rename from apps/dashboard/src/hooks/useDebounceVal.ts
rename to apps/dashboard/src/hooks/useDebounceState.ts
index b8ebac2a..7660eeb9 100644
--- a/apps/dashboard/src/hooks/useDebounceVal.ts
+++ b/apps/dashboard/src/hooks/useDebounceState.ts
@@ -7,7 +7,7 @@ interface DebouncedState<T> {
   set: React.Dispatch<React.SetStateAction<T>>;
 }
 
-export function useDebounceVal<T>(
+export function useDebounceState<T>(
   initialValue: T,
   delay = 500,
   options?: Parameters<typeof debounce>[2]
diff --git a/apps/dashboard/src/hooks/useDebounceValue.ts b/apps/dashboard/src/hooks/useDebounceValue.ts
new file mode 100644
index 00000000..502d4c3f
--- /dev/null
+++ b/apps/dashboard/src/hooks/useDebounceValue.ts
@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounceValue = <T>(value: T, delay: number): T => {
+  const [state, setState] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => setState(value), delay);
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+  return state;
+};
diff --git a/apps/dashboard/src/hooks/useNumerFormatter.ts b/apps/dashboard/src/hooks/useNumerFormatter.ts
index 8e400746..ac260fbd 100644
--- a/apps/dashboard/src/hooks/useNumerFormatter.ts
+++ b/apps/dashboard/src/hooks/useNumerFormatter.ts
@@ -14,7 +14,7 @@ export const formatNumber =
       return 'N/A';
     }
     return new Intl.NumberFormat(locale, {
-      maximumSignificantDigits: 20,
+      maximumSignificantDigits: 3,
     }).format(value);
   };
 
diff --git a/apps/dashboard/src/modals/AddClient.tsx b/apps/dashboard/src/modals/AddClient.tsx
index 059424df..70ec7099 100644
--- a/apps/dashboard/src/modals/AddClient.tsx
+++ b/apps/dashboard/src/modals/AddClient.tsx
@@ -230,7 +230,7 @@ export default function AddClient(props: Props) {
                         ]}
                         placeholder="Select a project"
                       />
-                      <p className="mt-1 text-xs text-muted-foreground">
+                      <p className="mt-1 text-sm text-muted-foreground">
                         {field.value === 'write' &&
                           'Write: Is the default client type and is used for ingestion of data'}
                         {field.value === 'read' &&
diff --git a/apps/dashboard/src/modals/AddDashboard.tsx b/apps/dashboard/src/modals/AddDashboard.tsx
index 01ad6660..b5cef7ff 100644
--- a/apps/dashboard/src/modals/AddDashboard.tsx
+++ b/apps/dashboard/src/modals/AddDashboard.tsx
@@ -31,12 +31,13 @@ export default function AddDashboard() {
 
   const mutation = api.dashboard.create.useMutation({
     onError: handleError,
-    onSuccess() {
-      router.refresh();
+    onSuccess(res) {
+      router.push(`/${organizationSlug}/${projectId}/dashboards/${res.id}`);
       toast('Success', {
         description: 'Dashboard created.',
       });
       popModal();
+      router.refresh();
     },
   });
 
diff --git a/apps/dashboard/src/modals/FunnelStepDetails.tsx b/apps/dashboard/src/modals/FunnelStepDetails.tsx
index 894338a2..0adf986f 100644
--- a/apps/dashboard/src/modals/FunnelStepDetails.tsx
+++ b/apps/dashboard/src/modals/FunnelStepDetails.tsx
@@ -88,7 +88,7 @@ export default function FunnelStepDetails(props: Props) {
                     asChild
                     content={profile.createdAt.toLocaleString()}
                   >
-                    <div className="text-sm text-muted-foreground">
+                    <div className=" text-muted-foreground">
                       {profile.createdAt.toLocaleTimeString()}
                     </div>
                   </Tooltiper>
diff --git a/apps/dashboard/src/modals/Modal/Container.tsx b/apps/dashboard/src/modals/Modal/Container.tsx
index 01979763..7b4fa752 100644
--- a/apps/dashboard/src/modals/Modal/Container.tsx
+++ b/apps/dashboard/src/modals/Modal/Container.tsx
@@ -33,7 +33,7 @@ export function ModalHeader({
     <div className={cn('mb-6 flex justify-between', className)}>
       <div>
         <div className="mt-0.5 font-medium">{title}</div>
-        {!!text && <div className="text-sm text-muted-foreground">{text}</div>}
+        {!!text && <div className=" text-muted-foreground">{text}</div>}
       </div>
       {onClose !== false && (
         <Button
diff --git a/apps/dashboard/src/modals/OnboardingTroubleshoot.tsx b/apps/dashboard/src/modals/OnboardingTroubleshoot.tsx
index 6f5d5d9f..3c533d95 100644
--- a/apps/dashboard/src/modals/OnboardingTroubleshoot.tsx
+++ b/apps/dashboard/src/modals/OnboardingTroubleshoot.tsx
@@ -35,7 +35,7 @@ export default function OnboardingTroubleshoot() {
           </AlertDescription>
         </Alert>
       </div>
-      <p className="mt-4 text-sm">
+      <p className="mt-4 ">
         Still have issues? Join our{' '}
         <a href="https://go.openpanel.dev/discord" className="underline">
           discord channel
diff --git a/apps/dashboard/src/modals/ShareOverviewModal.tsx b/apps/dashboard/src/modals/ShareOverviewModal.tsx
index 15fa94e0..8db420bb 100644
--- a/apps/dashboard/src/modals/ShareOverviewModal.tsx
+++ b/apps/dashboard/src/modals/ShareOverviewModal.tsx
@@ -61,7 +61,7 @@ export default function ShareOverviewModal() {
           render={({ field }) => (
             <label
               htmlFor="public"
-              className="mb-4 flex items-center gap-2 text-sm font-medium leading-none"
+              className="mb-4 flex items-center gap-2  font-medium leading-none"
             >
               <Checkbox
                 id="public"
diff --git a/apps/dashboard/src/modals/event-details.tsx b/apps/dashboard/src/modals/event-details.tsx
new file mode 100644
index 00000000..0fe593c4
--- /dev/null
+++ b/apps/dashboard/src/modals/event-details.tsx
@@ -0,0 +1,214 @@
+import { ChartRootShortcut } from '@/components/report/chart';
+import { KeyValue } from '@/components/ui/key-value';
+import { useAppParams } from '@/hooks/useAppParams';
+import {
+  useEventQueryFilters,
+  useEventQueryNamesFilter,
+} from '@/hooks/useEventQueryFilters';
+import { api } from '@/trpc/client';
+import { round } from 'mathjs';
+
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+interface Props {
+  id: string;
+}
+
+export default function EventDetails({ id }: Props) {
+  const { projectId } = useAppParams();
+  const [, setEvents] = useEventQueryNamesFilter();
+  const [, setFilter] = useEventQueryFilters();
+  const query = api.event.byId.useQuery({ id, projectId });
+
+  if (query.isLoading || query.isFetching) {
+    return null;
+  }
+
+  if (query.isError || !query.isSuccess) {
+    return null;
+  }
+
+  const event = query.data;
+
+  const common = [
+    {
+      name: 'Origin',
+      value: event.origin,
+    },
+    {
+      name: 'Duration',
+      value: event.duration ? round(event.duration / 1000, 1) : undefined,
+    },
+    {
+      name: 'Referrer',
+      value: event.referrer,
+      onClick() {
+        setFilter('referrer', event.referrer ?? '');
+      },
+    },
+    {
+      name: 'Referrer name',
+      value: event.referrerName,
+      onClick() {
+        setFilter('referrer_name', event.referrerName ?? '');
+      },
+    },
+    {
+      name: 'Referrer type',
+      value: event.referrerType,
+      onClick() {
+        setFilter('referrer_type', event.referrerType ?? '');
+      },
+    },
+    {
+      name: 'Brand',
+      value: event.brand,
+      onClick() {
+        setFilter('brand', event.brand ?? '');
+      },
+    },
+    {
+      name: 'Model',
+      value: event.model,
+      onClick() {
+        setFilter('model', event.model ?? '');
+      },
+    },
+    {
+      name: 'Browser',
+      value: event.browser,
+      onClick() {
+        setFilter('browser', event.browser ?? '');
+      },
+    },
+    {
+      name: 'Browser version',
+      value: event.browserVersion,
+      onClick() {
+        setFilter('browser_version', event.browserVersion ?? '');
+      },
+    },
+    {
+      name: 'OS',
+      value: event.os,
+      onClick() {
+        setFilter('os', event.os ?? '');
+      },
+    },
+    {
+      name: 'OS version',
+      value: event.osVersion,
+      onClick() {
+        setFilter('os_version', event.osVersion ?? '');
+      },
+    },
+    {
+      name: 'City',
+      value: event.city,
+      onClick() {
+        setFilter('city', event.city ?? '');
+      },
+    },
+    {
+      name: 'Region',
+      value: event.region,
+      onClick() {
+        setFilter('region', event.region ?? '');
+      },
+    },
+    {
+      name: 'Country',
+      value: event.country,
+      onClick() {
+        setFilter('country', event.country ?? '');
+      },
+    },
+    {
+      name: 'Device',
+      value: event.device,
+      onClick() {
+        setFilter('device', event.device ?? '');
+      },
+    },
+  ].filter((item) => typeof item.value === 'string' && item.value);
+
+  const properties = Object.entries(event.properties)
+    .map(([name, value]) => ({
+      name,
+      value: value as string | number | undefined,
+    }))
+    .filter((item) => typeof item.value === 'string' && item.value);
+
+  return (
+    <ModalContent>
+      <ModalHeader title={event.name} />
+      <div>
+        <div className="flex flex-col gap-8">
+          {properties.length > 0 && (
+            <div>
+              <div className="mb-2  font-medium">Params</div>
+              <div className="flex flex-wrap gap-2">
+                {properties.map((item) => (
+                  <KeyValue
+                    key={item.name}
+                    name={item.name.replace(/^__/, '')}
+                    value={item.value}
+                    onClick={() => {
+                      setFilter(
+                        `properties.${item.name}`,
+                        item.value ? String(item.value) : '',
+                        'is'
+                      );
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+          <div>
+            <div className="mb-2  font-medium">Common</div>
+            <div className="flex flex-wrap gap-2">
+              {common.map((item) => (
+                <KeyValue
+                  key={item.name}
+                  name={item.name}
+                  value={item.value}
+                  onClick={() => item.onClick?.()}
+                />
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <div className="mb-2 flex justify-between  font-medium">
+              <div>Similar events</div>
+              <button
+                className="text-muted-foreground hover:underline"
+                onClick={() => {
+                  setEvents([event.name]);
+                  popModal();
+                }}
+              >
+                Show all
+              </button>
+            </div>
+            <ChartRootShortcut
+              projectId={event.projectId}
+              chartType="histogram"
+              events={[
+                {
+                  id: 'A',
+                  name: event.name,
+                  displayName: 'Similar events',
+                  segment: 'event',
+                  filters: [],
+                },
+              ]}
+            />
+          </div>
+        </div>
+      </div>
+    </ModalContent>
+  );
+}
diff --git a/apps/dashboard/src/modals/index.tsx b/apps/dashboard/src/modals/index.tsx
index c6421bdf..197e38cc 100644
--- a/apps/dashboard/src/modals/index.tsx
+++ b/apps/dashboard/src/modals/index.tsx
@@ -14,6 +14,9 @@ const Loading = () => (
 );
 
 const modals = {
+  EventDetails: dynamic(() => import('./event-details'), {
+    loading: Loading,
+  }),
   EditProject: dynamic(() => import('./EditProject'), {
     loading: Loading,
   }),
diff --git a/apps/dashboard/src/styles/globals.css b/apps/dashboard/src/styles/globals.css
index 385569bf..6dd594f4 100644
--- a/apps/dashboard/src/styles/globals.css
+++ b/apps/dashboard/src/styles/globals.css
@@ -134,7 +134,19 @@
   }
 
   .card {
-    @apply border border-border bg-card;
+    @apply rounded-md border border-border bg-card;
+  }
+
+  .center-center {
+    @apply flex items-center justify-center text-center;
+  }
+
+  .col {
+    @apply flex flex-col;
+  }
+
+  .row {
+    @apply flex flex-row;
   }
 }
 
diff --git a/apps/dashboard/src/utils/date.ts b/apps/dashboard/src/utils/date.ts
index 36d44cea..5b1e05a3 100644
--- a/apps/dashboard/src/utils/date.ts
+++ b/apps/dashboard/src/utils/date.ts
@@ -39,6 +39,13 @@ export function formatDateTime(date: Date) {
   }).format(date);
 }
 
+export function formatTime(date: Date) {
+  return new Intl.DateTimeFormat(getLocale(), {
+    hour: 'numeric',
+    minute: 'numeric',
+  }).format(date);
+}
+
 TimeAgo.addDefaultLocale(en);
 const ta = new TimeAgo(getLocale());
 
diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index 1c3b1aa0..5369e9a0 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -67,6 +67,25 @@ const config = {
     './src/**/*.{ts,tsx}',
   ],
   theme: {
+    fontFamily: {
+      sans: ['var(--font-geist-sans)'],
+      mono: ['var(--font-geist-mono)'],
+    },
+    fontSize: {
+      xs: ['10px', '10px'],
+      sm: ['12px', '12px'],
+      base: ['14px', '14px'],
+      lg: ['16px', '16px'],
+      xl: ['18px', '18px'],
+      '2xl': ['20px', '20px'],
+      '3xl': ['24px', '24px'],
+      '4xl': ['30px', '30px'],
+      '5xl': ['36px', '36px'],
+      '6xl': ['48px', '48px'],
+      '7xl': ['64px', '64px'],
+      '8xl': ['72px', '72px'],
+      '9xl': ['96px', '96px'],
+    },
     extend: {
       colors: {
         border: 'hsl(var(--border))',
diff --git a/apps/public/src/app/footer.tsx b/apps/public/src/app/footer.tsx
index b7f0c18a..10d2e425 100644
--- a/apps/public/src/app/footer.tsx
+++ b/apps/public/src/app/footer.tsx
@@ -43,7 +43,7 @@ export default function Footer() {
         <div className="h-px w-full bg-[radial-gradient(circle,rgba(255,255,255,0.7)_0%,rgba(255,255,255,0.7)_50%,rgba(255,255,255,0)_100%)]"></div>
         <div className="bg-blue-darker p-4">
           <div className="container">
-            <div className="flex flex-col gap-4 text-sm md:flex-row md:items-center md:justify-between">
+            <div className="flex flex-col gap-4  md:flex-row md:items-center md:justify-between">
               <Logo />
               <div className="flex flex-col gap-4 md:flex-row">
                 <Link className="hover:underline" href="/terms">
diff --git a/apps/public/src/app/hero.tsx b/apps/public/src/app/hero.tsx
index 64354c10..1f946c1a 100644
--- a/apps/public/src/app/hero.tsx
+++ b/apps/public/src/app/hero.tsx
@@ -25,7 +25,7 @@ export async function Hero() {
       <div className="container relative flex min-h-[700px] flex-col items-center gap-4 max-md:pt-32 md:h-screen md:flex-row md:gap-8">
         <div className="flex-1 max-md:text-center sm:min-w-[350px] lg:min-w-[400px]">
           <div className="mb-4 flex justify-center md:justify-start">
-            <div className="rounded-md border border-border p-1.5 px-4 text-sm font-medium">
+            <div className="rounded-md border border-border p-1.5 px-4  font-medium">
               FREE DURING BETA
             </div>
           </div>
@@ -66,7 +66,7 @@ export async function Hero() {
           </div>
           <div className="mt-8 flex justify-center gap-8 md:justify-start">
             <div>
-              <div className="text-sm uppercase text-muted-foreground">
+              <div className=" uppercase text-muted-foreground">
                 Collected events
               </div>
               <div className="font-serif text-3xl font-semibold">
@@ -74,7 +74,7 @@ export async function Hero() {
               </div>
             </div>
             <div>
-              <div className="text-sm uppercase text-muted-foreground">
+              <div className=" uppercase text-muted-foreground">
                 Active projects
               </div>
               <div className="font-serif text-3xl font-semibold">
diff --git a/apps/public/src/app/navbar.tsx b/apps/public/src/app/navbar.tsx
index 4167ff4b..7dfd2761 100644
--- a/apps/public/src/app/navbar.tsx
+++ b/apps/public/src/app/navbar.tsx
@@ -23,7 +23,7 @@ export function Navbar({ darkText = false, className }: Props) {
     >
       <div className="container flex items-center justify-between py-4">
         <Logo className="max-sm:[&_span]:hidden" />
-        <nav className="flex gap-4 text-sm">
+        <nav className="flex gap-4 ">
           {pathname !== '/' && <Link href="/">Home</Link>}
           <Link href="/#pricing" data-event="click_pricing">
             Pricing
diff --git a/apps/public/src/app/pricing.tsx b/apps/public/src/app/pricing.tsx
index 88084e95..fca65831 100644
--- a/apps/public/src/app/pricing.tsx
+++ b/apps/public/src/app/pricing.tsx
@@ -53,7 +53,7 @@ export function Pricing() {
                 className="border-blue-dark relative flex flex-col gap-1 rounded-lg border bg-white p-6"
               >
                 {item.hint && (
-                  <div className="absolute right-2 top-2 flex items-center gap-2 rounded bg-blue-600 px-2 py-1 text-xs text-white">
+                  <div className="absolute right-2 top-2 flex items-center gap-2 rounded bg-blue-600 px-2 py-1 text-sm text-white">
                     <StarIcon size={12} />
                     {item.hint}
                   </div>
diff --git a/apps/public/src/app/social-proof/social-proof.tsx b/apps/public/src/app/social-proof/social-proof.tsx
index 746d4e63..26d7ec5c 100644
--- a/apps/public/src/app/social-proof/social-proof.tsx
+++ b/apps/public/src/app/social-proof/social-proof.tsx
@@ -69,5 +69,5 @@ export function SocialProof({ className, count }: JoinWaitlistProps) {
   );
 }
 
-// <div class="flex flex-col gap-y-2 mt-5 lg:mt-3"><p class="text-gray-700 dark:text-gray-100 text-xs w-24 text-start font-semibold whitespace-nowrap">What users think</p><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://pbs.twimg.com/profile_images/1744063824431370240/BbVtyCiy_normal.png" alt="feedback_0"><span class="flex-wrap text-xs text-gray-600 dark:text-gray-200 text-start font-normal">“ Been a long time Mixpanel user and without a doubt there's a bunch of room to innovate. I'm confident Openpanel is on the right path! ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flame w-5 h-5 text-red-600 fill-orange-400 animate-pulse"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg></div><img class="w-5 h-5 rounded-full border border-2 border-red-500" src="https://pbs.twimg.com/profile_images/1751607056316944384/8E4F88FL_normal.jpg" alt="feedback_1"><span class="flex-wrap text-xs text-gray-600 dark:text-gray-200 text-start font-normal">“ I have used Openpanel for the last 6 months (since I’m the creator) for 3 different sites/apps. It’s a great analytics product that has everything you need. Still lacking a native app but will work hard to make that a reality!  ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://pbs.twimg.com/profile_images/1701887174042324992/g2GBIQay_normal.jpg" alt="feedback_2"><span class="flex-wrap text-xs text-gray-600 dark:text-gray-200 text-start font-normal">“ would be cool if it was easier to edit text after image is generated  ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flame w-5 h-5 text-red-600 fill-orange-400 animate-pulse"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg></div><img class="w-5 h-5 rounded-full border border-2 border-red-500" src="https://pbs.twimg.com/profile_images/1194368464946974728/1D2biimN_normal.jpg" alt="feedback_3"><span class="flex-wrap text-xs text-gray-600 dark:text-gray-200 text-start font-normal">“ Awesome product, very easy to use and understand. I miss a native app and the documentation could be improved. Otherwise I love it. ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://lh3.googleusercontent.com/a/ACg8ocIWiGTd3nWE5etp-CFhxrTKFvSLSJJd7pPmiM9SNJ9sAg=s96-c" alt="feedback_4"><span class="flex-wrap text-xs text-gray-600 dark:text-gray-200 text-start font-normal">“ I have used Open panel since the private beta and i'm super impressed by the product already, the speed after you give feedback to actually get the features is truly amazing! Can't wait to see where Openpanel are in 6 months! ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://lh3.googleusercontent.com/a/ACg8ocKymAw_YoIrfoGp-bWMlDsXgM6St0dzaVJ7m_lGNXDtrA=s96-c" alt="feedback_5"><span class="flex-wrap text-xs text-gray-600 dark:text-gray-200 text-start font-normal">“ Impressively fast UI and easy to integrate! Added it alongside my current analytics tool for my native app in less than an hour.  ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://pbs.twimg.com/profile_images/1735771119980879872/Mx5MlB9e_normal.jpg" alt="feedback_6"><span class="flex-wrap text-xs text-gray-600 dark:text-gray-200 text-start font-normal">“ Im using plausible and find it pleasing but limited.
-//  Im looking forward to trying out Openpanel, the demo pictures and the page look professional. The listed features seem to be broader then plausible. :) ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://pbs.twimg.com/profile_images/1767459527006334976/unbMENPG_normal.jpg" alt="feedback_7"><span class="flex-wrap text-xs text-gray-600 dark:text-gray-200 text-start font-normal">“ Incredibly easy to implement and a joy to use. 5/5 would recommend. ”</span></div></div>
+// <div class="flex flex-col gap-y-2 mt-5 lg:mt-3"><p class="text-gray-700 dark:text-gray-100 text-sm w-24 text-start font-semibold whitespace-nowrap">What users think</p><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://pbs.twimg.com/profile_images/1744063824431370240/BbVtyCiy_normal.png" alt="feedback_0"><span class="flex-wrap text-sm text-gray-600 dark:text-gray-200 text-start font-normal">“ Been a long time Mixpanel user and without a doubt there's a bunch of room to innovate. I'm confident Openpanel is on the right path! ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flame w-5 h-5 text-red-600 fill-orange-400 animate-pulse"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg></div><img class="w-5 h-5 rounded-full border border-2 border-red-500" src="https://pbs.twimg.com/profile_images/1751607056316944384/8E4F88FL_normal.jpg" alt="feedback_1"><span class="flex-wrap text-sm text-gray-600 dark:text-gray-200 text-start font-normal">“ I have used Openpanel for the last 6 months (since I’m the creator) for 3 different sites/apps. It’s a great analytics product that has everything you need. Still lacking a native app but will work hard to make that a reality!  ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://pbs.twimg.com/profile_images/1701887174042324992/g2GBIQay_normal.jpg" alt="feedback_2"><span class="flex-wrap text-sm text-gray-600 dark:text-gray-200 text-start font-normal">“ would be cool if it was easier to edit text after image is generated  ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flame w-5 h-5 text-red-600 fill-orange-400 animate-pulse"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg></div><img class="w-5 h-5 rounded-full border border-2 border-red-500" src="https://pbs.twimg.com/profile_images/1194368464946974728/1D2biimN_normal.jpg" alt="feedback_3"><span class="flex-wrap text-sm text-gray-600 dark:text-gray-200 text-start font-normal">“ Awesome product, very easy to use and understand. I miss a native app and the documentation could be improved. Otherwise I love it. ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://lh3.googleusercontent.com/a/ACg8ocIWiGTd3nWE5etp-CFhxrTKFvSLSJJd7pPmiM9SNJ9sAg=s96-c" alt="feedback_4"><span class="flex-wrap text-sm text-gray-600 dark:text-gray-200 text-start font-normal">“ I have used Open panel since the private beta and i'm super impressed by the product already, the speed after you give feedback to actually get the features is truly amazing! Can't wait to see where Openpanel are in 6 months! ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://lh3.googleusercontent.com/a/ACg8ocKymAw_YoIrfoGp-bWMlDsXgM6St0dzaVJ7m_lGNXDtrA=s96-c" alt="feedback_5"><span class="flex-wrap text-sm text-gray-600 dark:text-gray-200 text-start font-normal">“ Impressively fast UI and easy to integrate! Added it alongside my current analytics tool for my native app in less than an hour.  ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://pbs.twimg.com/profile_images/1735771119980879872/Mx5MlB9e_normal.jpg" alt="feedback_6"><span class="flex-wrap text-sm text-gray-600 dark:text-gray-200 text-start font-normal">“ Im using plausible and find it pleasing but limited.
+//  Im looking forward to trying out Openpanel, the demo pictures and the page look professional. The listed features seem to be broader then plausible. :) ”</span></div><div class="flex flex-row w-full gap-x-2 items-start"><div class="w-5 shrink-0"></div><img class="w-5 h-5 rounded-full " src="https://pbs.twimg.com/profile_images/1767459527006334976/unbMENPG_normal.jpg" alt="feedback_7"><span class="flex-wrap text-sm text-gray-600 dark:text-gray-200 text-start font-normal">“ Incredibly easy to implement and a joy to use. 5/5 would recommend. ”</span></div></div>
diff --git a/apps/public/src/components/ui/button.tsx b/apps/public/src/components/ui/button.tsx
index 5561dd12..940d3d42 100644
--- a/apps/public/src/components/ui/button.tsx
+++ b/apps/public/src/components/ui/button.tsx
@@ -9,7 +9,7 @@ import type { LucideIcon } from 'lucide-react';
 import { Loader2 } from 'lucide-react';
 
 const buttonVariants = cva(
-  'inline-flex flex-shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex flex-shrink-0 items-center justify-center whitespace-nowrap rounded-md  font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/public/src/components/ui/dialog.tsx b/apps/public/src/components/ui/dialog.tsx
index 98801586..42d8a40a 100644
--- a/apps/public/src/components/ui/dialog.tsx
+++ b/apps/public/src/components/ui/dialog.tsx
@@ -101,7 +101,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn(' text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/apps/public/src/components/ui/input.tsx b/apps/public/src/components/ui/input.tsx
index 3a6d2553..1d26768b 100644
--- a/apps/public/src/components/ui/input.tsx
+++ b/apps/public/src/components/ui/input.tsx
@@ -13,7 +13,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'file: flex h-10 w-full rounded-md border border-input bg-background px-3  py-2 ring-offset-background file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
           !!error && 'border-destructive'
         )}
diff --git a/apps/public/src/components/ui/tooltip.tsx b/apps/public/src/components/ui/tooltip.tsx
index 1849163f..35581699 100644
--- a/apps/public/src/components/ui/tooltip.tsx
+++ b/apps/public/src/components/ui/tooltip.tsx
@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md border bg-black px-3 py-1.5 text-sm text-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 overflow-hidden rounded-md border bg-black px-3 py-1.5  text-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
diff --git a/apps/worker/src/jobs/events.ts b/apps/worker/src/jobs/events.ts
index d1892217..627a5980 100644
--- a/apps/worker/src/jobs/events.ts
+++ b/apps/worker/src/jobs/events.ts
@@ -17,6 +17,12 @@ export async function eventsJob(job: Job<EventsQueuePayload>) {
       return await incomingEvent(job as Job<EventsQueuePayloadIncomingEvent>);
     }
     case 'createSessionEnd': {
+      try {
+        await updateEventsCount(job.data.payload.projectId);
+      } catch (e) {
+        job.log('Failed to update count');
+      }
+
       return await createSessionEnd(
         job as Job<EventsQueuePayloadCreateSessionEnd>
       );
diff --git a/packages/db/src/services/event.service.ts b/packages/db/src/services/event.service.ts
index 24663609..71888789 100644
--- a/packages/db/src/services/event.service.ts
+++ b/packages/db/src/services/event.service.ts
@@ -343,18 +343,18 @@ export async function getEventList({
   sb.offset = Math.max(0, (cursor ?? 0) * take);
   sb.where.projectId = `project_id = ${escape(projectId)}`;
 
-  // sb.select.id = 'id';
-  // sb.select.name = 'name';
-  // sb.select.deviceId = 'device_id';
-  // sb.select.profileId = 'profile_id';
-  // sb.select.projectId = 'project_id';
-  // sb.select.createdAt = 'created_at';
-  // sb.select.path = 'path';
-  // sb.select.duration = 'duration';
-  // sb.select.city = 'city';
-  // sb.select.country = 'country';
-  // sb.select.os = 'os';
-  // sb.select.browser = 'browser';
+  sb.select.id = 'id';
+  sb.select.name = 'name';
+  sb.select.deviceId = 'device_id';
+  sb.select.profileId = 'profile_id';
+  sb.select.projectId = 'project_id';
+  sb.select.createdAt = 'created_at';
+  sb.select.path = 'path';
+  sb.select.duration = 'duration';
+  sb.select.city = 'city';
+  sb.select.country = 'country';
+  sb.select.os = 'os';
+  sb.select.browser = 'browser';
 
   if (profileId) {
     sb.where.deviceId = `device_id IN (SELECT device_id as did FROM ${TABLE_NAMES.events} WHERE profile_id = ${escape(profileId)} group by did)`;
diff --git a/packages/db/src/services/profile.service.ts b/packages/db/src/services/profile.service.ts
index 9caddc04..d260f84a 100644
--- a/packages/db/src/services/profile.service.ts
+++ b/packages/db/src/services/profile.service.ts
@@ -1,4 +1,4 @@
-import { uniq } from 'ramda';
+import { omit, uniq } from 'ramda';
 import { escape } from 'sqlstring';
 
 import { toObject } from '@openpanel/common';
@@ -59,6 +59,8 @@ export async function getProfileById(id: string, projectId: string) {
   return transformProfile(profile);
 }
 
+export const getProfileByIdCached = cacheable(getProfileById, 60 * 30);
+
 interface GetProfileListOptions {
   projectId: string;
   take: number;
@@ -122,6 +124,7 @@ export type IServiceProfile = Omit<
   createdAt: Date;
   isExternal: boolean;
   properties: Record<string, unknown> & {
+    region?: string;
     country?: string;
     city?: string;
     os?: string;
@@ -130,6 +133,10 @@ export type IServiceProfile = Omit<
     browser_version?: string;
     referrer_name?: string;
     referrer_type?: string;
+    device?: string;
+    brand?: string;
+    model?: string;
+    referrer?: string;
   };
 };
 
@@ -167,7 +174,10 @@ export function transformProfile({
     firstName: first_name,
     lastName: last_name,
     isExternal: profile.is_external,
-    properties: toObject(profile.properties),
+    properties: omit(
+      ['browserVersion', 'osVersion'],
+      toObject(profile.properties)
+    ),
     createdAt: new Date(created_at),
   };
 }
diff --git a/packages/trpc/src/routers/chart.helpers.ts b/packages/trpc/src/routers/chart.helpers.ts
index c6db1cee..33bfb58e 100644
--- a/packages/trpc/src/routers/chart.helpers.ts
+++ b/packages/trpc/src/routers/chart.helpers.ts
@@ -27,6 +27,7 @@ import {
   sum,
 } from '@openpanel/common';
 import type { ISerieDataItem } from '@openpanel/common';
+import { alphabetIds } from '@openpanel/constants';
 import {
   chQuery,
   createSqlBuilder,
@@ -523,7 +524,11 @@ export async function getChart(input: IChartInput) {
     uniq(pluck('name', input.events)).length !==
       pluck('name', input.events).length && series.length > 1;
   const final: FinalChart = {
-    series: series.map((serie) => {
+    series: series.map((serie, index) => {
+      const eventIndex = input.events.findIndex(
+        (event) => event.id === serie.event.id
+      );
+      const alphaId = alphabetIds[eventIndex];
       const previousSerie = previousSeries?.find(
         (prevSerie) => getSerieId(prevSerie) === getSerieId(serie)
       );
@@ -541,10 +546,7 @@ export async function getChart(input: IChartInput) {
       return {
         id: getSerieId(serie),
         names: includeEventName
-          ? [
-              `(${event.id || event.name}) ${serie.name[0]}`,
-              ...serie.name.slice(1),
-            ]
+          ? [`(${alphaId}) ${serie.name[0]}`, ...serie.name.slice(1)]
           : serie.name,
         event,
         metrics: {
diff --git a/packages/trpc/src/routers/event.ts b/packages/trpc/src/routers/event.ts
index 02be520f..1bb184b3 100644
--- a/packages/trpc/src/routers/event.ts
+++ b/packages/trpc/src/routers/event.ts
@@ -1,7 +1,16 @@
+import { TRPCError } from '@trpc/server';
 import { escape } from 'sqlstring';
 import { z } from 'zod';
 
-import { chQuery, convertClickhouseDateToJs, db } from '@openpanel/db';
+import {
+  chQuery,
+  convertClickhouseDateToJs,
+  db,
+  getEventList,
+  getEvents,
+  TABLE_NAMES,
+} from '@openpanel/db';
+import { zChartEventFilter } from '@openpanel/validation';
 
 import { getProjectAccessCached } from '../access';
 import { TRPCAccessError } from '../errors';
@@ -31,6 +40,72 @@ export const eventRouter = createTRPCRouter({
       });
     }),
 
+  byId: protectedProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        projectId: z.string(),
+      })
+    )
+    .query(async ({ input: { id, projectId } }) => {
+      const res = await getEvents(
+        `SELECT * FROM ${TABLE_NAMES.events} WHERE id = ${escape(id)} AND project_id = ${escape(projectId)};`
+      );
+
+      if (!res?.[0]) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Event not found',
+        });
+      }
+
+      return res[0];
+    }),
+
+  events: protectedProcedure
+    .input(
+      z.object({
+        projectId: z.string(),
+        cursor: z.number().optional(),
+        limit: z.number().default(8),
+        profileId: z.string().optional(),
+        take: z.number().default(50),
+        events: z.array(z.string()).optional(),
+        filters: z.array(zChartEventFilter).default([]),
+        startDate: z.date().optional(),
+        endDate: z.date().optional(),
+        meta: z.boolean().optional(),
+        profile: z.boolean().optional(),
+      })
+    )
+    .query(async ({ input }) => getEventList(input)),
+  conversions: publicProcedure
+    .input(
+      z.object({
+        projectId: z.string(),
+      })
+    )
+    .query(async ({ input: { projectId } }) => {
+      const conversions = await db.eventMeta.findMany({
+        where: {
+          projectId,
+          conversion: true,
+        },
+      });
+
+      if (conversions.length === 0) {
+        return [];
+      }
+
+      return getEvents(
+        `SELECT * FROM ${TABLE_NAMES.events} WHERE project_id = ${escape(projectId)} AND name IN (${conversions.map((c) => escape(c.name)).join(', ')}) ORDER BY created_at DESC LIMIT 20;`,
+        {
+          profile: true,
+          meta: true,
+        }
+      );
+    }),
+
   bots: publicProcedure
     .input(
       z.object({
diff --git a/packages/trpc/src/routers/profile.ts b/packages/trpc/src/routers/profile.ts
index 43b2045f..730064bd 100644
--- a/packages/trpc/src/routers/profile.ts
+++ b/packages/trpc/src/routers/profile.ts
@@ -2,7 +2,13 @@ import { flatten, map, pipe, prop, sort, uniq } from 'ramda';
 import { escape } from 'sqlstring';
 import { z } from 'zod';
 
-import { chQuery, createSqlBuilder } from '@openpanel/db';
+import {
+  chQuery,
+  createSqlBuilder,
+  getProfileList,
+  getProfiles,
+  TABLE_NAMES,
+} from '@openpanel/db';
 
 import { createTRPCRouter, protectedProcedure } from '../trpc';
 
@@ -28,6 +34,46 @@ export const profileRouter = createTRPCRouter({
       )(properties);
     }),
 
+  list: protectedProcedure
+    .input(
+      z.object({
+        projectId: z.string(),
+        cursor: z.number().optional(),
+        take: z.number().default(50),
+        // filters: z.array(zChartEventFilter).default([]),
+      })
+    )
+    .query(async ({ input: { projectId, cursor, take } }) => {
+      return getProfileList({ projectId, cursor, take });
+    }),
+
+  powerUsers: protectedProcedure
+    .input(
+      z.object({
+        projectId: z.string(),
+        cursor: z.number().optional(),
+        take: z.number().default(50),
+        // filters: z.array(zChartEventFilter).default([]),
+      })
+    )
+    .query(async ({ input: { projectId, cursor, take } }) => {
+      const res = await chQuery<{ profile_id: string; count: number }>(
+        `SELECT profile_id, count(*) as count from ${TABLE_NAMES.events} where profile_id != '' and project_id = ${escape(projectId)} group by profile_id order by count() DESC LIMIT ${take} ${cursor ? `OFFSET ${cursor * take}` : ''}`
+      );
+      const profiles = await getProfiles(res.map((r) => r.profile_id));
+      return (
+        res
+          .map((item) => {
+            return {
+              count: item.count,
+              ...(profiles.find((p) => p.id === item.profile_id)! ?? {}),
+            };
+          })
+          // Make sure we return actual profiles
+          .filter((item) => item.id)
+      );
+    }),
+
   values: protectedProcedure
     .input(
       z.object({
diff --git a/packages/validation/src/index.ts b/packages/validation/src/index.ts
index 7d06a15f..98921589 100644
--- a/packages/validation/src/index.ts
+++ b/packages/validation/src/index.ts
@@ -18,6 +18,13 @@ export function objectToZodEnums<K extends string>(
 
 export const mapKeys = objectToZodEnums;
 
+export const zChartEventFilter = z.object({
+  id: z.string().optional(),
+  name: z.string(),
+  operator: z.enum(objectToZodEnums(operators)),
+  value: z.array(z.string().or(z.number()).or(z.boolean()).or(z.null())),
+});
+
 export const zChartEvent = z.object({
   id: z.string().optional(),
   name: z.string(),
@@ -32,14 +39,7 @@ export const zChartEvent = z.object({
     'property_sum',
     'property_average',
   ]),
-  filters: z.array(
-    z.object({
-      id: z.string().optional(),
-      name: z.string(),
-      operator: z.enum(objectToZodEnums(operators)),
-      value: z.array(z.string().or(z.number()).or(z.boolean()).or(z.null())),
-    })
-  ),
+  filters: z.array(zChartEventFilter).default([]),
 });
 export const zChartBreakdown = z.object({
   id: z.string().optional(),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc8ad892..ae004544 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -323,6 +323,9 @@ importers:
       framer-motion:
         specifier: ^11.0.28
         version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+      geist:
+        specifier: ^1.3.1
+        version: 1.3.1(next@14.2.1)
       hamburger-react:
         specifier: ^2.5.0
         version: 2.5.0(react@18.2.0)
@@ -11688,6 +11691,14 @@ packages:
       wide-align: 1.1.5
     dev: false
 
+  /geist@1.3.1(next@14.2.1):
+    resolution: {integrity: sha512-Q4gC1pBVPN+D579pBaz0TRRnGA4p9UK6elDY/xizXdFk/g4EKR5g0I+4p/Kj6gM0SajDBZ/0FvDV9ey9ud7BWw==}
+    peerDependencies:
+      next: '>=13.2.0'
+    dependencies:
+      next: 14.2.1(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}