From b58c54c741a1e8ffbea5ac96d376c6d1aee65f22 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 25 Feb 2026 17:52:46 +0000
Subject: [PATCH 1/2] refactor: update dashboard page and clean up AppNav
 component

Replaced DBDashboardPage with DashboardsListPage in the dashboard index. Removed unused imports and components related to dashboard creation and management in AppNav, streamlining the navigation component for better performance and maintainability.
---
 packages/app/pages/dashboards/index.tsx       |   4 +-
 packages/app/src/DashboardsListPage.tsx       | 299 ++++++++++++++++++
 packages/app/src/components/AppNav/AppNav.tsx | 230 +-------------
 3 files changed, 303 insertions(+), 230 deletions(-)
 create mode 100644 packages/app/src/DashboardsListPage.tsx

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/DashboardsListPage.tsx b/packages/app/src/DashboardsListPage.tsx
new file mode 100644
index 0000000000..50f4f908d1
--- /dev/null
+++ b/packages/app/src/DashboardsListPage.tsx
@@ -0,0 +1,299 @@
+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,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import {
+  IconDots,
+  IconLayoutGrid,
+  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 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 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 }}
+          />
+          <Button
+            variant="primary"
+            leftSection={<IconPlus size={16} />}
+            onClick={handleCreate}
+            loading={createDashboard.isPending}
+            data-testid="create-dashboard-button"
+          >
+            New Dashboard
+          </Button>
+        </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>
+        ) : (
+          <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

From 05c7062381761d4cfce21c3e6fadfe133c4312f8 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 25 Feb 2026 19:18:14 +0000
Subject: [PATCH 2/2] feat: enhance DashboardsListPage with list view and
 dashboard row component

Added a new list view for dashboards in DashboardsListPage, allowing users to toggle between grid and list layouts. Introduced DashboardListRow component for displaying individual dashboard details, including name, tags, and a delete option. Updated UI elements for better interaction and organization.
---
 packages/app/src/DBDashboardPage.tsx    |  13 ++-
 packages/app/src/DashboardsListPage.tsx | 132 ++++++++++++++++++++++--
 2 files changed, 135 insertions(+), 10 deletions(-)

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
index 50f4f908d1..f5e3e9f614 100644
--- a/packages/app/src/DashboardsListPage.tsx
+++ b/packages/app/src/DashboardsListPage.tsx
@@ -13,13 +13,16 @@ import {
   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,
@@ -114,6 +117,73 @@ function DashboardCard({
   );
 }
 
+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,
@@ -151,6 +221,10 @@ export default function DashboardsListPage() {
   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) {
@@ -228,15 +302,35 @@ export default function DashboardsListPage() {
             onChange={e => setSearch(e.currentTarget.value)}
             style={{ flex: 1, maxWidth: 400 }}
           />
-          <Button
-            variant="primary"
-            leftSection={<IconPlus size={16} />}
-            onClick={handleCreate}
-            loading={createDashboard.isPending}
-            data-testid="create-dashboard-button"
-          >
-            New Dashboard
-          </Button>
+          <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 && (
@@ -284,6 +378,26 @@ export default function DashboardsListPage() {
               )}
             </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 => (