diff --git a/src/Exceptionless.Core/Utility/RandomEventGenerator.cs b/src/Exceptionless.Core/Utility/RandomEventGenerator.cs
index b9097e0c64..d552a360bc 100644
--- a/src/Exceptionless.Core/Utility/RandomEventGenerator.cs
+++ b/src/Exceptionless.Core/Utility/RandomEventGenerator.cs
@@ -134,13 +134,7 @@ private void PopulateEvent(Event ev)
             MachineName = MachineNames.Random()
         };
 
-        for (int i = 0; i < RandomData.GetInt(1, 3); i++)
-        {
-            string key = RandomData.GetWord();
-            while (ev.Data.ContainsKey(key) || key == Event.KnownDataKeys.Error)
-                key = RandomData.GetWord();
-            ev.Data.Add(key, RandomData.GetString());
-        }
+        AddSampleExtendedData(ev, identity);
 
         int tagCount = RandomData.GetInt(1, 3);
         for (int i = 0; i < tagCount; i++)
@@ -177,14 +171,7 @@ private Error GenerateError(int maxNesting = 3, int currentLevel = 0)
         if (RandomData.GetBool())
             error.Code = RandomData.GetInt(-234523453, 98690899).ToString();
 
-        error.Data = new DataDictionary();
-        for (int i = 0; i < RandomData.GetInt(1, 3); i++)
-        {
-            string key = RandomData.GetWord();
-            while (error.Data.ContainsKey(key) || key == Event.KnownDataKeys.Error)
-                key = RandomData.GetWord();
-            error.Data.Add(key, RandomData.GetString());
-        }
+        error.Data = GenerateErrorData();
 
         var stack = new StackFrameCollection();
         for (int i = 0; i < RandomData.GetInt(2, 8); i++)
@@ -205,14 +192,7 @@ private SimpleError GenerateSimpleError(int maxNesting = 3, int currentLevel = 0
             Type = ExceptionTypes.Random()
         };
 
-        error.Data = new DataDictionary();
-        for (int i = 0; i < RandomData.GetInt(1, 3); i++)
-        {
-            string key = RandomData.GetWord();
-            while (error.Data.ContainsKey(key) || key == Event.KnownDataKeys.Error)
-                key = RandomData.GetWord();
-            error.Data.Add(key, RandomData.GetString());
-        }
+        error.Data = GenerateErrorData();
 
         error.StackTrace = RandomData.GetString();
 
@@ -233,6 +213,94 @@ private static StackFrame GenerateStackFrame()
         };
     }
 
+    private static void AddSampleExtendedData(Event ev, string? identity)
+    {
+        var data = ev.Data ??= new DataDictionary();
+
+        data["Customer"] = new DataDictionary
+        {
+            ["id"] = $"cus_{RandomData.GetInt(100000, 999999)}",
+            ["email"] = identity ?? Identities.Random(),
+            ["plan"] = Plans.Random(),
+            ["region"] = Regions.Random(),
+            ["account_age_days"] = RandomData.GetInt(7, 1600)
+        };
+
+        data["Deployment"] = new DataDictionary
+        {
+            ["environment"] = Environments.Random(),
+            ["version"] = RandomData.GetVersion("2.0", "4.0"),
+            ["commit"] = ObjectId.GenerateNewId().ToString()[..7],
+            ["region"] = Regions.Random(),
+            ["instance"] = MachineNames.Random()
+        };
+
+        switch (ev.Type)
+        {
+            case Event.KnownTypes.FeatureUsage:
+                data["Feature Flags"] = new DataDictionary
+                {
+                    ["dashboard_refresh"] = RandomData.GetBool(),
+                    ["billing_portal"] = RandomData.GetBool(),
+                    ["new_events_view"] = RandomData.GetBool(),
+                    ["checkout_variant"] = FeatureVariants.Random()
+                };
+                break;
+            case Event.KnownTypes.Log:
+                data["Background Job"] = new DataDictionary
+                {
+                    ["id"] = $"job_{RandomData.GetInt(100000, 999999)}",
+                    ["name"] = JobNames.Random(),
+                    ["queue"] = Queues.Random(),
+                    ["attempt"] = RandomData.GetInt(1, 4),
+                    ["duration_ms"] = RandomData.GetInt(25, 15000)
+                };
+                break;
+            case Event.KnownTypes.NotFound:
+                data["Route Match"] = new DataDictionary
+                {
+                    ["requested_path"] = ev.Source,
+                    ["referer"] = PageNames.Random(),
+                    ["rule"] = "legacy-route-redirect",
+                    ["locale"] = Locales.Random(),
+                    ["bot"] = RandomData.GetBool(20)
+                };
+                break;
+            default:
+                data["Checkout"] = new DataDictionary
+                {
+                    ["order_id"] = $"ord_{RandomData.GetInt(100000, 999999)}",
+                    ["cart_id"] = $"cart_{RandomData.GetInt(100000, 999999)}",
+                    ["total"] = RandomData.GetInt(2499, 25999) / 100m,
+                    ["currency"] = "USD",
+                    ["item_count"] = RandomData.GetInt(1, 8),
+                    ["payment_provider"] = PaymentProviders.Random()
+                };
+                break;
+        }
+    }
+
+    private static DataDictionary GenerateErrorData()
+    {
+        return new DataDictionary
+        {
+            ["correlation_id"] = ObjectId.GenerateNewId().ToString(),
+            ["tenant"] = new DataDictionary
+            {
+                ["id"] = $"org_{RandomData.GetInt(10000, 99999)}",
+                ["plan"] = Plans.Random(),
+                ["region"] = Regions.Random()
+            },
+            ["operation"] = new DataDictionary
+            {
+                ["name"] = Operations.Random(),
+                ["attempt"] = RandomData.GetInt(1, 4),
+                ["elapsed_ms"] = RandomData.GetInt(20, 30000),
+                ["retryable"] = RandomData.GetBool()
+            }
+        };
+    }
+
     private static readonly List<string> Identities =
     [
         "eric@exceptionless.io",
@@ -242,6 +310,51 @@ private static StackFrame GenerateStackFrame()
         "user42@example.com"
     ];
 
+    private static readonly List<string> Plans =
+    [
+        "Free", "Team", "Business", "Enterprise"
+    ];
+
+    private static readonly List<string> Regions =
+    [
+        "us-east-1", "us-west-2", "eu-west-1", "ap-southeast-2"
+    ];
+
+    private static readonly List<string> Environments =
+    [
+        "Production", "Staging", "Preview"
+    ];
+
+    private static readonly List<string> FeatureVariants =
+    [
+        "control", "variant-a", "variant-b", "staff-only"
+    ];
+
+    private static readonly List<string> PaymentProviders =
+    [
+        "Stripe", "Braintree", "Adyen", "PayPal"
+    ];
+
+    private static readonly List<string> JobNames =
+    [
+        "ProcessEventBatch", "SendNotificationEmail", "SyncBillingUsage", "RebuildStackSummary"
+    ];
+
+    private static readonly List<string> Queues =
+    [
+        "events", "notifications", "billing", "maintenance"
+    ];
+
+    private static readonly List<string> Locales =
+    [
+        "en-US", "en-GB", "fr-FR", "de-DE"
+    ];
+
+    private static readonly List<string> Operations =
+    [
+        "LoadProjectSettings", "SubmitCheckout", "SearchEvents", "ProcessQueueMessage"
+    ];
+
     private static readonly List<string> MachineIpAddresses =
     [
         "127.34.36.89", "45.66.89.98", "10.12.18.193", "16.89.17.197", "43.10.99.234"
diff --git a/src/Exceptionless.Web/ClientApp/src/app.css b/src/Exceptionless.Web/ClientApp/src/app.css
index ed44232e36..2194bb62d5 100644
--- a/src/Exceptionless.Web/ClientApp/src/app.css
+++ b/src/Exceptionless.Web/ClientApp/src/app.css
@@ -7,7 +7,7 @@
     --background: hsl(0 0% 100%);
     --foreground: hsl(221 39% 11%);
 
-    --muted: hsl(210 20% 98%);
+    --muted: hsl(240 4.8% 95.9%);
     --muted-foreground: hsl(240 3.8% 46.1%);
 
     --popover: hsl(0 0% 100%);
@@ -22,7 +22,7 @@
     --primary: hsl(96 64% 46%);
     --primary-foreground: hsl(0 0% 10%);
 
-    --secondary: hsl(210 20% 98%);
+    --secondary: hsl(240 4.8% 95.9%);
     --secondary-foreground: hsl(240 5.9% 10%);
 
     --accent: hsl(220 14.29% 95.88%);
@@ -151,6 +151,14 @@
         @apply border-border;
     }
 
+    html {
+        overflow-y: scroll;
+    }
+
+    html:has([data-slot='sheet-content']) {
+        overflow-y: hidden;
+    }
+
     body {
         @apply bg-background text-foreground;
     }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/event-detail-sheet.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/event-detail-sheet.svelte
index 1e9d87205e..8e80de8012 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/event-detail-sheet.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/event-detail-sheet.svelte
@@ -32,7 +32,7 @@
 </script>
 
 <Sheet.Root onOpenChange={handleOpenChange} open={!!eventId}>
-    <Sheet.Content class="w-full overflow-y-auto sm:max-w-full! md:w-5/6!">
+    <Sheet.Content class="w-full overflow-y-scroll sm:max-w-full! md:w-5/6!">
         <Sheet.Header>
             <Sheet.Title
                 >Event Details <Button
@@ -45,7 +45,7 @@
         </Sheet.Header>
         <div class="px-4">
             {#if eventId}
-                <EventsOverview {filterChanged} id={eventId} {handleError} />
+                <EventsOverview {filterChanged} id={eventId} {handleError} onSessionFilter={onClose} />
             {/if}
         </div>
     </Sheet.Content>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte
index 0e093f0c52..8e824487fb 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte
@@ -5,6 +5,7 @@
 
     import DateTime from '$comp/formatters/date-time.svelte';
     import TimeAgo from '$comp/formatters/time-ago.svelte';
+    import { Button } from '$comp/ui/button';
     import { Skeleton } from '$comp/ui/skeleton';
     import * as Table from '$comp/ui/table';
     import * as Tabs from '$comp/ui/tabs';
@@ -14,6 +15,9 @@
     import { getOrganizationQuery } from '$features/organizations/api.svelte';
     import { getProjectQuery } from '$features/projects/api.svelte';
     import StackCard from '$features/stacks/components/stack-card.svelte';
+    import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+    import ChevronRight from '@lucide/svelte/icons/chevron-right';
+    import { onMount, tick } from 'svelte';
 
     import type { PersistentEvent } from '../models/index';
 
@@ -31,9 +35,10 @@
         filterChanged: (filter: IFilter) => void;
         handleError: (problem: ProblemDetails) => void;
         id: string;
+        onSessionFilter?: () => void;
     }
 
-    let { filterChanged, handleError, id }: Props = $props();
+    let { filterChanged, handleError, id, onSessionFilter }: Props = $props();
 
     function getTabs(event?: null | PersistentEvent, project?: ViewProject): TabType[] {
         if (!event) {
@@ -58,7 +63,7 @@
         }
 
         if (getSessionId(event)) {
-            tabs.push('Session Events');
+            tabs.push('Session');
         }
 
         if (!project) {
@@ -112,8 +117,60 @@
     type TabType = 'Environment' | 'Exception' | 'Extended Data' | 'Overview' | 'Request' | 'Trace Log' | string;
 
     let activeTab = $state<TabType>('Overview');
+    let areTabsScrollable = $state(false);
+    let canScrollTabsLeft = $state(false);
+    let canScrollTabsRight = $state(false);
+    let shouldRoundLastTab = $state(false);
+    let tabsListElement = $state<HTMLElement | null>(null);
     let tabs = $derived<TabType[]>(getTabs(eventQuery.data, projectQuery.data));
 
+    function updateTabScrollState(): void {
+        if (!tabsListElement) {
+            areTabsScrollable = false;
+            canScrollTabsLeft = false;
+            canScrollTabsRight = false;
+            shouldRoundLastTab = false;
+            return;
+        }
+
+        const maxScrollLeft = tabsListElement.scrollWidth - tabsListElement.clientWidth;
+        const lastTabElement = tabsListElement.querySelector('[data-slot="tabs-trigger"]:last-child');
+        areTabsScrollable = maxScrollLeft > 1;
+        canScrollTabsLeft = tabsListElement.scrollLeft > 1;
+        canScrollTabsRight = tabsListElement.scrollLeft < maxScrollLeft - 1;
+        shouldRoundLastTab = areTabsScrollable || (lastTabElement?.getBoundingClientRect().right ?? 0) >= tabsListElement.getBoundingClientRect().right - 1;
+    }
+
+    function scrollTabs(direction: -1 | 1): void {
+        if (!tabsListElement) {
+            return;
+        }
+
+        tabsListElement.scrollBy({
+            behavior: 'smooth',
+            left: direction * Math.max(tabsListElement.clientWidth * 0.75, 160)
+        });
+    }
+
+    async function refreshTabScrollState(currentTabs: TabType[]): Promise<void> {
+        await tick();
+        if (currentTabs !== tabs) {
+            return;
+        }
+
+        updateTabScrollState();
+    }
+
+    async function scrollActiveTabIntoView(currentTab: TabType): Promise<void> {
+        await tick();
+        if (currentTab !== activeTab) {
+            return;
+        }
+
+        tabsListElement?.querySelector('[data-state="active"]')?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        updateTabScrollState();
+    }
+
     function onPromoted(title: string): void {
         activeTab = title;
     }
@@ -131,6 +188,23 @@
             handleError(eventQuery.error);
         }
     });
+
+    $effect(() => {
+        void refreshTabScrollState(tabs);
+    });
+
+    $effect(() => {
+        void scrollActiveTabIntoView(activeTab);
+    });
+
+    onMount(() => {
+        updateTabScrollState();
+        window.addEventListener('resize', updateTabScrollState);
+
+        return () => {
+            window.removeEventListener('resize', updateTabScrollState);
+        };
+    });
 </script>
 
 <StackCard {filterChanged} id={eventQuery.data?.stack_id}></StackCard>
@@ -167,11 +241,53 @@
 
 {#if eventQuery.isSuccess}
     <Tabs.Root class="mt-4 mb-4" value={activeTab}>
-        <Tabs.List class="w-full justify-normal overflow-scroll">
-            {#each tabs as tab (tab)}
-                <Tabs.Trigger value={tab}>{tab}</Tabs.Trigger>
-            {/each}
-        </Tabs.List>
+        <div class="flex min-w-0 items-center gap-1">
+            {#if areTabsScrollable}
+                <Button
+                    aria-label="Scroll tabs left"
+                    class="flex-none"
+                    disabled={!canScrollTabsLeft}
+                    onclick={() => scrollTabs(-1)}
+                    size="icon-sm"
+                    title="Scroll tabs left"
+                    variant="ghost"
+                >
+                    <ChevronLeft />
+                </Button>
+            {/if}
+
+            <Tabs.List
+                bind:ref={tabsListElement}
+                class="divide-border bg-background h-8 min-w-0 flex-1 justify-normal divide-x overflow-x-auto overflow-y-hidden rounded-lg border p-0 shadow-xs [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                onscroll={updateTabScrollState}
+            >
+                {#each tabs as tab (tab)}
+                    <Tabs.Trigger
+                        class={[
+                            'data-[state=active]:bg-muted flex-none rounded-none border-0 px-4 shadow-none first:rounded-l-lg data-[state=active]:shadow-none',
+                            shouldRoundLastTab && 'last:rounded-r-lg'
+                        ]}
+                        value={tab}
+                    >
+                        {tab}
+                    </Tabs.Trigger>
+                {/each}
+            </Tabs.List>
+
+            {#if areTabsScrollable}
+                <Button
+                    aria-label="Scroll tabs right"
+                    class="flex-none"
+                    disabled={!canScrollTabsRight}
+                    onclick={() => scrollTabs(1)}
+                    size="icon-sm"
+                    title="Scroll tabs right"
+                    variant="ghost"
+                >
+                    <ChevronRight />
+                </Button>
+            {/if}
+        </div>
 
         {#each tabs as tab (tab)}
             <Tabs.Content value={tab}>
@@ -185,8 +301,8 @@
                     <Request {filterChanged} event={eventQuery.data}></Request>
                 {:else if tab === 'Trace Log'}
                     <TraceLog logs={eventQuery.data.data?.['@trace']}></TraceLog>
-                {:else if tab === 'Session Events'}
-                    <SessionEvents event={eventQuery.data} {hasPremiumFeatures}></SessionEvents>
+                {:else if tab === 'Session'}
+                    <SessionEvents event={eventQuery.data} {hasPremiumFeatures} {onSessionFilter}></SessionEvents>
                 {:else if tab === 'Extended Data'}
                     <ExtendedData event={eventQuery.data} project={projectQuery.data} promoted={onPromoted}></ExtendedData>
                 {:else}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/session-events.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/session-events.svelte
index ebbd97c2d0..b59cb11a94 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/session-events.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/session-events.svelte
@@ -1,14 +1,21 @@
 <script lang="ts">
     import type { PersistentEvent } from '$features/events/models';
 
+    import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import TimeAgo from '$comp/formatters/time-ago.svelte';
     import { H3 } from '$comp/typography';
     import * as Alert from '$comp/ui/alert';
+    import { Button } from '$comp/ui/button';
     import { Skeleton } from '$comp/ui/skeleton';
     import * as Table from '$comp/ui/table';
     import { getSessionEventsQuery } from '$features/events/api.svelte';
+    import { SessionFilter } from '$features/events/components/filters';
+    import { buildFilterCacheKey, toFilter, updateFilterCache } from '$features/events/components/filters/helpers.svelte';
     import Summary from '$features/events/components/summary/summary.svelte';
     import { getSessionId } from '$features/events/utils/index';
+    import { organization } from '$features/organizations/context.svelte';
+    import FilterIcon from '@lucide/svelte/icons/filter';
     import InfoIcon from '@lucide/svelte/icons/info';
 
     import SessionEventDuration from '../session-event-duration.svelte';
@@ -16,13 +23,24 @@
     interface Props {
         event: PersistentEvent;
         hasPremiumFeatures?: boolean;
+        onSessionFilter?: () => void;
         time?: string;
     }
 
-    let { event, hasPremiumFeatures = false, time }: Props = $props();
+    let { event, hasPremiumFeatures = false, onSessionFilter, time }: Props = $props();
 
     const sessionId = $derived(getSessionId(event));
     const isSessionStart = $derived(event.type === 'session');
+    const eventsPath = $derived(resolve('/(app)'));
+    const sessionEventsHref = $derived.by(() => {
+        const filter = getSessionFilter();
+        if (!filter) {
+            return undefined;
+        }
+
+        const query = new URLSearchParams({ filter: filter.toFilter(), time: '' });
+        return `${eventsPath}?${query.toString()}`;
+    });
 
     const userInfo = $derived(event.data?.['@user']);
     const userIdentity = $derived(userInfo?.identity);
@@ -44,6 +62,42 @@
             }
         }
     });
+
+    function getEventHref(eventId: string): string {
+        return resolve('/(app)/event/[eventId]', { eventId });
+    }
+
+    function getSessionFilter(): SessionFilter | undefined {
+        return sessionId ? new SessionFilter(sessionId) : undefined;
+    }
+
+    function prepareSessionEventsFilter(): void {
+        const filter = getSessionFilter();
+        if (!filter) {
+            return;
+        }
+
+        const filterQuery = toFilter([filter]);
+        updateFilterCache(buildFilterCacheKey(organization.current, eventsPath, filterQuery), [filter]);
+    }
+
+    function handleSessionFilterClick(): void {
+        prepareSessionEventsFilter();
+        onSessionFilter?.();
+    }
+
+    async function openSessionEvent(eventId: string): Promise<void> {
+        await goto(getEventHref(eventId));
+    }
+
+    function handleSessionEventKeydown(keyboardEvent: KeyboardEvent, eventId: string): void {
+        if (keyboardEvent.key !== 'Enter' && keyboardEvent.key !== ' ') {
+            return;
+        }
+
+        keyboardEvent.preventDefault();
+        void openSessionEvent(eventId);
+    }
 </script>
 
 {#if !hasPremiumFeatures}
@@ -83,7 +137,20 @@
         </Table.Root>
     {/if}
 
-    <H3 class="mb-2">Session Events</H3>
+    <div class="mb-2 flex items-center justify-between gap-2">
+        <H3>Session Events</H3>
+        <Button
+            disabled={!sessionEventsHref}
+            href={sessionEventsHref}
+            onclick={handleSessionFilterClick}
+            size="sm"
+            title="Open events filtered to this session"
+            variant="outline"
+        >
+            <FilterIcon data-icon="inline-start" />
+            Filter
+        </Button>
+    </div>
 
     {#if sessionEventsQuery.isPending}
         <div class="space-y-2">
@@ -106,7 +173,15 @@
             </Table.Header>
             <Table.Body>
                 {#each sessionEventsQuery.data ?? [] as sessionEvent (sessionEvent.id)}
-                    <Table.Row class="hover:bg-muted/50 cursor-pointer">
+                    <Table.Row
+                        aria-label={`Open event ${sessionEvent.id}`}
+                        class="hover:bg-muted/50 focus-visible:ring-ring/50 focus-visible:outline-ring cursor-pointer focus-visible:ring-[3px] focus-visible:outline-1"
+                        onclick={() => openSessionEvent(sessionEvent.id)}
+                        onkeydown={(keyboardEvent) => handleSessionEventKeydown(keyboardEvent, sessionEvent.id)}
+                        role="link"
+                        tabindex={0}
+                        title="Open event details"
+                    >
                         <Table.Cell>
                             <Summary summary={sessionEvent} showType={true} showStatus={false} />
                         </Table.Cell>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts
index 5748b9f3c2..63bf2914da 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts
@@ -449,9 +449,13 @@ export function postPromotedTab(request: PostPromotedTabRequest) {
     return createMutation<boolean, ProblemDetails, PostPromotedTabParams>(() => ({
         mutationFn: async (params: PostPromotedTabParams) => {
             const client = useFetchClient();
-            const response = await client.post(`projects/${request.route.id}/promotedtabs`, undefined, {
-                params: { ...params }
-            });
+            const response = await client.postJSON(
+                `projects/${request.route.id}/promotedtabs`,
+                {},
+                {
+                    params: { ...params }
+                }
+            );
 
             return response.ok;
         },
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/navigation/nav-container.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/navigation/nav-container.svelte
index d295f2bb6d..23d5aa1dac 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/navigation/nav-container.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/navigation/nav-container.svelte
@@ -4,12 +4,13 @@
 
     interface Props extends HTMLAttributes<HTMLElement> {
         children: Snippet;
+        orientation?: 'horizontal' | 'responsive';
     }
 
-    let { children, class: className, ...props }: Props = $props();
+    let { children, class: className, orientation = 'responsive', ...props }: Props = $props();
     // TODO: Look into having this use the sidbar menu items and a tab control on mobile.
 </script>
 
-<nav class={['flex space-x-2 lg:flex-col lg:space-y-1 lg:space-x-0', className]} {...props}>
+<nav class={['flex', orientation === 'horizontal' ? 'gap-2 overflow-x-auto pb-1' : 'space-x-2 lg:flex-col lg:space-y-1 lg:space-x-0', className]} {...props}>
     {@render children()}
 </nav>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 261a5b08bd..afd5ee85d6 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -8,6 +8,7 @@
 		ref = $bindable(null),
 		sideOffset = 4,
 		align = "start",
+		preventScroll = false,
 		portalProps,
 		class: className,
 		...restProps
@@ -22,6 +23,7 @@
 		data-slot="dropdown-menu-content"
 		{sideOffset}
 		{align}
+		{preventScroll}
 		class={cn(
 			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
 			className
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/select/select-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/select/select-content.svelte
index bb1e2ac20f..272e93c55d 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/select/select-content.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/select/select-content.svelte
@@ -13,7 +13,7 @@
 		sideOffset = 4,
 		portalProps,
 		children,
-		preventScroll = true,
+		preventScroll = false,
 		...restProps
 	}: WithoutChild<SelectPrimitive.ContentProps> & {
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/sidebar-nav.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/sidebar-nav.svelte
index b6cb0ef6d4..3d2f820f2b 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/sidebar-nav.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/sidebar-nav.svelte
@@ -6,13 +6,14 @@
     import type { NavigationItem } from '../../routes.svelte';
 
     interface Props extends HTMLAttributes<HTMLElement> {
+        orientation?: 'horizontal' | 'responsive';
         routes: NavigationItem[];
     }
 
-    let { routes, ...props }: Props = $props();
+    let { orientation, routes, ...props }: Props = $props();
 </script>
 
-<Navigation.Container {...props}>
+<Navigation.Container {orientation} {...props}>
     {#each routes as route (route.href)}
         <Navigation.Item href={route.href} title={route.title} />
     {/each}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
index 1fa6da40db..dac0ed7ad9 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -73,6 +73,10 @@
         return buildFilterCacheKey(organization.current, page.url.pathname, filter);
     }
 
+    function getQueryTime(): null | string {
+        return page.url.searchParams.has('time') && page.url.searchParams.get('time') === '' ? null : queryParams.time;
+    }
+
     updateFilterCache(filterCacheKey(DEFAULT_PARAMS.filter), DEFAULT_FILTERS);
     const queryParams = queryParamsState({
         default: DEFAULT_PARAMS,
@@ -107,11 +111,11 @@
         { lazy: true }
     );
 
-    let filters = $state(applyTimeFilter(getFiltersFromCache(filterCacheKey(queryParams.filter), queryParams.filter), queryParams.time));
+    let filters = $state(applyTimeFilter(getFiltersFromCache(filterCacheKey(queryParams.filter), queryParams.filter), getQueryTime()));
     watch(
-        [() => queryParams.filter, () => queryParams.time, () => filterCacheVersionNumber()],
-        ([filter, time]) => {
-            filters = applyTimeFilter(getFiltersFromCache(filterCacheKey(filter), filter), time);
+        [() => queryParams.filter, () => queryParams.time, () => page.url.search, () => filterCacheVersionNumber()],
+        ([filter]) => {
+            filters = applyTimeFilter(getFiltersFromCache(filterCacheKey(filter), filter), getQueryTime());
         },
         { lazy: true }
     );
@@ -154,10 +158,10 @@
         mode: 'summary',
         offset: DEFAULT_OFFSET,
         get time() {
-            return queryParams.time!;
+            return getQueryTime() ?? undefined;
         },
         set time(value) {
-            queryParams.time = value;
+            queryParams.time = value ?? null;
         }
     });
 
@@ -251,7 +255,7 @@
     });
 
     const chartData = $derived(() => {
-        const timeRange = parseDateMathRange(queryParams.time || undefined);
+        const timeRange = parseDateMathRange(getQueryTime() || undefined);
         const buildZeroFilledSeries = () =>
             fillDateSeries(timeRange.start, timeRange.end, (date: Date) => ({
                 date,
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/+layout.svelte
index 6658067b83..56dcecded7 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/+layout.svelte
@@ -2,16 +2,13 @@
     import { goto } from '$app/navigation';
     import { resolve } from '$app/paths';
     import { page } from '$app/state';
-    import { H3, Muted } from '$comp/typography';
-    import { Separator } from '$comp/ui/separator';
+    import { A, H3 } from '$comp/typography';
     import { getOrganizationQuery } from '$features/organizations/api.svelte';
     import OrganizationAdminActionsDropdownMenu from '$features/organizations/components/organization-admin-actions-dropdown-menu.svelte';
     import { organization } from '$features/organizations/context.svelte';
-    import * as SplitLayout from '$features/shared/components/layouts/split-layout';
     import GlobalUser from '$features/users/components/global-user.svelte';
     import { toast } from 'svelte-sonner';
 
-    import SidebarNav from '../../(components)/sidebar-nav.svelte';
     import { routes } from './routes.svelte';
 
     let { children } = $props();
@@ -26,6 +23,7 @@
     });
 
     const filteredRoutes = $derived(routes().filter((route) => route.group === 'Organization Settings'));
+    const currentPath = $derived(page.url.pathname);
 
     $effect(() => {
         if (organizationQuery.isError) {
@@ -44,15 +42,12 @@
 <div>
     <div class="flex items-start justify-between">
         <div class="flex flex-col gap-1">
-            <H3 class="flex items-center gap-1">
+            <H3 class="flex flex-wrap items-center gap-x-1">
                 {#if organizationQuery.isSuccess}
-                    <div class="max-w-[70%] overflow-hidden" title={organizationQuery.data.name}>
-                        <span class="block truncate">{organizationQuery.data.name}</span>
-                    </div>
+                    <span>{organizationQuery.data.name}</span>
                 {/if}
                 <span class="shrink-0">Settings</span>
             </H3>
-            <Muted>Manage your organization's settings, users, and billing information.</Muted>
         </div>
         {#if organizationQuery.isSuccess}
             <GlobalUser>
@@ -60,13 +55,22 @@
             </GlobalUser>
         {/if}
     </div>
-    <Separator class="mx-6 my-6 w-auto" />
-    <SplitLayout.Root>
-        <SplitLayout.Sidebar>
-            <SidebarNav routes={filteredRoutes} />
-        </SplitLayout.Sidebar>
-        <SplitLayout.Content>
-            {@render children()}
-        </SplitLayout.Content>
-    </SplitLayout.Root>
+    <div class="mt-6 space-y-6">
+        <nav class="bg-muted flex w-full flex-row flex-nowrap gap-1 overflow-x-auto rounded-lg p-1">
+            {#each filteredRoutes as route (route.href)}
+                {@const isActive = currentPath === route.href || currentPath.startsWith(route.href + '/')}
+                <A
+                    variant="ghost"
+                    href={route.href}
+                    data-sveltekit-noscroll
+                    class="shrink-0 rounded-md px-3 py-1.5 text-sm font-medium transition-colors {isActive
+                        ? 'bg-background text-foreground shadow-xs'
+                        : 'text-muted-foreground hover:bg-muted hover:text-foreground'}"
+                >
+                    {route.title}
+                </A>
+            {/each}
+        </nav>
+        {@render children()}
+    </div>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte
index 770685917e..da1aa1f9f0 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte
@@ -2,10 +2,9 @@
     import { resolve } from '$app/paths';
     import ErrorMessage from '$comp/error-message.svelte';
     import DateTime from '$comp/formatters/date-time.svelte';
-    import { A, H4 } from '$comp/typography';
+    import { A } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
-    import { Separator } from '$comp/ui/separator';
     import { Skeleton } from '$comp/ui/skeleton';
     import * as Table from '$comp/ui/table';
     import { env } from '$env/dynamic/public';
@@ -64,11 +63,6 @@
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H4>Billing</H4>
-    </div>
-    <Separator />
-
     {#if organizationQuery.isLoading}
         <div class="space-y-4">
             <Skeleton class="h-12 w-3/4" />
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/features/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/features/+page.svelte
index 5bccd12d1b..0c8fea9dcd 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/features/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/features/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import { page } from '$app/state';
     import ErrorMessage from '$comp/error-message.svelte';
-    import { H3, Muted } from '$comp/typography';
-    import { Separator } from '$comp/ui/separator';
+    import { Muted } from '$comp/typography';
     import { Skeleton } from '$comp/ui/skeleton';
     import { Switch } from '$comp/ui/switch';
     import { getOrganizationQuery, removeOrganizationFeature, setOrganizationFeature } from '$features/organizations/api.svelte';
@@ -74,11 +73,7 @@
     <ErrorMessage message="You do not have permission to manage features." />
 {:else}
     <div class="space-y-6">
-        <div>
-            <H3>Features</H3>
-            <Muted>Enable or disable features for this organization.</Muted>
-        </div>
-        <Separator />
+        <Muted>Enable or disable features for this organization</Muted>
 
         <div class="space-y-3">
             {#if organizationQuery.isLoading}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte
index a8b7a126b7..834876d0f1 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte
@@ -3,12 +3,11 @@
     import { resolve } from '$app/paths';
     import { page } from '$app/state';
     import ErrorMessage from '$comp/error-message.svelte';
-    import { H3, Muted } from '$comp/typography';
+    import { Muted } from '$comp/typography';
     import { Button, buttonVariants } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import * as Field from '$comp/ui/field';
     import { Input } from '$comp/ui/input';
-    import { Separator } from '$comp/ui/separator';
     import { Spinner } from '$comp/ui/spinner';
     import { deleteOrganization, getOrganizationQuery, patchOrganization } from '$features/organizations/api.svelte';
     import RemoveOrganizationDialog from '$features/organizations/components/dialogs/remove-organization-dialog.svelte';
@@ -92,11 +91,7 @@
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H3>General</H3>
-        <Muted>Manage your organization name.</Muted>
-    </div>
-    <Separator />
+    <Muted>General organization settings</Muted>
 
     <form
         onsubmit={(e) => {
@@ -141,7 +136,8 @@
 
         <DropdownMenu.Root>
             <DropdownMenu.Trigger class={buttonVariants({ variant: 'destructive' })}>
-                <X class="size-4" />
+                <X class="mr-2 size-4" />
+                <span>Delete</span>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="end" class="w-56">
                 <DropdownMenu.Group>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/projects/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/projects/+page.svelte
index ca3b257d8a..154ad6ad56 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/projects/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/projects/+page.svelte
@@ -4,10 +4,9 @@
     import { goto } from '$app/navigation';
     import { resolve } from '$app/paths';
     import DataTableViewOptions from '$comp/data-table/data-table-view-options.svelte';
-    import { H3, Muted } from '$comp/typography';
+    import { Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import { Input } from '$comp/ui/input';
-    import { Separator } from '$comp/ui/separator';
     import { organization } from '$features/organizations/context.svelte';
     import { type GetOrganizationProjectsParams, getOrganizationProjectsQuery } from '$features/projects/api.svelte';
     import { getTableOptions } from '$features/projects/components/table/options.svelte';
@@ -81,23 +80,15 @@
 </script>
 
 <div class="flex flex-col gap-4">
-    <div class="flex flex-wrap items-start justify-between gap-4">
-        <div class="flex flex-col gap-1">
-            <H3>Projects</H3>
-            <Muted>View and manage your projects. Click on a project to view its details.</Muted>
-        </div>
-        <div class="flex items-center gap-2">
-            <Button size="icon" onclick={addProject} title="Add Project">
-                <Plus class="size-4" aria-hidden="true" />
-                <span class="sr-only">Add Project</span>
-            </Button>
-        </div>
-    </div>
-    <Separator />
+    <Muted>View and manage your projects. Click on a project to view its details</Muted>
     <ProjectsDataTable bind:limit={projectsQueryParameters.limit!} isLoading={projectsQuery.isLoading} {rowClick} {rowHref} {table}>
         {#snippet toolbarChildren()}
             <Input type="search" placeholder="Filter projects..." class="flex-1" bind:value={projectsQueryParameters.filter} />
             <DataTableViewOptions size="icon-lg" {table} />
+            <Button size="icon-lg" onclick={addProject} title="Add Project">
+                <Plus class="size-4" aria-hidden="true" />
+                <span class="sr-only">Add Project</span>
+            </Button>
         {/snippet}
     </ProjectsDataTable>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte
index 1a9c6e98a6..50476693bc 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte
@@ -3,10 +3,9 @@
     import ErrorMessage from '$comp/error-message.svelte';
     import Number from '$comp/formatters/number.svelte';
     import TimeAgo from '$comp/formatters/time-ago.svelte';
-    import { H4, Muted, Small } from '$comp/typography';
+    import { Muted, Small } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import * as Chart from '$comp/ui/chart/index';
-    import { Separator } from '$comp/ui/separator';
     import { Skeleton } from '$comp/ui/skeleton';
     import { env } from '$env/dynamic/public';
     import { ChangePlanDialog } from '$features/billing';
@@ -73,11 +72,7 @@
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H4>Monthly Usage</H4>
-        <Muted>View your historical usage.</Muted>
-    </div>
-    <Separator />
+    <Muted>View your historical usage</Muted>
 
     {#if organizationQuery.isLoading}
         <div class="space-y-4">
@@ -88,7 +83,7 @@
     {:else if organizationQuery.error}
         <ErrorMessage message="Unable to load usage data." />
     {:else if !hasMonthlyUsage}
-        <Muted>Monthly usage is not available for this organization. Please contact support for more information.</Muted>
+        <Muted>Monthly usage is not available for this organization. Please contact support for more information</Muted>
     {:else}
         <div class="space-y-6">
             <div class="bg-muted/20 rounded-md border p-4">
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte
index d0d86ec26f..306f1ce1ae 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import type { ViewUser } from '$features/users/models';
 
-    import { H3, Muted } from '$comp/typography';
+    import DataTableViewOptions from '$comp/data-table/data-table-view-options.svelte';
+    import { Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
-    import { Separator } from '$comp/ui/separator';
     import { showBillingDialogOnUpgradeProblem } from '$features/billing';
     import { addOrganizationUser } from '$features/organizations/api.svelte';
     import { organization } from '$features/organizations/context.svelte';
@@ -92,19 +92,18 @@
 </script>
 
 <div class="space-y-6">
-    <div class="flex items-start justify-between">
-        <div>
-            <H3>Organization Users</H3>
-            <Muted>Manage users for this organization.</Muted>
-        </div>
-        <Button size="icon" onclick={handleInviteUser} title="Invite User" class="shrink-0">
-            <Plus class="size-4" aria-hidden="true" />
-            <span class="sr-only">Invite User</span>
-        </Button>
-    </div>
-    <Separator />
-
-    <UsersDataTable bind:limit={usersQueryParameters.limit!} isLoading={usersQuery.isLoading} {table} />
+    <Muted>Manage users for this organization</Muted>
+
+    <UsersDataTable bind:limit={usersQueryParameters.limit!} isLoading={usersQuery.isLoading} {table}>
+        {#snippet toolbarChildren()}
+            <div class="flex-1"></div>
+            <DataTableViewOptions size="icon-lg" {table} />
+            <Button size="icon-lg" onclick={handleInviteUser} title="Invite User">
+                <Plus class="size-4" aria-hidden="true" />
+                <span class="sr-only">Invite User</span>
+            </Button>
+        {/snippet}
+    </UsersDataTable>
 </div>
 
 <InviteUserDialog bind:open={showInviteDialog} {inviteUser} />
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/list/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/list/+page.svelte
index 97c6fd804c..285bcdb52a 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/list/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/list/+page.svelte
@@ -4,6 +4,7 @@
 
     import { goto } from '$app/navigation';
     import { resolve } from '$app/paths';
+    import DataTableViewOptions from '$comp/data-table/data-table-view-options.svelte';
     import { H3, Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import { type GetOrganizationsParams, getOrganizationsQuery } from '$features/organizations/api.svelte';
@@ -50,12 +51,15 @@
             <H3>My Organizations</H3>
             <Muted>View and manage your organizations. Click on an organization to view its details.</Muted>
         </div>
-        <div class="flex items-center gap-2">
-            <Button size="icon" onclick={addOrganization} title="Add Organization">
+    </div>
+    <OrganizationsDataTable isLoading={organizationsQuery.isLoading} {rowClick} {rowHref} {table}>
+        {#snippet toolbarChildren()}
+            <div class="flex-1"></div>
+            <DataTableViewOptions size="icon-lg" {table} />
+            <Button size="icon-lg" onclick={addOrganization} title="Add Organization">
                 <Plus class="size-4" aria-hidden="true" />
                 <span class="sr-only">Add Organization</span>
             </Button>
-        </div>
-    </div>
-    <OrganizationsDataTable isLoading={organizationsQuery.isLoading} {rowClick} {rowHref} {table} />
+        {/snippet}
+    </OrganizationsDataTable>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte
index bddcfd5add..80b5928872 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte
@@ -2,19 +2,16 @@
     import { goto } from '$app/navigation';
     import { resolve } from '$app/paths';
     import { page } from '$app/state';
-    import { H3, Muted } from '$comp/typography';
+    import { A, H3 } from '$comp/typography';
     import { Button } from '$comp/ui/button';
-    import { Separator } from '$comp/ui/separator';
     import { getOrganizationQuery } from '$features/organizations/api.svelte';
     import OrganizationAdminActionsDropdownMenu from '$features/organizations/components/organization-admin-actions-dropdown-menu.svelte';
     import { organization } from '$features/organizations/context.svelte';
     import { getProjectQuery } from '$features/projects/api.svelte';
-    import * as SplitLayout from '$features/shared/components/layouts/split-layout';
     import GlobalUser from '$features/users/components/global-user.svelte';
     import NotificationSettings from '@lucide/svelte/icons/mail';
     import { toast } from 'svelte-sonner';
 
-    import SidebarNav from '../../(components)/sidebar-nav.svelte';
     import { routes } from './routes.svelte';
 
     let { children } = $props();
@@ -35,6 +32,7 @@
             }
         }
     });
+    const currentPath = $derived(page.url.pathname);
 
     $effect(() => {
         if (projectQuery.isError) {
@@ -60,15 +58,12 @@
 <div>
     <div class="flex flex-wrap items-start justify-between gap-4">
         <div class="flex flex-col gap-1">
-            <H3 class="flex items-center gap-1">
+            <H3 class="flex flex-wrap items-center gap-x-1">
                 {#if projectQuery.isSuccess}
-                    <div class="max-w-[70%] overflow-hidden" title={projectQuery.data.name}>
-                        <span class="block truncate">{projectQuery.data.name}</span>
-                    </div>
+                    <span>{projectQuery.data.name}</span>
                 {/if}
                 <span class="shrink-0">Settings</span>
             </H3>
-            <Muted>Manage your project settings and integrations.</Muted>
         </div>
         <div class="flex items-center gap-2">
             {#if organizationQuery.isSuccess}
@@ -81,13 +76,22 @@
             </Button>
         </div>
     </div>
-    <Separator class="mx-6 my-6 w-auto" />
-    <SplitLayout.Root>
-        <SplitLayout.Sidebar>
-            <SidebarNav routes={routes()} />
-        </SplitLayout.Sidebar>
-        <SplitLayout.Content>
-            {@render children()}
-        </SplitLayout.Content>
-    </SplitLayout.Root>
+    <div class="mt-6 space-y-6">
+        <nav class="bg-muted flex w-full flex-row flex-nowrap gap-1 overflow-x-auto rounded-lg p-1">
+            {#each routes() as route (route.href)}
+                {@const isActive = currentPath === route.href || currentPath.startsWith(route.href + '/')}
+                <A
+                    variant="ghost"
+                    href={route.href}
+                    data-sveltekit-noscroll
+                    class="shrink-0 rounded-md px-3 py-1.5 text-sm font-medium transition-colors {isActive
+                        ? 'bg-background text-foreground shadow-xs'
+                        : 'text-muted-foreground hover:bg-muted hover:text-foreground'}"
+                >
+                    {route.title}
+                </A>
+            {/each}
+        </nav>
+        {@render children()}
+    </div>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/api-keys/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/api-keys/+page.svelte
index 97e3b1cb8d..0d1e1bcf4a 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/api-keys/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/api-keys/+page.svelte
@@ -2,9 +2,9 @@
     import type { NewToken, ViewToken } from '$features/tokens/models';
 
     import { page } from '$app/state';
-    import { H3, Muted } from '$comp/typography';
+    import DataTableViewOptions from '$comp/data-table/data-table-view-options.svelte';
+    import { Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
-    import { Separator } from '$comp/ui/separator';
     import { organization } from '$features/organizations/context.svelte';
     import { DEFAULT_LIMIT } from '$features/shared/api/api.svelte';
     import { type GetProjectTokensParams, getProjectTokensQuery, postProjectToken } from '$features/tokens/api.svelte';
@@ -79,17 +79,16 @@
 </script>
 
 <div class="space-y-6">
-    <div class="flex items-start justify-between">
-        <div>
-            <H3>API Keys</H3>
-            <Muted>Create and manage API keys for authenticating your applications with Exceptionless.</Muted>
-        </div>
-        <Button size="icon" onclick={addApiKey} title="Add API Key" class="shrink-0">
-            <Plus class="size-4" aria-hidden="true" />
-            <span class="sr-only">Add API Key</span>
-        </Button>
-    </div>
-    <Separator />
+    <Muted>Create and manage API keys for authenticating your applications with Exceptionless</Muted>
 
-    <TokensDataTable bind:limit={tokensQueryParameters.limit!} isLoading={tokensQuery.isLoading} {table} />
+    <TokensDataTable bind:limit={tokensQueryParameters.limit!} isLoading={tokensQuery.isLoading} {table}>
+        {#snippet toolbarChildren()}
+            <div class="flex-1"></div>
+            <DataTableViewOptions size="icon-lg" {table} />
+            <Button size="icon-lg" onclick={addApiKey} title="Add API Key">
+                <Plus class="size-4" aria-hidden="true" />
+                <span class="sr-only">Add API Key</span>
+            </Button>
+        {/snippet}
+    </TokensDataTable>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configuration-values/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configuration-values/+page.svelte
index 8a2faa285d..d66bfc50c7 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configuration-values/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configuration-values/+page.svelte
@@ -2,9 +2,9 @@
     import type { ClientConfigurationSetting } from '$features/projects/models';
 
     import { page } from '$app/state';
-    import { A, H3, Muted } from '$comp/typography';
+    import DataTableViewOptions from '$comp/data-table/data-table-view-options.svelte';
+    import { A, Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
-    import { Separator } from '$comp/ui/separator';
     import { getProjectConfig, postProjectConfig } from '$features/projects/api.svelte';
     import AddProjectConfigDialog from '$features/projects/components/dialogs/add-project-config-dialog.svelte';
     import { getTableOptions } from '$features/projects/components/table/config-options.svelte';
@@ -74,23 +74,21 @@
 </script>
 
 <div class="space-y-6">
-    <div class="flex items-start justify-between">
-        <div>
-            <H3>Configuration Values</H3>
-            <Muted
-                >The <A href="https://exceptionless.com/docs/project-settings/#client-configuration" target="_blank">configuration value</A> will be sent to the Exceptionless
-                clients in real time. This allows you to change how your app works without redeploying your app.</Muted
-            >
-        </div>
+    <Muted
+        >The <A href="https://exceptionless.com/docs/project-settings/#client-configuration" target="_blank">configuration value</A> will be sent to the Exceptionless
+        clients in real time. This allows you to change how your app works without redeploying your app.</Muted
+    >
 
-        <Button size="icon" onclick={() => (showAddProjectConfigDialog = true)} title="Add Configuration Value" class="shrink-0">
-            <Plus class="size-4" aria-hidden="true" />
-            <span class="sr-only">Add Configuration Value</span>
-        </Button>
-    </div>
-    <Separator />
-
-    <ProjectsConfigDataTable bind:limit={queryParams.limit!} isLoading={projectConfigQuery.isLoading} {table} />
+    <ProjectsConfigDataTable bind:limit={queryParams.limit!} isLoading={projectConfigQuery.isLoading} {table}>
+        {#snippet toolbarChildren()}
+            <div class="flex-1"></div>
+            <DataTableViewOptions size="icon-lg" {table} />
+            <Button size="icon-lg" onclick={() => (showAddProjectConfigDialog = true)} title="Add Configuration Value">
+                <Plus class="size-4" aria-hidden="true" />
+                <span class="sr-only">Add Configuration Value</span>
+            </Button>
+        {/snippet}
+    </ProjectsConfigDataTable>
 </div>
 
 {#if showAddProjectConfigDialog}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configure/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configure/+page.svelte
index e89b2f0b72..97e9f849e3 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configure/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configure/+page.svelte
@@ -4,9 +4,8 @@
     import { page } from '$app/state';
     import CopyToClipboardButton from '$comp/copy-to-clipboard-button.svelte';
     import { Notification, NotificationDescription, NotificationTitle } from '$comp/notification';
-    import { A, CodeBlock, H3, Muted, P } from '$comp/typography';
+    import { A, CodeBlock, Muted, P } from '$comp/typography';
     import * as Select from '$comp/ui/select';
-    import { Separator } from '$comp/ui/separator';
     import { env } from '$env/dynamic/public';
     import { getIntercom } from '$features/intercom';
     import { openSupportChat } from '$features/intercom/chat';
@@ -233,10 +232,7 @@ public partial class App : Application {
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H3>Download & Configure Project</H3>
-        <Muted>The Exceptionless client can be integrated into your project in just a few easy steps.</Muted>
-    </div>
+    <Muted>The Exceptionless client can be integrated into your project in just a few easy steps</Muted>
 
     {#if isTokenDisabled}
         <Notification variant="destructive">
@@ -260,8 +256,6 @@ public partial class App : Application {
         </Notification>
     {/if}
 
-    <Separator />
-
     <ol class="my-6 ml-6 list-decimal [&>li]:mt-2">
         <li>
             <P>Select your project type.</P>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte
index 7a52dbe68d..9e7a075bf5 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte
@@ -3,10 +3,10 @@
     import type { NewWebhook, Webhook } from '$features/webhooks/models';
 
     import { page } from '$app/state';
+    import DataTableViewOptions from '$comp/data-table/data-table-view-options.svelte';
     import SlackIcon from '$comp/icons/SlackIcon.svelte';
-    import { H3, H4, Muted } from '$comp/typography';
+    import { H4, Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
-    import { Separator } from '$comp/ui/separator';
     import { env } from '$env/dynamic/public';
     import { slackOAuthLogin } from '$features/auth/index.svelte';
     import { showBillingDialogOnUpgradeProblem } from '$features/billing';
@@ -177,12 +177,6 @@
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H3>Integrations</H3>
-        <Muted>Create and manage API keys for authenticating your applications with Exceptionless.</Muted>
-    </div>
-    <Separator />
-
     <section class="space-y-2">
         <H4>Zapier</H4>
         <Muted
@@ -212,19 +206,21 @@
     {/if}
 
     <section class="space-y-2">
-        <div class="flex items-start justify-between">
-            <div>
-                <H4>Webhooks</H4>
-                <Muted>The following web hooks will be called for this project.</Muted>
-            </div>
-
-            <Button size="icon" onclick={() => (showAddWebhookDialog = true)} title="Add Webhook" class="shrink-0">
-                <Plus class="size-4" aria-hidden="true" />
-                <span class="sr-only">Add Webhook</span>
-            </Button>
+        <div>
+            <H4>Webhooks</H4>
+            <Muted>The following web hooks will be called for this project</Muted>
         </div>
 
-        <WebhooksDataTable bind:limit={webhooksQueryParameters.limit!} isLoading={webhooksQuery.isLoading} {table} />
+        <WebhooksDataTable bind:limit={webhooksQueryParameters.limit!} isLoading={webhooksQuery.isLoading} {table}>
+            {#snippet toolbarChildren()}
+                <div class="flex-1"></div>
+                <DataTableViewOptions size="icon-lg" {table} />
+                <Button size="icon-lg" onclick={() => (showAddWebhookDialog = true)} title="Add Webhook">
+                    <Plus class="size-4" aria-hidden="true" />
+                    <span class="sr-only">Add Webhook</span>
+                </Button>
+            {/snippet}
+        </WebhooksDataTable>
     </section>
 </div>
 
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte
index 2e0671f0d0..76634a72b1 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte
@@ -5,12 +5,11 @@
     import { resolve } from '$app/paths';
     import { page } from '$app/state';
     import ErrorMessage from '$comp/error-message.svelte';
-    import { H3, Muted } from '$comp/typography';
+    import { Muted } from '$comp/typography';
     import { Button, buttonVariants } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import * as Field from '$comp/ui/field';
     import { Input } from '$comp/ui/input';
-    import { Separator } from '$comp/ui/separator';
     import { Spinner } from '$comp/ui/spinner';
     import { organization } from '$features/organizations/context.svelte';
     import { deleteProject, getProjectQuery, resetData, updateProject } from '$features/projects/api.svelte';
@@ -113,11 +112,7 @@
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H3>General</H3>
-        <Muted>Manage your project name.</Muted>
-    </div>
-    <Separator />
+    <Muted>General project settings</Muted>
 
     <form
         onsubmit={(e) => {
@@ -165,7 +160,8 @@
         <div>
             <DropdownMenu.Root>
                 <DropdownMenu.Trigger class={buttonVariants({ variant: 'destructive' })}>
-                    <X class="size-4" />
+                    <X class="mr-2 size-4" />
+                    <span>Delete</span>
                 </DropdownMenu.Trigger>
                 <DropdownMenu.Content align="end" class="w-56">
                     <DropdownMenu.Group>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/settings/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/settings/+page.svelte
index eb148b272e..271153d38e 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/settings/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/settings/+page.svelte
@@ -2,10 +2,9 @@
     import type { UpdateProject } from '$features/projects/models';
 
     import { page } from '$app/state';
-    import { A, H3, H4, Large, Muted } from '$comp/typography';
+    import { A, H4, Large, Muted } from '$comp/typography';
     import { Input } from '$comp/ui/input';
     import { Label } from '$comp/ui/label';
-    import { Separator } from '$comp/ui/separator';
     import { Switch } from '$comp/ui/switch';
     import { deleteProjectConfig, getProjectConfig, getProjectQuery, postProjectConfig, updateProject } from '$features/projects/api.svelte';
     import ProjectLogLevel from '$features/projects/components/project-log-level.svelte';
@@ -168,12 +167,6 @@
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H3>Settings</H3>
-        <Muted>Create and manage API keys for authenticating your applications with Exceptionless.</Muted>
-    </div>
-    <Separator />
-
     <section class="space-y-2">
         <H4>Default Log Level</H4>
         <Muted
@@ -226,7 +219,7 @@
 
     <section class="space-y-2">
         <H4>Spam Detection</H4>
-        <Muted>A comma delimited list of user agents that should be ignored.</Muted>
+        <Muted>A comma delimited list of user agents that should be ignored</Muted>
         <Input type="text" placeholder="Example: SpamBot" bind:value={userAgents} onchange={debouncedSaveUserAgents} />
 
         <div class="flex items-center space-x-2 pt-1">
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte
index a008484357..152b213977 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte
@@ -3,10 +3,9 @@
     import ErrorMessage from '$comp/error-message.svelte';
     import Number from '$comp/formatters/number.svelte';
     import TimeAgo from '$comp/formatters/time-ago.svelte';
-    import { H4, Muted, Small } from '$comp/typography';
+    import { Muted, Small } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import * as Chart from '$comp/ui/chart/index';
-    import { Separator } from '$comp/ui/separator';
     import { Skeleton } from '$comp/ui/skeleton';
     import { env } from '$env/dynamic/public';
     import { ChangePlanDialog } from '$features/billing';
@@ -101,11 +100,7 @@
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H4>Monthly Usage</H4>
-        <Muted>View your historical usage.</Muted>
-    </div>
-    <Separator />
+    <Muted>View your historical usage</Muted>
 
     {#if projectQuery.isLoading || organizationQuery.isLoading}
         <div class="space-y-4">
@@ -116,7 +111,7 @@
     {:else if projectQuery.error || organizationQuery.error}
         <ErrorMessage message="Unable to load usage data." />
     {:else if !hasMonthlyUsage}
-        <Muted>Monthly usage is not available for this organization. Please contact support for more information.</Muted>
+        <Muted>Monthly usage is not available for this organization. Please contact support for more information</Muted>
     {:else}
         <div class="space-y-6">
             <div class="bg-muted/20 rounded-md border p-4">
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/+layout.svelte
index 6e7616d3ff..adbf7329f6 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/+layout.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-    import { H3, Muted } from '$comp/typography';
-    import { Separator } from '$comp/ui/separator';
+    import { page } from '$app/state';
+    import { A, H3, Muted } from '$comp/typography';
     import { accessToken } from '$features/auth/index.svelte';
-    import * as SplitLayout from '$features/shared/components/layouts/split-layout';
     import { getMeQuery } from '$features/users/api.svelte';
     import GlobalUser from '$features/users/components/global-user.svelte';
 
     import type { NavigationItemContext } from '../../routes.svelte';
 
-    import SidebarNav from '../(components)/sidebar-nav.svelte';
     import { routes } from './routes.svelte';
 
     let { children } = $props();
@@ -19,20 +17,30 @@
         const context: NavigationItemContext = { authenticated: isAuthenticated, user: meQuery.data };
         return routes().filter((route) => (route.show ? route.show(context) : true));
     });
+    const currentPath = $derived(page.url.pathname);
 </script>
 
 <GlobalUser>
     <H3>System Administration</H3>
-    <Muted>Manage Exceptionless system maintenance and operations.</Muted>
-    <Separator class="m-6 w-auto" />
-    <SplitLayout.Root>
-        <SplitLayout.Sidebar>
-            <SidebarNav routes={filteredRoutes} />
-        </SplitLayout.Sidebar>
-        <SplitLayout.Content>
-            {@render children()}
-        </SplitLayout.Content>
-    </SplitLayout.Root>
+    <Muted>Manage Exceptionless system maintenance and operations</Muted>
+    <div class="mt-6 space-y-6">
+        <nav class="bg-muted flex w-full flex-row flex-nowrap gap-1 overflow-x-auto rounded-lg p-1">
+            {#each filteredRoutes as route (route.href)}
+                {@const isActive = currentPath === route.href || currentPath.startsWith(route.href + '/')}
+                <A
+                    variant="ghost"
+                    href={route.href}
+                    data-sveltekit-noscroll
+                    class="shrink-0 rounded-md px-3 py-1.5 text-sm font-medium transition-colors {isActive
+                        ? 'bg-background text-foreground shadow-xs'
+                        : 'text-muted-foreground hover:bg-muted hover:text-foreground'}"
+                >
+                    {route.title}
+                </A>
+            {/each}
+        </nav>
+        {@render children()}
+    </div>
     {#snippet disabled()}
         <div class="text-muted-foreground flex flex-col items-center justify-center gap-2 py-12 text-center">
             <span class="text-lg font-medium">Access Denied</span>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/actions/[[category]]/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/actions/[[category]]/+page.svelte
index 02f20fd6fd..4e6b26aa50 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/actions/[[category]]/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/actions/[[category]]/+page.svelte
@@ -4,10 +4,9 @@
     import { goto } from '$app/navigation';
     import { resolve } from '$app/paths';
     import { page } from '$app/state';
-    import { H3, Muted } from '$comp/typography';
+    import { Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import { Input } from '$comp/ui/input';
-    import { Separator } from '$comp/ui/separator';
     import { runMaintenanceJobMutation } from '$features/admin/api.svelte';
     import RunMaintenanceJobDialog from '$features/admin/components/dialogs/run-maintenance-job-dialog.svelte';
     import { maintenanceActions } from '$features/admin/models';
@@ -85,11 +84,7 @@
 </script>
 
 <div class="space-y-4">
-    <div>
-        <H3>Actions</H3>
-        <Muted>Run maintenance jobs and system operations.</Muted>
-    </div>
-    <Separator />
+    <Muted>Run maintenance jobs and system operations</Muted>
 
     <!-- Category nav + search -->
     <div class="flex flex-wrap items-center justify-between gap-3">
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/elasticsearch/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/elasticsearch/+layout.svelte
index 73c5fac8a7..da207478d4 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/elasticsearch/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/elasticsearch/+layout.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
     import { page } from '$app/state';
-    import { A, H3, Muted } from '$comp/typography';
-    import { Separator } from '$comp/ui/separator';
-    import Database from '@lucide/svelte/icons/database';
+    import { A, Muted } from '$comp/typography';
 
     let { children } = $props();
 
@@ -17,14 +15,9 @@
 </script>
 
 <div class="space-y-6">
-    <div class="flex items-center gap-3">
-        <Database class="text-muted-foreground size-6" />
-        <div>
-            <H3>Elasticsearch</H3>
-            <Muted>Cluster health, storage metrics, indices, and backup snapshots.</Muted>
-        </div>
+    <div>
+        <Muted>Cluster health, storage metrics, indices, and backup snapshots</Muted>
     </div>
-    <Separator />
 
     <nav class="flex gap-1">
         {#each tabs as tab (tab.href)}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/migrations/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/migrations/+page.svelte
index 04dfbac56f..f755a41d42 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/migrations/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/migrations/+page.svelte
@@ -3,10 +3,9 @@
     import type { TableMemoryPagingParameters } from '$features/shared/table.svelte';
 
     import DataTableViewOptions from '$comp/data-table/data-table-view-options.svelte';
-    import { H3, Muted } from '$comp/typography';
+    import { Muted } from '$comp/typography';
     import * as Card from '$comp/ui/card';
     import { Input } from '$comp/ui/input';
-    import { Separator } from '$comp/ui/separator';
     import { Skeleton } from '$comp/ui/skeleton';
     import { Switch } from '$comp/ui/switch';
     import { getMigrationsQuery } from '$features/admin/api.svelte';
@@ -63,11 +62,7 @@
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H3>Migrations</H3>
-        <Muted>Database migration history — versioned schema changes applied to Elasticsearch.</Muted>
-    </div>
-    <Separator />
+    <Muted>Database migration history — versioned schema changes applied to Elasticsearch</Muted>
 
     {#if migrationsQuery.isError}
         <Card.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/overview/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/overview/+page.svelte
index caadf58b81..4088b35cab 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/overview/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/system/overview/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
     import Number from '$comp/formatters/number.svelte';
-    import { H3, Muted } from '$comp/typography';
+    import { Muted } from '$comp/typography';
     import * as Card from '$comp/ui/card';
     import * as Chart from '$comp/ui/chart/index';
-    import { Separator } from '$comp/ui/separator';
     import { Skeleton } from '$comp/ui/skeleton';
     import { getAdminStatsQuery } from '$features/admin/api.svelte';
     import { dateHistogram, terms } from '$features/shared/api/aggregations';
@@ -158,11 +157,7 @@
 </script>
 
 <div class="space-y-6">
-    <div>
-        <H3>Overview</H3>
-        <Muted>System-wide statistics and usage trends.</Muted>
-    </div>
-    <Separator />
+    <Muted>System-wide statistics and usage trends</Muted>
 
     {#if statsQuery.isError}
         <Card.Root>