diff --git a/packages/app/pages/dashboards/index.tsx b/packages/app/pages/dashboards/index.tsx
index 18f0f8157b..4c2426c98f 100644
--- a/packages/app/pages/dashboards/index.tsx
+++ b/packages/app/pages/dashboards/index.tsx
@@ -1,2 +1,2 @@
-import DBDashboardPage from '@/DBDashboardPage';
-export default DBDashboardPage;
+import DashboardsListPage from '@/DashboardsListPage';
+export default DashboardsListPage;
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 3f4bb8ae43..ece4c1865c 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { formatRelative } from 'date-fns';
 import produce from 'immer';
@@ -33,7 +34,9 @@ import {
 } from '@hyperdx/common-utils/dist/types';
 import {
   ActionIcon,
+  Anchor,
   Box,
+  Breadcrumbs,
   Button,
   Flex,
   Group,
@@ -1062,7 +1065,15 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
           </Flex>
         </Paper>
       )}
-      <Flex mt="xs" mb="md" justify="space-between" align="center">
+      <Breadcrumbs mb="xs" mt="xs" fz="sm">
+        <Anchor component={Link} href="/dashboards" fz="sm" c="dimmed">
+          Dashboards
+        </Anchor>
+        <Text fz="sm" c="dimmed">
+          {dashboard?.name ?? 'Untitled'}
+        </Text>
+      </Breadcrumbs>
+      <Flex mb="md" justify="space-between" align="center">
         <DashboardName
           key={`${dashboardHash}`}
           name={dashboard?.name ?? ''}
diff --git a/packages/app/src/DashboardsListPage.tsx b/packages/app/src/DashboardsListPage.tsx
new file mode 100644
index 0000000000..f5e3e9f614
--- /dev/null
+++ b/packages/app/src/DashboardsListPage.tsx
@@ -0,0 +1,413 @@
+import { useCallback, useMemo, useState } from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+import Router from 'next/router';
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Card,
+  Container,
+  Flex,
+  Group,
+  Menu,
+  SimpleGrid,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
+import {
+  IconDots,
+  IconLayoutGrid,
+  IconList,
+  IconPlus,
+  IconSearch,
+  IconServer,
+  IconSettings,
+  IconTrash,
+} from '@tabler/icons-react';
+
+import { PageHeader } from '@/components/PageHeader';
+import { IS_K8S_DASHBOARD_ENABLED, IS_LOCAL_MODE } from '@/config';
+import {
+  useCreateDashboard,
+  useDashboards,
+  useDeleteDashboard,
+} from '@/dashboard';
+import { useBrandDisplayName } from '@/theme/ThemeProvider';
+
+import type { Dashboard } from './dashboard';
+import { withAppNav } from './layout';
+
+const PRESET_DASHBOARDS = [
+  {
+    name: 'Services',
+    href: '/services',
+    description: 'Monitor HTTP endpoints, latency, and error rates',
+    icon: IconServer,
+  },
+  {
+    name: 'ClickHouse',
+    href: '/clickhouse',
+    description: 'ClickHouse cluster health and query performance',
+    icon: IconSettings,
+  },
+];
+
+function DashboardCard({
+  dashboard,
+  onDelete,
+}: {
+  dashboard: Dashboard;
+  onDelete: (id: string) => void;
+}) {
+  return (
+    <Card
+      component={Link}
+      href={`/dashboards/${dashboard.id}`}
+      withBorder
+      padding="lg"
+      radius="sm"
+      style={{ cursor: 'pointer', textDecoration: 'none' }}
+    >
+      <Group justify="space-between" mb="xs" wrap="nowrap">
+        <Text fw={500} lineClamp={1} style={{ flex: 1, minWidth: 0 }}>
+          {dashboard.name}
+        </Text>
+        <Menu position="bottom-end" withinPortal>
+          <Menu.Target>
+            <ActionIcon
+              variant="secondary"
+              size="sm"
+              onClick={e => e.preventDefault()}
+            >
+              <IconDots size={14} />
+            </ActionIcon>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item
+              color="red"
+              leftSection={<IconTrash size={14} />}
+              onClick={e => {
+                e.preventDefault();
+                onDelete(dashboard.id);
+              }}
+            >
+              Delete
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </Group>
+
+      <Group gap="xs" mt="xs">
+        <Text size="xs" c="dimmed">
+          {dashboard.tiles.length}{' '}
+          {dashboard.tiles.length === 1 ? 'tile' : 'tiles'}
+        </Text>
+        {dashboard.tags.map(tag => (
+          <Badge key={tag} variant="light" size="xs">
+            {tag}
+          </Badge>
+        ))}
+      </Group>
+    </Card>
+  );
+}
+
+function DashboardListRow({
+  dashboard,
+  onDelete,
+}: {
+  dashboard: Dashboard;
+  onDelete: (id: string) => void;
+}) {
+  return (
+    <Table.Tr
+      style={{ cursor: 'pointer' }}
+      onClick={() => Router.push(`/dashboards/${dashboard.id}`)}
+    >
+      <Table.Td>
+        <Text
+          component={Link}
+          href={`/dashboards/${dashboard.id}`}
+          fw={500}
+          size="sm"
+          style={{ textDecoration: 'none' }}
+          onClick={e => e.stopPropagation()}
+        >
+          {dashboard.name}
+        </Text>
+      </Table.Td>
+      <Table.Td>
+        <Group gap={4}>
+          {dashboard.tags.map(tag => (
+            <Badge key={tag} variant="light" size="xs">
+              {tag}
+            </Badge>
+          ))}
+        </Group>
+      </Table.Td>
+      <Table.Td>
+        <Text size="xs" c="dimmed">
+          {dashboard.tiles.length}
+        </Text>
+      </Table.Td>
+      <Table.Td>
+        <Menu position="bottom-end" withinPortal>
+          <Menu.Target>
+            <ActionIcon
+              variant="secondary"
+              size="sm"
+              onClick={e => e.stopPropagation()}
+            >
+              <IconDots size={14} />
+            </ActionIcon>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item
+              color="red"
+              leftSection={<IconTrash size={14} />}
+              onClick={e => {
+                e.stopPropagation();
+                onDelete(dashboard.id);
+              }}
+            >
+              Delete
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </Table.Td>
+    </Table.Tr>
+  );
+}
+
+function PresetDashboardCard({
+  name,
+  href,
+  description,
+  icon: Icon,
+}: {
+  name: string;
+  href: string;
+  description: string;
+  icon: React.ElementType;
+}) {
+  return (
+    <Card
+      component={Link}
+      href={href}
+      withBorder
+      padding="lg"
+      radius="sm"
+      style={{ cursor: 'pointer', textDecoration: 'none' }}
+    >
+      <Group gap="sm" mb="xs">
+        <Icon size={18} />
+        <Text fw={500}>{name}</Text>
+      </Group>
+      <Text size="sm" c="dimmed">
+        {description}
+      </Text>
+    </Card>
+  );
+}
+
+export default function DashboardsListPage() {
+  const brandName = useBrandDisplayName();
+  const { data: dashboards, isLoading } = useDashboards();
+  const createDashboard = useCreateDashboard();
+  const deleteDashboard = useDeleteDashboard();
+  const [search, setSearch] = useState('');
+  const [viewMode, setViewMode] = useLocalStorage<string>({
+    key: 'dashboardsViewMode',
+    defaultValue: 'grid',
+  });
+
+  const presets = useMemo(() => {
+    if (IS_K8S_DASHBOARD_ENABLED) {
+      return [
+        ...PRESET_DASHBOARDS,
+        {
+          name: 'Kubernetes',
+          href: '/kubernetes',
+          description: 'Kubernetes cluster monitoring and pod health',
+          icon: IconLayoutGrid,
+        },
+      ];
+    }
+    return PRESET_DASHBOARDS;
+  }, []);
+
+  const filteredDashboards = useMemo(() => {
+    if (!dashboards) return [];
+    if (!search.trim()) return dashboards;
+    const q = search.toLowerCase();
+    return dashboards.filter(
+      d =>
+        d.name.toLowerCase().includes(q) ||
+        d.tags.some(t => t.toLowerCase().includes(q)),
+    );
+  }, [dashboards, search]);
+
+  const handleCreate = useCallback(() => {
+    if (IS_LOCAL_MODE) {
+      Router.push('/dashboards');
+      return;
+    }
+    createDashboard.mutate(
+      { name: 'My Dashboard', tiles: [], tags: [] },
+      {
+        onSuccess: data => {
+          Router.push(`/dashboards/${data.id}`);
+        },
+      },
+    );
+  }, [createDashboard]);
+
+  const handleDelete = useCallback(
+    (id: string) => {
+      deleteDashboard.mutate(id, {
+        onSuccess: () => {
+          notifications.show({
+            message: 'Dashboard deleted',
+            color: 'green',
+          });
+        },
+        onError: () => {
+          notifications.show({
+            message: 'Failed to delete dashboard',
+            color: 'red',
+          });
+        },
+      });
+    },
+    [deleteDashboard],
+  );
+
+  return (
+    <div data-testid="dashboards-list-page">
+      <Head>
+        <title>Dashboards - {brandName}</title>
+      </Head>
+      <PageHeader>Dashboards</PageHeader>
+      <Container maw={1200} py="lg" px="lg">
+        <Flex justify="space-between" align="center" mb="lg" gap="sm">
+          <TextInput
+            placeholder="Search dashboards..."
+            leftSection={<IconSearch size={16} />}
+            value={search}
+            onChange={e => setSearch(e.currentTarget.value)}
+            style={{ flex: 1, maxWidth: 400 }}
+          />
+          <Group gap="xs" align="center">
+            <ActionIcon.Group>
+              <ActionIcon
+                variant={viewMode === 'grid' ? 'primary' : 'secondary'}
+                size="input-sm"
+                onClick={() => setViewMode('grid')}
+                aria-label="Grid view"
+              >
+                <IconLayoutGrid size={16} />
+              </ActionIcon>
+              <ActionIcon
+                variant={viewMode === 'list' ? 'primary' : 'secondary'}
+                size="input-sm"
+                onClick={() => setViewMode('list')}
+                aria-label="List view"
+              >
+                <IconList size={16} />
+              </ActionIcon>
+            </ActionIcon.Group>
+            <Button
+              variant="primary"
+              leftSection={<IconPlus size={16} />}
+              onClick={handleCreate}
+              loading={createDashboard.isPending}
+              data-testid="create-dashboard-button"
+            >
+              New Dashboard
+            </Button>
+          </Group>
+        </Flex>
+
+        {!IS_LOCAL_MODE && (
+          <>
+            <Text fw={500} size="sm" c="dimmed" mb="sm">
+              Preset Dashboards
+            </Text>
+            <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} mb="xl">
+              {presets.map(p => (
+                <PresetDashboardCard key={p.href} {...p} />
+              ))}
+            </SimpleGrid>
+          </>
+        )}
+
+        <Text fw={500} size="sm" c="dimmed" mb="sm">
+          {search
+            ? `Results (${filteredDashboards.length})`
+            : 'Your Dashboards'}
+        </Text>
+
+        {isLoading ? (
+          <Text size="sm" c="dimmed" ta="center" py="xl">
+            Loading dashboards...
+          </Text>
+        ) : filteredDashboards.length === 0 ? (
+          <Card withBorder padding="xl" radius="sm">
+            <Stack align="center" gap="sm" py="lg">
+              <IconLayoutGrid size={40} opacity={0.3} />
+              <Text size="sm" c="dimmed" ta="center">
+                {search
+                  ? `No dashboards matching "${search}"`
+                  : 'No dashboards yet. Create one to get started.'}
+              </Text>
+              {!search && (
+                <Button
+                  variant="primary"
+                  size="sm"
+                  leftSection={<IconPlus size={14} />}
+                  onClick={handleCreate}
+                  loading={createDashboard.isPending}
+                >
+                  Create Dashboard
+                </Button>
+              )}
+            </Stack>
+          </Card>
+        ) : viewMode === 'list' ? (
+          <Table highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Name</Table.Th>
+                <Table.Th>Tags</Table.Th>
+                <Table.Th>Tiles</Table.Th>
+                <Table.Th w={50} />
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {filteredDashboards.map(d => (
+                <DashboardListRow
+                  key={d.id}
+                  dashboard={d}
+                  onDelete={handleDelete}
+                />
+              ))}
+            </Table.Tbody>
+          </Table>
+        ) : (
+          <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }}>
+            {filteredDashboards.map(d => (
+              <DashboardCard key={d.id} dashboard={d} onDelete={handleDelete} />
+            ))}
+          </SimpleGrid>
+        )}
+      </Container>
+    </div>
+  );
+}
+
+DashboardsListPage.getLayout = withAppNav;
diff --git a/packages/app/src/components/AppNav/AppNav.tsx b/packages/app/src/components/AppNav/AppNav.tsx
index 279abb2452..78f4d21833 100644
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@@ -41,17 +41,12 @@ import {
 } from '@tabler/icons-react';
 
 import api from '@/api';
-import { IS_K8S_DASHBOARD_ENABLED, IS_LOCAL_MODE } from '@/config';
-import {
-  useCreateDashboard,
-  useDashboards,
-  useUpdateDashboard,
-} from '@/dashboard';
+import { IS_LOCAL_MODE } from '@/config';
 import InstallInstructionModal from '@/InstallInstructionsModal';
 import OnboardingChecklist from '@/OnboardingChecklist';
 import { useSavedSearches, useUpdateSavedSearch } from '@/savedSearch';
 import { useLogomark, useWordmark } from '@/theme/ThemeProvider';
-import type { SavedSearch, ServerDashboard } from '@/types';
+import type { SavedSearch } from '@/types';
 import { UserPreferencesModal } from '@/UserPreferencesModal';
 import { useUserPreferences } from '@/useUserPreferences';
 import { useWindowSize } from '@/utils';
@@ -73,7 +68,6 @@ const APP_VERSION =
   process.env.NEXT_PUBLIC_APP_VERSION ?? packageJson.version ?? 'dev';
 
 const UNTAGGED_SEARCHES_GROUP_NAME = 'Saved Searches';
-const UNTAGGED_DASHBOARDS_GROUP_NAME = 'Saved Dashboards';
 
 // Navigation link configuration
 type NavLinkConfig = {
@@ -114,54 +108,6 @@ const NAV_LINKS: NavLinkConfig[] = [
   },
 ];
 
-function NewDashboardButton() {
-  const createDashboard = useCreateDashboard();
-
-  if (IS_LOCAL_MODE) {
-    return (
-      <Button
-        component={Link}
-        href="/dashboards"
-        data-testid="create-dashboard-button"
-        variant="transparent"
-        color="var(--color-text)"
-        py="0px"
-        px="sm"
-        fw={400}
-      >
-        <span className="pe-2">+</span> Create Dashboard
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      data-testid="create-dashboard-button"
-      variant="transparent"
-      color="var(--color-text)"
-      py="0px"
-      px="sm"
-      fw={400}
-      onClick={() =>
-        createDashboard.mutate(
-          {
-            name: 'My Dashboard',
-            tiles: [],
-            tags: [],
-          },
-          {
-            onSuccess: data => {
-              Router.push(`/dashboards/${data.id}`);
-            },
-          },
-        )
-      }
-    >
-      <span className="pe-2">+</span> Create Dashboard
-    </Button>
-  );
-}
-
 function SearchInput({
   placeholder,
   value,
@@ -418,16 +364,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
   } = useSavedSearches();
   const logViews = useMemo(() => logViewsData ?? [], [logViewsData]);
 
-  const updateDashboard = useUpdateDashboard();
   const updateLogView = useUpdateSavedSearch();
 
-  const {
-    data: dashboardsData,
-    isLoading: isDashboardsLoading,
-    refetch: refetchDashboards,
-  } = useDashboards();
-  const dashboards = useMemo(() => dashboardsData ?? [], [dashboardsData]);
-
   const router = useRouter();
   const { pathname, query } = router;
 
@@ -446,11 +384,6 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
     key: 'isSearchExpanded',
     defaultValue: true,
   });
-  const [isDashboardsExpanded, setIsDashboardExpanded] =
-    useLocalStorage<boolean>({
-      key: 'isDashboardsExpanded',
-      defaultValue: true,
-    });
   const { width } = useWindowSize();
 
   const [isPreferCollapsed, setIsPreferCollapsed] = useLocalStorage<boolean>({
@@ -491,24 +424,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
     untaggedGroupName: UNTAGGED_SEARCHES_GROUP_NAME,
   });
 
-  const {
-    q: dashboardsListQ,
-    setQ: setDashboardsListQ,
-    filteredList: filteredDashboardsList,
-    groupedFilteredList: groupedFilteredDashboardsList,
-  } = useSearchableList({
-    items: dashboards,
-    untaggedGroupName: UNTAGGED_DASHBOARDS_GROUP_NAME,
-  });
-
-  const [isDashboardsPresetsCollapsed, setDashboardsPresetsCollapsed] =
-    useLocalStorage<boolean>({
-      key: 'isDashboardsPresetsCollapsed',
-      defaultValue: false,
-    });
-
   const savedSearchesResultsRef = useRef<HTMLDivElement>(null);
-  const dashboardsResultsRef = useRef<HTMLDivElement>(null);
 
   const renderLogViewLink = useCallback(
     (savedSearch: SavedSearch) => (
@@ -587,50 +503,6 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
     [logViews, refetchLogViews, updateLogView],
   );
 
-  const renderDashboardLink = useCallback(
-    (dashboard: ServerDashboard) => (
-      <Link
-        href={`/dashboards/${dashboard.id}`}
-        key={dashboard.id}
-        tabIndex={0}
-        className={cx(styles.subMenuItem, {
-          [styles.subMenuItemActive]: dashboard.id === query.dashboardId,
-        })}
-        draggable
-        data-dashboardid={dashboard.id}
-      >
-        {dashboard.name}
-      </Link>
-    ),
-    [query.dashboardId],
-  );
-
-  const handleDashboardDragEnd = useCallback(
-    (target: HTMLElement | null, name: string | null) => {
-      if (!target?.dataset.dashboardid || name == null) {
-        return;
-      }
-      const dashboard = dashboards.find(
-        d => d.id === target.dataset.dashboardid,
-      );
-      if (dashboard?.tags?.includes(name)) {
-        return;
-      }
-      updateDashboard.mutate(
-        {
-          id: target.dataset.dashboardid,
-          tags: name === UNTAGGED_DASHBOARDS_GROUP_NAME ? [] : [name],
-        },
-        {
-          onSuccess: () => {
-            refetchDashboards();
-          },
-        },
-      );
-    },
-    [dashboards, refetchDashboards, updateDashboard],
-  );
-
   const [
     UserPreferencesOpen,
     { close: closeUserPreferences, open: openUserPreferences },
@@ -792,106 +664,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
               label="Dashboards"
               href="/dashboards"
               icon={<IconLayoutGrid size={16} />}
-              isExpanded={isDashboardsExpanded}
-              onToggle={() => setIsDashboardExpanded(!isDashboardsExpanded)}
             />
 
-            {!isCollapsed && (
-              <Collapse in={isDashboardsExpanded}>
-                <div className={styles.subMenu}>
-                  <NewDashboardButton />
-
-                  {isDashboardsLoading ? (
-                    <Loader variant="dots" mx="md" my="xs" size="sm" />
-                  ) : (
-                    !IS_LOCAL_MODE && (
-                      <>
-                        <SearchInput
-                          placeholder="Saved Dashboards"
-                          value={dashboardsListQ}
-                          onChange={setDashboardsListQ}
-                          onEnterDown={() => {
-                            (
-                              dashboardsResultsRef?.current
-                                ?.firstChild as HTMLAnchorElement
-                            )?.focus?.();
-                          }}
-                        />
-
-                        <AppNavLinkGroups
-                          name="dashboards"
-                          groups={groupedFilteredDashboardsList}
-                          renderLink={renderDashboardLink}
-                          forceExpandGroups={!!dashboardsListQ}
-                          onDragEnd={handleDashboardDragEnd}
-                        />
-
-                        {dashboards.length === 0 && (
-                          <div className={styles.emptyMessage}>
-                            No saved dashboards
-                          </div>
-                        )}
-
-                        {dashboardsListQ &&
-                        filteredDashboardsList.length === 0 ? (
-                          <div className={styles.emptyMessage}>
-                            No results matching <i>{dashboardsListQ}</i>
-                          </div>
-                        ) : null}
-                      </>
-                    )
-                  )}
-
-                  <AppNavGroupLabel
-                    name="Presets"
-                    collapsed={isDashboardsPresetsCollapsed}
-                    onClick={() =>
-                      setDashboardsPresetsCollapsed(
-                        !isDashboardsPresetsCollapsed,
-                      )
-                    }
-                  />
-                  <Collapse in={!isDashboardsPresetsCollapsed}>
-                    <Link
-                      href={`/clickhouse`}
-                      tabIndex={0}
-                      className={cx(styles.subMenuItem, {
-                        [styles.subMenuItemActive]:
-                          pathname.startsWith('/clickhouse'),
-                      })}
-                      data-testid="nav-link-clickhouse-dashboard"
-                    >
-                      ClickHouse
-                    </Link>
-                    <Link
-                      href={`/services`}
-                      tabIndex={0}
-                      className={cx(styles.subMenuItem, {
-                        [styles.subMenuItemActive]:
-                          pathname.startsWith('/services'),
-                      })}
-                      data-testid="nav-link-services-dashboard"
-                    >
-                      Services
-                    </Link>
-                    {IS_K8S_DASHBOARD_ENABLED && (
-                      <Link
-                        href={`/kubernetes`}
-                        tabIndex={0}
-                        className={cx(styles.subMenuItem, {
-                          [styles.subMenuItemActive]:
-                            pathname.startsWith('/kubernetes'),
-                        })}
-                        data-testid="nav-link-k8s-dashboard"
-                      >
-                        Kubernetes
-                      </Link>
-                    )}
-                  </Collapse>
-                </div>
-              </Collapse>
-            )}
-
             {/* Team Settings (Cloud only) */}
             {!IS_LOCAL_MODE && (
               <AppNavLink