diff --git a/frontend/src/__tests__/componentTests/CartList.test.tsx b/frontend/src/__tests__/componentTests/CartList.test.tsx
index f8ff6e6fc..f0a13abdf 100644
--- a/frontend/src/__tests__/componentTests/CartList.test.tsx
+++ b/frontend/src/__tests__/componentTests/CartList.test.tsx
@@ -28,9 +28,6 @@ vi.mock('@/contexts/CartContext', () => ({
     clearCart
   })
 }));
-vi.mock('@/queries/proxiedPathQueries', () => ({
-  useAllProxiedPathsQuery: () => ({ data: [] })
-}));
 vi.mock('@/components/ui/Views/CartDatasetRow', () => ({
   default: ({ label }: { label: string }) => (
     <div data-testid="row">{label}</div>
@@ -49,6 +46,12 @@ vi.mock('@/components/ui/Views/CreateViewButton', () => ({
     </button>
   )
 }));
+vi.mock('@/hooks/useCartDimensionCheck', () => ({
+  useCartDimensionCheck: () => ({
+    mismatchedKeys: new Set(),
+    hasMismatch: false
+  })
+}));
 
 import CartList from '@/components/ui/Views/CartList';
 
diff --git a/frontend/src/__tests__/componentTests/CartTab.test.tsx b/frontend/src/__tests__/componentTests/CartTab.test.tsx
index 408f0fa11..19185561e 100644
--- a/frontend/src/__tests__/componentTests/CartTab.test.tsx
+++ b/frontend/src/__tests__/componentTests/CartTab.test.tsx
@@ -18,10 +18,11 @@ const view: View = {
   layers: []
 };
 
-// Dataset A has an existing Data Link (channel expansion enabled) and TWO
-// cart entries (a base entry + an already-checked "GFP" channel entry), to
-// exercise the multi-entry "Remove" batch path.
-// Dataset B has no Data Link (channel expansion disabled + hint).
+// Dataset A has TWO cart entries (a base entry + an already-checked "GFP"
+// channel entry), to exercise the multi-entry "Remove" batch path.
+// Dataset B is a plain single-entry dataset - both expand identically now
+// that metadata is fetched from the internal /api/content URL rather than
+// a Data Link.
 const cartABase: CartItem = {
   fsp_name: 'fsp1',
   path: '/a',
@@ -92,25 +93,17 @@ vi.mock('@/omezarr-helper', () => ({
   getResolvedScales: () => [1, 0.65, 0.65],
   translateUnitToNeuroglancer: (unit?: string) => unit ?? ''
 }));
-vi.mock('@/queries/proxiedPathQueries', () => ({
-  useAllProxiedPathsQuery: () => ({
-    data: [
-      {
-        fsp_name: 'fsp1',
-        path: '/a',
-        url: 'https://data.example/a',
-        sharing_key: 'k1'
-      }
-    ],
-    error: null,
-    isPending: false
-  })
-}));
 vi.mock('@/components/ui/Views/CreateViewButton', () => ({
   default: ({ label }: { label?: string }) => (
     <button type="button">{label ?? 'Create View'}</button>
   )
 }));
+vi.mock('@/hooks/useCartDimensionCheck', () => ({
+  useCartDimensionCheck: () => ({
+    mismatchedKeys: new Set(),
+    hasMismatch: false
+  })
+}));
 
 import CartList from '@/components/ui/Views/CartList';
 
@@ -140,18 +133,20 @@ describe('Layer Cart tab', () => {
     expect(screen.getByText('Dataset B')).toBeInTheDocument();
   });
 
-  it('lazy-loads and shows channels when expanding a dataset with a Data Link', async () => {
+  it('lazy-loads and shows channels when expanding a dataset', async () => {
     const user = await renderCartTab();
     await user.click(screen.getByRole('button', { name: 'Dataset A' }));
 
     await waitFor(() => {
-      expect(getOmeZarrChannels).toHaveBeenCalledWith('https://data.example/a');
+      expect(getOmeZarrChannels).toHaveBeenCalledWith(
+        expect.stringContaining('/api/content/fsp1/a')
+      );
     });
     expect(await screen.findByText('DAPI')).toBeInTheDocument();
     expect(screen.getByText('GFP')).toBeInTheDocument();
   });
 
-  it('lazy-loads and shows the axis table when expanding a dataset with a Data Link', async () => {
+  it('lazy-loads and shows the axis table when expanding a dataset', async () => {
     getOmeZarrMetadata.mockResolvedValueOnce({
       shapes: [[3, 2048, 2048]],
       arr: { chunks: [1, 512, 512] },
@@ -172,7 +167,9 @@ describe('Layer Cart tab', () => {
     await user.click(screen.getByRole('button', { name: /Dataset A/ }));
 
     await waitFor(() => {
-      expect(getOmeZarrMetadata).toHaveBeenCalledWith('https://data.example/a');
+      expect(getOmeZarrMetadata).toHaveBeenCalledWith(
+        expect.stringContaining('/api/content/fsp1/a')
+      );
     });
     expect(await screen.findByText('Chunk Size')).toBeInTheDocument();
   });
@@ -193,14 +190,30 @@ describe('Layer Cart tab', () => {
     expect(screen.queryByText(/×/)).not.toBeInTheDocument();
   });
 
-  it('disables expansion and shows a hint for a dataset with no Data Link', async () => {
-    await renderCartTab();
-    const expandButton = screen.getByRole('button', { name: 'Dataset B' });
-    expect(expandButton).toBeDisabled();
+  it('shows a "no OME-Zarr metadata" message for a plain (non-OME) array', async () => {
+    // Plain Zarr array: no channels and getOmeZarrMetadata throws (no
+    // multiscale group), so the expanded body has nothing to show.
+    getOmeZarrChannels.mockResolvedValueOnce([]);
+    getOmeZarrMetadata.mockRejectedValueOnce(new Error('not ome-zarr'));
+    const user = await renderCartTab();
+    await user.click(screen.getByRole('button', { name: 'Dataset B' }));
+
     expect(
-      screen.getByText(/channels load after the view is created/i)
+      await screen.findByText('No OME-Zarr metadata to display.')
     ).toBeInTheDocument();
-    expect(getOmeZarrChannels).not.toHaveBeenCalled();
+  });
+
+  it('expands a dataset that has no Data Link (metadata fetched via /api/content)', async () => {
+    const user = await renderCartTab();
+    const expandButton = screen.getByRole('button', { name: 'Dataset B' });
+    expect(expandButton).not.toBeDisabled();
+    await user.click(expandButton);
+
+    await waitFor(() => {
+      expect(getOmeZarrChannels).toHaveBeenCalledWith(
+        expect.stringContaining('/api/content/fsp2/b')
+      );
+    });
   });
 
   it('toggling a channel checkbox adds a channel-specific CartItem', async () => {
diff --git a/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx b/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx
index 4818f8c13..1c228afef 100644
--- a/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx
+++ b/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx
@@ -22,6 +22,12 @@ vi.mock('react-router', () => ({ useNavigate: () => vi.fn() }));
 vi.mock('@/contexts/CartContext', () => ({
   useCartContext: () => ({ clearCart: vi.fn().mockResolvedValue(undefined) })
 }));
+vi.mock('@/hooks/useCartDimensionCheck', () => ({
+  useCartDimensionCheck: () => ({
+    mismatchedKeys: new Set(),
+    hasMismatch: false
+  })
+}));
 
 import CreateViewButton from '@/components/ui/Views/CreateViewButton';
 
diff --git a/frontend/src/__tests__/componentTests/MainLayout.test.tsx b/frontend/src/__tests__/componentTests/MainLayout.test.tsx
index 0c4e0db09..3cd9fac5f 100644
--- a/frontend/src/__tests__/componentTests/MainLayout.test.tsx
+++ b/frontend/src/__tests__/componentTests/MainLayout.test.tsx
@@ -5,7 +5,7 @@ import type { ReactNode } from 'react';
 
 // MainLayout composes ~a dozen context providers unrelated to this test;
 // stub them all as passthroughs so we can assert on the one thing that
-// changed: the navbar is no longer skipped for /view/:readKey.
+// changed: the navbar is now skipped for /view/:readKey.
 // vi.mock factories are hoisted above imports, so the shared stub must be
 // created via vi.hoisted rather than a plain top-level const.
 const { passthrough } = vi.hoisted(() => ({
@@ -69,7 +69,7 @@ vi.mock('@/contexts/ViewersContext', () => ({ ViewersProvider: passthrough }));
 import { MainLayout } from '@/layouts/MainLayout';
 
 describe('MainLayout', () => {
-  it('renders the navbar on the embedded viewer route (/view/:readKey)', () => {
+  it('suppresses the navbar on the embedded viewer route (/view/:readKey)', () => {
     render(
       <MemoryRouter initialEntries={['/view/abc123']}>
         <Routes>
@@ -79,7 +79,7 @@ describe('MainLayout', () => {
         </Routes>
       </MemoryRouter>
     );
-    expect(screen.getByTestId('navbar')).toBeInTheDocument();
+    expect(screen.queryByTestId('navbar')).not.toBeInTheDocument();
   });
 
   it('still renders the navbar on an ordinary route', () => {
diff --git a/frontend/src/__tests__/componentTests/NGViews.test.tsx b/frontend/src/__tests__/componentTests/NGViews.test.tsx
index dfa2ccc04..8f17acdb9 100644
--- a/frontend/src/__tests__/componentTests/NGViews.test.tsx
+++ b/frontend/src/__tests__/componentTests/NGViews.test.tsx
@@ -43,6 +43,12 @@ vi.mock('@/queries/proxiedPathQueries', () => ({
 vi.mock('@/components/ui/Views/CreateViewButton', () => ({
   default: () => <button type="button">Create View</button>
 }));
+vi.mock('@/contexts/PreferencesContext', () => ({
+  usePreferencesContext: () => ({ pathPreference: ['linux_path'] })
+}));
+vi.mock('@/contexts/ZonesAndFspMapContext', () => ({
+  useZoneAndFspMapContext: () => ({ zonesAndFspQuery: { data: {} } })
+}));
 
 import NGViews from '@/components/NGViews';
 
@@ -53,7 +59,7 @@ describe('NGViews page', () => {
         <NGViews />
       </MemoryRouter>
     );
-    expect(screen.getByText('Neuroglancer Views')).toBeInTheDocument();
+    expect(screen.getByText('Views')).toBeInTheDocument();
     expect(screen.getByText('Seeded View')).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/__tests__/componentTests/NavbarBadge.test.tsx b/frontend/src/__tests__/componentTests/NavbarBadge.test.tsx
index 757f4ae99..0928dcd12 100644
--- a/frontend/src/__tests__/componentTests/NavbarBadge.test.tsx
+++ b/frontend/src/__tests__/componentTests/NavbarBadge.test.tsx
@@ -14,14 +14,6 @@ vi.mock('@/hooks/useCartCount', () => ({
   useCartCount: () => 0
 }));
 
-vi.mock('@/hooks/useTheme', () => ({
-  default: vi.fn(() => ({
-    toggleTheme: vi.fn(),
-    isLightTheme: true,
-    setIsLightTheme: vi.fn()
-  }))
-}));
-
 vi.mock('@/utils/fathom', () => ({
   trackEvent: vi.fn()
 }));
diff --git a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
index ba9b154aa..9e039ebc8 100644
--- a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
+++ b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
@@ -22,6 +22,10 @@ const { copyToClipboard } = vi.hoisted(() => ({
 }));
 vi.mock('@/utils/copyText', () => ({ copyToClipboard }));
 
+vi.mock('@/components/ui/Navbar/ProfileMenu', () => ({
+  default: () => <div data-testid="profile-menu" />
+}));
+
 import NeuroglancerView from '@/components/NeuroglancerView';
 
 describe('NeuroglancerView', () => {
@@ -73,18 +77,18 @@ describe('NeuroglancerView', () => {
       screen.getByRole('button', { name: /download json/i })
     ).toBeInTheDocument();
     expect(
-      screen.getByRole('button', { name: /open external/i })
+      screen.getByRole('button', { name: /open in neuroglancer/i })
     ).toBeInTheDocument();
   });
 
-  it('shows a breadcrumb linking back to the NG Views list', () => {
+  it('shows a breadcrumb linking back to the Views list', () => {
     useViewStateByReadKey.mockReturnValue({
       data: { title: 'My View', layers: [{ name: 'L0' }] },
       isPending: false,
       isError: false
     });
     render(<NeuroglancerView />);
-    const crumbLink = screen.getByRole('link', { name: /ng views/i });
+    const crumbLink = screen.getByRole('link', { name: /^views$/i });
     expect(crumbLink).toHaveAttribute('href', '/ngviews');
   });
 
diff --git a/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx b/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
index c43c68349..2d59452c5 100644
--- a/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
+++ b/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
@@ -29,6 +29,28 @@ vi.mock('@/queries/proxiedPathQueries', () => ({
     ]
   })
 }));
+vi.mock('@/contexts/PreferencesContext', () => ({
+  usePreferencesContext: () => ({ pathPreference: ['linux_path'] })
+}));
+vi.mock('@/contexts/ZonesAndFspMapContext', () => ({
+  useZoneAndFspMapContext: () => ({
+    zonesAndFspQuery: {
+      // key format is `fsp_<name>` (see makeMapKey)
+      data: {
+        fsp_nrs: {
+          zone: 'z',
+          name: 'nrs',
+          group: '',
+          storage: '',
+          mount_path: '/nrs',
+          linux_path: '/nrs',
+          mac_path: null,
+          windows_path: null
+        }
+      }
+    }
+  })
+}));
 
 const view: View = {
   short_key: 'k1',
@@ -66,7 +88,13 @@ function TableProbe({
 }) {
   // ponytail: TableProbe is already a component, so call the hook directly
   // rather than nesting renderHook inside a component under render().
-  const columns = useNGViewsColumns(onRename, onDelete, 'https://ng.example/');
+  const columns = useNGViewsColumns(
+    onRename,
+    onDelete,
+    'https://ng.example/',
+    320,
+    () => {}
+  );
   const table = useReactTable({
     data: [view],
     columns,
@@ -110,10 +138,11 @@ describe('useNGViewsColumns', () => {
         <TableProbe onDelete={vi.fn()} onRename={vi.fn()} />
       </MemoryRouter>
     );
-    const link = screen.getByText('dudman/reg.zarr/g1_r0');
+    // Sources show the full path (file share path + subpath), not just the subpath.
+    const link = screen.getByText('/nrs/dudman/reg.zarr/g1_r0');
     expect(link).toBeInTheDocument();
     expect(link.closest('a')).toHaveAttribute('href');
-    expect(screen.getByText('dudman/reg.zarr/g1_r1')).toBeInTheDocument();
+    expect(screen.getByText('/nrs/dudman/reg.zarr/g1_r1')).toBeInTheDocument();
   });
 
   it('fires onRename and onDelete from the actions menu', async () => {
diff --git a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
index 85cca967a..d0dee71d7 100644
--- a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
+++ b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
@@ -19,6 +19,12 @@ vi.mock('@/queries/proxiedPathQueries', () => ({
   useAllProxiedPathsQuery: () => ({ data: [] })
 }));
 vi.mock('react-router', () => ({ useNavigate: () => vi.fn() }));
+vi.mock('@/hooks/useCartDimensionCheck', () => ({
+  useCartDimensionCheck: () => ({
+    mismatchedKeys: new Set(),
+    hasMismatch: false
+  })
+}));
 
 import { useCreateViewFlow } from '@/hooks/useCreateViewFlow';
 
diff --git a/frontend/src/__tests__/dimensionSignature.test.ts b/frontend/src/__tests__/dimensionSignature.test.ts
new file mode 100644
index 000000000..a63940fe0
--- /dev/null
+++ b/frontend/src/__tests__/dimensionSignature.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { signaturesMatch } from '@/utils/dimensionSignature';
+import type { DimensionSignature } from '@/utils/dimensionSignature';
+
+const sig = (
+  axes: [string, string][],
+  scales: number[]
+): DimensionSignature => ({
+  axes: axes.map(([name, unit]) => ({ name, unit })),
+  scales
+});
+
+describe('signaturesMatch', () => {
+  it('matches identical axes and scales', () => {
+    const a = sig(
+      [
+        ['x', 'micrometer'],
+        ['y', 'micrometer']
+      ],
+      [0.1, 0.1]
+    );
+    const b = sig(
+      [
+        ['x', 'micrometer'],
+        ['y', 'micrometer']
+      ],
+      [0.1, 0.1]
+    );
+    expect(signaturesMatch(a, b)).toBe(true);
+  });
+
+  it('mismatches when axis names/order differ', () => {
+    const a = sig(
+      [
+        ['x', 'um'],
+        ['y', 'um'],
+        ['z', 'um']
+      ],
+      [1, 1, 1]
+    );
+    const b = sig(
+      [
+        ['x', 'um'],
+        ['y', 'um']
+      ],
+      [1, 1]
+    );
+    expect(signaturesMatch(a, b)).toBe(false);
+  });
+
+  it('mismatches when a unit differs', () => {
+    const a = sig([['x', 'micrometer']], [1]);
+    const b = sig([['x', 'nanometer']], [1]);
+    expect(signaturesMatch(a, b)).toBe(false);
+  });
+
+  it('mismatches when voxel scale differs beyond relative epsilon', () => {
+    const a = sig([['x', 'um']], [0.1]);
+    const b = sig([['x', 'um']], [0.2]);
+    expect(signaturesMatch(a, b)).toBe(false);
+  });
+
+  it('matches when scales differ within relative epsilon', () => {
+    const a = sig([['x', 'um']], [0.1]);
+    const b = sig([['x', 'um']], [0.10005]); // 0.05% off
+    expect(signaturesMatch(a, b)).toBe(true);
+  });
+
+  it('matches tiny nanometer-scale values that are effectively equal', () => {
+    const a = sig([['x', 'nm']], [4]);
+    const b = sig([['x', 'nm']], [4.001]);
+    expect(signaturesMatch(a, b)).toBe(true);
+  });
+});
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx
index f16c19f83..888fdc8bb 100644
--- a/frontend/src/components/Help.tsx
+++ b/frontend/src/components/Help.tsx
@@ -46,6 +46,13 @@ function getHelpLinks(version: string | undefined): HelpLink[] {
         ? `https://github.com/JaneliaSciComp/fileglancer/releases/tag/${version}`
         : 'https://github.com/JaneliaSciComp/fileglancer/releases'
     },
+    {
+      icon: TbBrandGithub,
+      title: 'GitHub Repository',
+      description:
+        'Browse the source code, report issues, and contribute on GitHub',
+      url: 'https://github.com/JaneliaSciComp/fileglancer'
+    },
     {
       icon: SiClickup,
       title: 'Submit Tickets',
diff --git a/frontend/src/components/NGViews.tsx b/frontend/src/components/NGViews.tsx
index 76704dd7b..66ee5b295 100644
--- a/frontend/src/components/NGViews.tsx
+++ b/frontend/src/components/NGViews.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Typography } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
 
@@ -19,6 +19,18 @@ export default function NGViews() {
   const [renameItem, setRenameItem] = useState<View | undefined>(undefined);
   const [renameValue, setRenameValue] = useState('');
   const [deleteItem, setDeleteItem] = useState<View | undefined>(undefined);
+  // Sources column is user-resizable via a drag handle in its header. Width
+  // lives here (not in the column def) so a re-render on drag actually
+  // re-flows the CSS grid template.
+  const [sourcesColWidth, setSourcesColWidth] = useState(260);
+  const clampSourcesWidth = useCallback(
+    (w: number) => Math.max(120, Math.min(900, w)),
+    []
+  );
+  const handleSourcesResize = useCallback(
+    (next: number) => setSourcesColWidth(clampSourcesWidth(next)),
+    [clampSourcesWidth]
+  );
 
   const handleOpenRename = (item: View) => {
     setRenameItem(item);
@@ -55,24 +67,35 @@ export default function NGViews() {
     }
   };
 
-  const columns = useNGViewsColumns(handleOpenRename, setDeleteItem, baseUrl);
+  const columns = useNGViewsColumns(
+    handleOpenRename,
+    setDeleteItem,
+    baseUrl,
+    sourcesColWidth,
+    handleSourcesResize
+  );
+
+  // Fixed pixel tracks for every column except Sources (user-resizable).
+  // Fixed (not fr) so the row has a deterministic width — that's what lets
+  // the outer overflow-x-auto scroll when Sources grows past the viewport.
+  const gridColsStyle = `160px 80px ${sourcesColWidth}px 160px 160px 56px`;
 
   return (
     <>
       <div className="w-full">
         <Typography className="mb-2 text-foreground font-bold" type="h5">
-          Neuroglancer Views
+          Views
         </Typography>
         <Typography className="mb-4 text-foreground">
-          Your saved Neuroglancer Views.
+          Your saved Views.
         </Typography>
 
         <TableCard
           columns={columns}
           data={allViewsQuery.data || []}
-          dataType="NG views"
+          dataType="views"
           errorState={allViewsQuery.error}
-          gridColsClass="grid-cols-[2fr_0.6fr_1fr_1fr_0.6fr]"
+          gridColsStyle={gridColsStyle}
           loadingState={allViewsQuery.isPending}
         />
       </div>
diff --git a/frontend/src/components/NeuroglancerView.tsx b/frontend/src/components/NeuroglancerView.tsx
index fe6b9fdaf..32ab33b47 100644
--- a/frontend/src/components/NeuroglancerView.tsx
+++ b/frontend/src/components/NeuroglancerView.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
-import { useParams } from 'react-router';
-import { Typography } from '@material-tailwind/react';
+import type { IconType } from 'react-icons';
+import { Link, useParams } from 'react-router';
+import { IconButton, Typography } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
 import {
   HiOutlineDuplicate,
@@ -14,9 +15,32 @@ import { useInternalNeuroglancerBaseUrl } from '@/hooks/useDefaultNeuroglancerBa
 import { constructNeuroglancerUrl } from '@/utils/neuroglancerUrl';
 import { downloadTextFile } from '@/utils';
 import { copyToClipboard } from '@/utils/copyText';
-import FgButton from '@/components/designSystem/atoms/FgButton';
 import FgIcon from '@/components/designSystem/atoms/FgIcon';
 import FgLink from '@/components/designSystem/atoms/FgLink';
+import LogoSvg from '@/components/ui/Navbar/LogoSvg';
+import ProfileMenu from '@/components/ui/Navbar/ProfileMenu';
+import FgTooltip from '@/components/ui/widgets/FgTooltip';
+
+type ToolbarIconButtonProps = {
+  readonly label: string;
+  readonly icon: IconType;
+  readonly onClick: () => void;
+};
+
+function ToolbarIconButton({ label, icon, onClick }: ToolbarIconButtonProps) {
+  return (
+    <FgTooltip label={label}>
+      <IconButton
+        aria-label={label}
+        onClick={onClick}
+        size="sm"
+        variant="ghost"
+      >
+        <FgIcon icon={icon} size="lg" />
+      </IconButton>
+    </FgTooltip>
+  );
+}
 
 export default function NeuroglancerView() {
   const { readKey } = useParams();
@@ -82,50 +106,52 @@ export default function NeuroglancerView() {
       className="flex h-full w-full flex-col bg-background"
       ref={containerRef}
     >
-      <div className="flex shrink-0 flex-col gap-1 border-b border-surface px-4 py-2">
-        <div className="flex items-center gap-1 text-foreground/70">
-          <FgLink size="sm" to="/ngviews">
-            NG Views
-          </FgLink>
-          <Typography variant="small">/</Typography>
-          <Typography className="truncate" variant="small">
-            {title}
-          </Typography>
+      <div className="flex shrink-0 items-center justify-between gap-4 border-b border-surface px-4 py-2">
+        <div className="flex min-w-0 items-center gap-3">
+          <Link aria-label="Browse files" to="/browse">
+            <LogoSvg />
+          </Link>
+          <div className="flex min-w-0 items-center gap-1 text-foreground/70">
+            <FgLink className="font-semibold" to="/ngviews">
+              Views
+            </FgLink>
+            <Typography>/</Typography>
+            <Typography className="truncate">{title}</Typography>
+          </div>
         </div>
-        <div className="flex items-center justify-between gap-4">
-          <Typography
-            className="truncate text-foreground font-semibold"
-            type="h6"
-          >
-            {title}
-          </Typography>
-          <div className="flex shrink-0 items-center gap-2">
-            <FgButton onClick={() => void handleCopy()} variant="ghost">
-              <FgIcon icon={HiOutlineDuplicate} size="sm" /> Copy link
-            </FgButton>
-            <FgButton
+        <div className="flex shrink-0 items-center gap-4">
+          <div className="flex items-center gap-1">
+            <ToolbarIconButton
+              icon={HiOutlineDuplicate}
+              label="Copy link"
+              onClick={() => void handleCopy()}
+            />
+            <ToolbarIconButton
+              icon={HiOutlineDownload}
+              label="Download JSON"
               onClick={() =>
                 downloadTextFile(
                   JSON.stringify(ngState, null, 2),
                   `${title}.json`
                 )
               }
-              variant="ghost"
-            >
-              <FgIcon icon={HiOutlineDownload} size="sm" /> Download JSON
-            </FgButton>
-            <FgButton
+            />
+            <ToolbarIconButton
+              icon={HiOutlineExternalLink}
+              label="Open in Neuroglancer"
               onClick={() =>
                 window.open(externalUrl, '_blank', 'noopener,noreferrer')
               }
-              variant="ghost"
-            >
-              <FgIcon icon={HiOutlineExternalLink} size="sm" /> Open external
-            </FgButton>
-            <FgButton onClick={handleFullscreen} variant="ghost">
-              <FgIcon icon={HiOutlineArrowsExpand} size="sm" /> Fullscreen
-            </FgButton>
+            />
+            <ToolbarIconButton
+              icon={HiOutlineArrowsExpand}
+              label="Fullscreen"
+              onClick={handleFullscreen}
+            />
           </div>
+          <FgTooltip label="Profile & settings">
+            <ProfileMenu />
+          </FgTooltip>
         </div>
       </div>
       <iframe
diff --git a/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx b/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
index 227afdd7e..350e42386 100644
--- a/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
+++ b/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
@@ -1,7 +1,7 @@
 import { Typography } from '@material-tailwind/react';
 import { Link } from 'react-router';
 import fallback_logo from '@/assets/fallback_logo.png';
-import { HiOutlineClipboardCopy } from 'react-icons/hi';
+import { HiOutlineClipboardCopy, HiOutlinePlusCircle } from 'react-icons/hi';
 import { HiOutlineEllipsisHorizontalCircle } from 'react-icons/hi2';
 
 import type { OpenWithToolUrls, PendingToolKey } from '@/hooks/useZarrMetadata';
@@ -64,6 +64,7 @@ export default function DataToolLinks({
   compact = false,
   dataLinkUrl,
   fspName,
+  onCreateView,
   onToolClick,
   path,
   showCopiedTooltip,
@@ -73,6 +74,7 @@ export default function DataToolLinks({
   readonly compact?: boolean;
   readonly dataLinkUrl?: string;
   readonly fspName?: string;
+  readonly onCreateView?: () => void;
   readonly onToolClick: (toolKey: PendingToolKey) => Promise<void>;
   readonly path?: string;
   readonly showCopiedTooltip: boolean;
@@ -130,6 +132,20 @@ export default function DataToolLinks({
           <span className={LABEL_CLASSES}>Copy</span>
         </div>
 
+        {onCreateView ? (
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip
+              as="button"
+              label="Create a view of this dataset"
+              onClick={() => onCreateView()}
+              triggerClasses={CIRCLE_CLASSES}
+            >
+              <FgIcon className="text-foreground" icon={HiOutlinePlusCircle} />
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Create view</span>
+          </div>
+        ) : null}
+
         {dataLinkUrl && fspName && path ? (
           <div className="flex flex-col items-center w-16">
             <DialogIconBtn
diff --git a/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx b/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx
index d7d0aa8f6..820ce3dab 100644
--- a/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx
+++ b/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Typography } from '@material-tailwind/react';
+import { useNavigate } from 'react-router';
 import type { UseQueryResult } from '@tanstack/react-query';
 
 import zarrLogo from '@/assets/zarr.jpg';
@@ -13,6 +14,7 @@ import type {
   PendingToolKey
 } from '@/hooks/useZarrMetadata';
 import useDataToolLinks from '@/hooks/useDataToolLinks';
+import { useCreateViewFlow } from '@/hooks/useCreateViewFlow';
 import { Metadata, getDatasetWarnings } from '@/omezarr-helper';
 
 type ZarrPreviewProps = {
@@ -60,6 +62,18 @@ export default function ZarrPreview({
     setPendingToolKey
   );
 
+  const navigate = useNavigate();
+  const { startCreateView, dialog } = useCreateViewFlow();
+
+  const datasetLabel = path.split('/').filter(Boolean).pop() || path;
+  const handleCreateView = () => {
+    startCreateView(
+      [{ fsp_name: fspName, path, label: datasetLabel }],
+      datasetLabel,
+      view => navigate(`/view/${view.read_key}`)
+    );
+  };
+
   return (
     <div className="min-w-full p-4 shadow-sm rounded-md bg-primary-light/30">
       {warnings.length > 0 ? (
@@ -113,6 +127,7 @@ export default function ZarrPreview({
               compact={mainPanelWidth <= 1000}
               dataLinkUrl={openWithToolUrls.copy || undefined}
               fspName={fspName}
+              onCreateView={handleCreateView}
               onToolClick={handleToolClick}
               path={path}
               showCopiedTooltip={showCopiedTooltip}
@@ -146,6 +161,7 @@ export default function ZarrPreview({
           </div>
         ) : null}
       </div>
+      {dialog}
     </div>
   );
 }
diff --git a/frontend/src/components/ui/Dialogs/DataLink.tsx b/frontend/src/components/ui/Dialogs/DataLink.tsx
index 8a042b7cb..574197868 100644
--- a/frontend/src/components/ui/Dialogs/DataLink.tsx
+++ b/frontend/src/components/ui/Dialogs/DataLink.tsx
@@ -366,8 +366,8 @@ export default function DataLinkDialog(props: DataLinkDialogProps) {
             {dependentViews && dependentViews.length > 0 ? (
               <div className="flex flex-col gap-2 bg-surface/30 p-2 rounded">
                 <Typography className="text-foreground font-semibold">
-                  These Neuroglancer Views you own use this data link and will
-                  be marked broken:
+                  These Views you own use this data link and will be marked
+                  broken:
                 </Typography>
                 <ul className="list-disc pl-5">
                   {dependentViews.map(v => (
diff --git a/frontend/src/components/ui/Navbar/LogoSvg.tsx b/frontend/src/components/ui/Navbar/LogoSvg.tsx
new file mode 100644
index 000000000..964a81640
--- /dev/null
+++ b/frontend/src/components/ui/Navbar/LogoSvg.tsx
@@ -0,0 +1,38 @@
+type LogoSvgProps = {
+  readonly className?: string;
+};
+
+// Fileglancer "paper with eye" logo mark. Shared by the app navbar and the
+// embedded viewer's collapsed top bar.
+export default function LogoSvg({
+  className = 'icon-large short:icon-small text-primary'
+}: LogoSvgProps) {
+  return (
+    <svg
+      className={className}
+      fill="currentColor"
+      stroke="currentColor"
+      version="1.1"
+      viewBox="0 0 18 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M 16.49997,21 V 9 h -5.25 c -1.24218,0 -2.25,-1.00781 -2.25,-2.25 V 1.5 h -6 c -0.82968,0 -1.5,0.67032 -1.5,1.5 v 18 c 0,0.82969 0.67032,1.5 1.5,1.5 h 12 c 0.82969,0 1.5,-0.67031 1.5,-1.5 z M 16.47657,7.5 C 16.44377,7.36875 16.37817,7.24688 16.27969,7.15313 L 10.84688,1.72032 C 10.74848,1.62192 10.63125,1.55625 10.5,1.52344 V 6.75 c 0,0.4125 0.3375,0.75 0.75,0.75 z M 0,3 C 0,1.34532 1.34532,0 3,0 h 7.31719 c 0.59531,0 1.16719,0.23907 1.58906,0.66094 l 5.43282,5.42813 C 17.76094,6.51094 18,7.08282 18,7.67813 V 21 c 0,1.65469 -1.34531,3 -3,3 H 3 C 1.34532,24 0,22.65469 0,21 Z"
+        stroke="currentColor"
+        strokeWidth="0.046875"
+      />
+      <g transform="matrix(0.61810071,0,0,0.61810071,-80.271649,-148.50575)">
+        <path
+          d="m 144.45891,267.17308 c 1.6569,0 3,-1.3431 3,-3 0,-1.6569 -1.3431,-3 -3,-3 -1.6569,0 -3,1.3431 -3,3 0,1.6569 1.3431,3 3,3 z"
+          stroke="currentColor"
+        />
+        <path
+          clipRule="evenodd"
+          d="m 133.78232,263.61978 c 1.48725,-4.47099 5.7045,-7.6967 10.67709,-7.6967 4.9703,0 9.1859,3.22271 10.675,7.6905 0.1204,0.361 0.1205,0.7517 4e-4,1.1128 -1.4873,4.471 -5.7045,7.6967 -10.6771,7.6967 -4.97033,0 -9.18596,-3.2227 -10.67506,-7.6905 -0.12034,-0.361 -0.12046,-0.7517 -3.3e-4,-1.1128 z m 15.92659,0.5533 c 0,2.8995 -2.3505,5.25 -5.25,5.25 -2.8995,0 -5.25,-2.3505 -5.25,-5.25 0,-2.8995 2.3505,-5.25 5.25,-5.25 2.8995,0 5.25,2.3505 5.25,5.25 z"
+          fillRule="evenodd"
+          stroke="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/frontend/src/components/ui/Navbar/Navbar.tsx b/frontend/src/components/ui/Navbar/Navbar.tsx
index d242e0162..9d871b78a 100644
--- a/frontend/src/components/ui/Navbar/Navbar.tsx
+++ b/frontend/src/components/ui/Navbar/Navbar.tsx
@@ -11,11 +11,9 @@ import { Link } from 'react-router';
 import type { IconType } from 'react-icons';
 import {
   HiOutlineQuestionMarkCircle,
-  HiOutlineMoon,
   HiOutlineMenu,
   HiOutlineX,
   HiOutlineShare,
-  HiOutlineSun,
   HiOutlineEye
 } from 'react-icons/hi';
 import {
@@ -23,12 +21,11 @@ import {
   HiOutlineBriefcase,
   HiOutlineRocketLaunch
 } from 'react-icons/hi2';
-import { TbBrandGithub } from 'react-icons/tb';
 
 import FgIcon from '@/components/designSystem/atoms/FgIcon';
+import LogoSvg from '@/components/ui/Navbar/LogoSvg';
 import ProfileMenu from '@/components/ui/Navbar/ProfileMenu';
 import FgTooltip from '@/components/ui/widgets/FgTooltip';
-import useTheme from '@/hooks/useTheme';
 import { useActiveJobCount } from '@/hooks/useActiveJobCount';
 import { trackEvent } from '@/utils/fathom';
 
@@ -39,38 +36,6 @@ type NavLink = {
   badge?: number;
 };
 
-// Logo SVG component to reduce JSX nesting depth
-function LogoSvg() {
-  return (
-    <svg
-      className="icon-large short:icon-small text-primary"
-      fill="currentColor"
-      stroke="currentColor"
-      version="1.1"
-      viewBox="0 0 18 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M 16.49997,21 V 9 h -5.25 c -1.24218,0 -2.25,-1.00781 -2.25,-2.25 V 1.5 h -6 c -0.82968,0 -1.5,0.67032 -1.5,1.5 v 18 c 0,0.82969 0.67032,1.5 1.5,1.5 h 12 c 0.82969,0 1.5,-0.67031 1.5,-1.5 z M 16.47657,7.5 C 16.44377,7.36875 16.37817,7.24688 16.27969,7.15313 L 10.84688,1.72032 C 10.74848,1.62192 10.63125,1.55625 10.5,1.52344 V 6.75 c 0,0.4125 0.3375,0.75 0.75,0.75 z M 0,3 C 0,1.34532 1.34532,0 3,0 h 7.31719 c 0.59531,0 1.16719,0.23907 1.58906,0.66094 l 5.43282,5.42813 C 17.76094,6.51094 18,7.08282 18,7.67813 V 21 c 0,1.65469 -1.34531,3 -3,3 H 3 C 1.34532,24 0,22.65469 0,21 Z"
-        stroke="currentColor"
-        strokeWidth="0.046875"
-      />
-      <g transform="matrix(0.61810071,0,0,0.61810071,-80.271649,-148.50575)">
-        <path
-          d="m 144.45891,267.17308 c 1.6569,0 3,-1.3431 3,-3 0,-1.6569 -1.3431,-3 -3,-3 -1.6569,0 -3,1.3431 -3,3 0,1.6569 1.3431,3 3,3 z"
-          stroke="currentColor"
-        />
-        <path
-          clipRule="evenodd"
-          d="m 133.78232,263.61978 c 1.48725,-4.47099 5.7045,-7.6967 10.67709,-7.6967 4.9703,0 9.1859,3.22271 10.675,7.6905 0.1204,0.361 0.1205,0.7517 4e-4,1.1128 -1.4873,4.471 -5.7045,7.6967 -10.6771,7.6967 -4.97033,0 -9.18596,-3.2227 -10.67506,-7.6905 -0.12034,-0.361 -0.12046,-0.7517 -3.3e-4,-1.1128 z m 15.92659,0.5533 c 0,2.8995 -2.3505,5.25 -5.25,5.25 -2.8995,0 -5.25,-2.3505 -5.25,-5.25 0,-2.8995 2.3505,-5.25 5.25,-5.25 2.8995,0 5.25,2.3505 5.25,5.25 z"
-          fillRule="evenodd"
-          stroke="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
-
 // Links list component
 function NavList() {
   const tasksEnabled = import.meta.env.VITE_ENABLE_TASKS === 'true';
@@ -81,7 +46,7 @@ function NavList() {
     { icon: HiOutlineShare, title: 'Data Links', href: '/links' },
     {
       icon: HiOutlineEye,
-      title: 'NG Views',
+      title: 'Views',
       href: '/ngviews'
     },
     {
@@ -150,20 +115,13 @@ function NavList() {
 // Composed navbar
 export default function FileglancerNavbar() {
   const [openNav, setOpenNav] = useState(false);
-  const { toggleTheme, isLightTheme, setIsLightTheme } = useTheme();
 
   useEffect(() => {
     window.addEventListener(
       'resize',
       () => window.innerWidth >= 960 && setOpenNav(false)
     );
-    // Set theme from local storage
-    const theme = localStorage.getItem('theme');
-    if (theme === 'dark') {
-      setIsLightTheme(false);
-      document.documentElement.classList.add('dark');
-    }
-  }, [setIsLightTheme]);
+  }, []);
 
   return (
     <>
@@ -193,53 +151,8 @@ export default function FileglancerNavbar() {
           </List>
         </div>
 
-        {/* Theme toggle and profile dropdown menu */}
+        {/* Profile dropdown menu */}
         <div className="flex items-center gap-1">
-          <FgTooltip label="GitHub">
-            <IconButton
-              as={Link}
-              className="text-foreground hover:!text-foreground focus:!text-foreground hover:bg-hover-gradient hover:dark:bg-hover-gradient-dark focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark"
-              color="secondary"
-              onClick={() => trackEvent({ eventId: 'navbar_github_click' })}
-              rel="noopener noreferrer"
-              size="sm"
-              target="_blank"
-              to="https://github.com/JaneliaSciComp/fileglancer"
-              variant="ghost"
-            >
-              <FgIcon
-                className="short:icon-default"
-                icon={TbBrandGithub}
-                size="lg"
-              />
-            </IconButton>
-          </FgTooltip>
-          <FgTooltip label="Toggle light/dark themes">
-            <IconButton
-              className="text-foreground hover:!text-foreground focus:!text-foreground hover:bg-hover-gradient hover:dark:bg-hover-gradient-dark focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark"
-              color="secondary"
-              onClick={() => {
-                trackEvent({ eventId: 'navbar_theme_toggle_click' });
-                toggleTheme();
-              }}
-              size="sm"
-              variant="ghost"
-            >
-              {isLightTheme ? (
-                <FgIcon
-                  className="stroke-2 short:icon-default"
-                  icon={HiOutlineSun}
-                  size="lg"
-                />
-              ) : (
-                <FgIcon
-                  className="stroke-2 short:icon-default"
-                  icon={HiOutlineMoon}
-                  size="lg"
-                />
-              )}
-            </IconButton>
-          </FgTooltip>
           <FgTooltip label="Profile & settings">
             <ProfileMenu />
           </FgTooltip>
diff --git a/frontend/src/components/ui/Navbar/ProfileMenu.tsx b/frontend/src/components/ui/Navbar/ProfileMenu.tsx
index b1d8a3cc2..ee2452a30 100644
--- a/frontend/src/components/ui/Navbar/ProfileMenu.tsx
+++ b/frontend/src/components/ui/Navbar/ProfileMenu.tsx
@@ -3,7 +3,9 @@ import {
   HiOutlineLogout,
   HiOutlineUserCircle,
   HiOutlineBell,
-  HiOutlineKey
+  HiOutlineKey,
+  HiOutlineMoon,
+  HiOutlineSun
 } from 'react-icons/hi';
 import { HiOutlineAdjustmentsHorizontal } from 'react-icons/hi2';
 import { Link } from 'react-router';
@@ -11,10 +13,12 @@ import { Link } from 'react-router';
 import FgIcon from '@/components/designSystem/atoms/FgIcon';
 import { useProfileContext } from '@/contexts/ProfileContext';
 import { useAuthContext } from '@/contexts/AuthContext';
+import useTheme from '@/hooks/useTheme';
 
 export default function ProfileMenu() {
   const { profile } = useProfileContext();
   const { logout, authStatus } = useAuthContext();
+  const { isDark, toggleTheme } = useTheme();
   const sshKeysEnabled = import.meta.env.VITE_ENABLE_SSH_KEYS === 'true';
 
   const handleLogout = async () => {
@@ -69,6 +73,16 @@ export default function ProfileMenu() {
               <FgIcon className="mr-2" icon={HiOutlineBell} />
               Notifications
             </Menu.Item>
+            <Menu.Item
+              className="text-foreground hover:!text-foreground focus:!text-foreground hover:bg-hover-gradient hover:dark:bg-hover-gradient-dark focus:bg-hover-gradient focus:dark:bg-hover-gradient-dark"
+              onClick={toggleTheme}
+            >
+              <FgIcon
+                className="mr-2"
+                icon={isDark ? HiOutlineSun : HiOutlineMoon}
+              />
+              {isDark ? 'Light theme' : 'Dark theme'}
+            </Menu.Item>
             {sshKeysEnabled ? (
               <Menu.Item
                 as={Link}
diff --git a/frontend/src/components/ui/PreferencesPage/NeuroglancerOptions.tsx b/frontend/src/components/ui/PreferencesPage/NeuroglancerOptions.tsx
index cd182d5f7..ca26e3a80 100644
--- a/frontend/src/components/ui/PreferencesPage/NeuroglancerOptions.tsx
+++ b/frontend/src/components/ui/PreferencesPage/NeuroglancerOptions.tsx
@@ -1,4 +1,3 @@
-import { Typography } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
 
 import FgSwitch from '@/components/designSystem/atoms/formElements/FgSwitch';
diff --git a/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx b/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx
index b846c5716..cefeabbdf 100644
--- a/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx
+++ b/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx
@@ -169,7 +169,7 @@ export default function PropertiesDrawer({
   const tooltipTriggerClasses = 'max-w-[calc(100%-2rem)] truncate';
 
   return (
-    <div data-tour="properties-drawer">
+    <div className="h-full" data-tour="properties-drawer">
       <Card className="overflow-auto w-full h-full max-h-full p-3 rounded-none shadow-none flex flex-col border-0">
         <div className="flex items-center justify-between gap-4 mb-1 shrink-0">
           <div className="flex items-center gap-2 min-w-0">
diff --git a/frontend/src/components/ui/Table/TableCard.tsx b/frontend/src/components/ui/Table/TableCard.tsx
index efe2129bb..fab7a8f43 100644
--- a/frontend/src/components/ui/Table/TableCard.tsx
+++ b/frontend/src/components/ui/Table/TableCard.tsx
@@ -74,7 +74,7 @@ type DataType =
   | 'data links'
   | 'tasks'
   | 'NG links'
-  | 'NG views'
+  | 'views'
   | 'jobs'
   | 'apps'
   | 'shared apps';
@@ -84,7 +84,12 @@ type TableProps<TData> = {
   readonly data: TData[];
   readonly dataType: DataType;
   readonly errorState: Error | unknown;
-  readonly gridColsClass: string;
+  // Static Tailwind grid-cols-[...] class OR a dynamic gridTemplateColumns
+  // inline style value (used when a column is user-resizable, since Tailwind
+  // JIT can't emit arbitrary-width classes at runtime). Exactly one of the
+  // two should be set; if both are given, gridColsStyle wins.
+  readonly gridColsClass?: string;
+  readonly gridColsStyle?: string;
   readonly loadingState: boolean;
   readonly headerActions?: ReactNode;
   readonly initialPageSize?: number;
@@ -146,12 +151,12 @@ function HeaderIcons<TData, TValue>({
 }) {
   return (
     <div
-      className={`flex flex-col ${
+      className={`flex flex-col w-full h-full ${
         header.column.getCanSort() ? 'cursor-pointer' : ''
       }`}
       onClick={header.column.getToggleSortingHandler()}
     >
-      <div className="flex items-center gap-2 font-semibold select-none group/sort">
+      <div className="flex items-center gap-2 w-full h-full font-semibold select-none group/sort">
         {flexRender(header.column.columnDef.header, header.getContext())}
         <SortIcons header={header} />
       </div>
@@ -306,14 +311,17 @@ function TableHeader({
 
 function TableRow({
   gridColsClass,
+  gridColsStyle,
   children
 }: {
-  readonly gridColsClass: string;
+  readonly gridColsClass?: string;
+  readonly gridColsStyle?: string;
   readonly children: ReactNode;
 }) {
   return (
     <div
-      className={`grid ${gridColsClass} min-h-16 justify-items-start gap-4 px-4 border-b border-surface last:border-0`}
+      className={`grid ${gridColsClass ?? ''} min-h-16 justify-items-start gap-4 px-4 border-b border-surface last:border-0 ${gridColsStyle ? 'min-w-max' : ''}`}
+      style={gridColsStyle ? { gridTemplateColumns: gridColsStyle } : undefined}
     >
       {children}
     </div>
@@ -324,6 +332,7 @@ function Table<TData>({
   columns,
   data,
   gridColsClass,
+  gridColsStyle,
   loadingState,
   errorState,
   dataType,
@@ -429,59 +438,71 @@ function Table<TData>({
           setGlobalFilter={handleInputChange}
           table={table}
         />
-        <div
-          className={`shrink-0 grid ${gridColsClass} gap-4 px-4 py-2 bg-surface/30`}
-        >
-          {table
-            .getHeaderGroups()
-            .map(headerGroup =>
-              headerGroup.headers.map(header =>
-                header.isPlaceholder ? null : (
-                  <HeaderIcons header={header} key={header.id} />
+        <div className="overflow-x-auto">
+          <div
+            className={`shrink-0 grid ${gridColsClass ?? ''} gap-4 px-4 py-2 bg-surface/30 ${gridColsStyle ? 'min-w-max' : ''}`}
+            style={
+              gridColsStyle ? { gridTemplateColumns: gridColsStyle } : undefined
+            }
+          >
+            {table
+              .getHeaderGroups()
+              .map(headerGroup =>
+                headerGroup.headers.map(header =>
+                  header.isPlaceholder ? null : (
+                    <HeaderIcons header={header} key={header.id} />
+                  )
                 )
-              )
-            )}
-        </div>
-        {/* Body */}
-        {loadingState ? (
-          <TableRowSkeleton gridColsClass={gridColsClass} />
-        ) : data && data.length > 0 ? (
-          table.getRowModel().rows.length > 0 ? (
-            <div className="max-h-full" id="table-body">
-              {table.getRowModel().rows.map(row => (
-                <TableRow gridColsClass={gridColsClass} key={row.id}>
-                  {row.getVisibleCells().map(cell => (
-                    <Fragment key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </Fragment>
-                  ))}
-                </TableRow>
-              ))}
+              )}
+          </div>
+          {/* Body */}
+          {loadingState ? (
+            <TableRowSkeleton
+              gridColsClass={gridColsClass}
+              gridColsStyle={gridColsStyle}
+            />
+          ) : data && data.length > 0 ? (
+            table.getRowModel().rows.length > 0 ? (
+              <div className="max-h-full" id="table-body">
+                {table.getRowModel().rows.map(row => (
+                  <TableRow
+                    gridColsClass={gridColsClass}
+                    gridColsStyle={gridColsStyle}
+                    key={row.id}
+                  >
+                    {row.getVisibleCells().map(cell => (
+                      <Fragment key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </Fragment>
+                    ))}
+                  </TableRow>
+                ))}
+              </div>
+            ) : (
+              <div className="px-4 py-8 text-center text-foreground">
+                {dataType
+                  ? `No ${dataType} match your query`
+                  : 'No data matches your query'}
+              </div>
+            )
+          ) : errorState ? (
+            <div className="px-4 py-8 text-center text-error">
+              Error loading data:{' '}
+              {errorState instanceof Error
+                ? errorState.message
+                : String(errorState)}
             </div>
-          ) : (
+          ) : !data || data.length === 0 ? (
             <div className="px-4 py-8 text-center text-foreground">
               {dataType
-                ? `No ${dataType} match your query`
-                : 'No data matches your query'}
+                ? `You have not created any ${dataType} yet`
+                : 'No data available'}
             </div>
-          )
-        ) : errorState ? (
-          <div className="px-4 py-8 text-center text-error">
-            Error loading data:{' '}
-            {errorState instanceof Error
-              ? errorState.message
-              : String(errorState)}
-          </div>
-        ) : !data || data.length === 0 ? (
-          <div className="px-4 py-8 text-center text-foreground">
-            {dataType
-              ? `You have not created any ${dataType} yet`
-              : 'No data available'}
-          </div>
-        ) : null}
+          ) : null}
+        </div>
       </div>
       {showContextMenu ? (
         <ContextMenu
@@ -500,6 +521,7 @@ function TableCard<TData>({
   columns,
   data,
   gridColsClass,
+  gridColsStyle,
   loadingState,
   errorState,
   dataType,
@@ -514,6 +536,7 @@ function TableCard<TData>({
         dataType={dataType}
         errorState={errorState}
         gridColsClass={gridColsClass}
+        gridColsStyle={gridColsStyle}
         headerActions={headerActions}
         initialPageSize={initialPageSize}
         loadingState={loadingState}
diff --git a/frontend/src/components/ui/Table/ngViewsColumns.tsx b/frontend/src/components/ui/Table/ngViewsColumns.tsx
index b70a3cc15..e175e1286 100644
--- a/frontend/src/components/ui/Table/ngViewsColumns.tsx
+++ b/frontend/src/components/ui/Table/ngViewsColumns.tsx
@@ -1,17 +1,27 @@
-import { useMemo } from 'react';
+import { useMemo, useRef, useState } from 'react';
+import type { MouseEvent } from 'react';
 import { Link, useNavigate } from 'react-router';
 import { Typography } from '@material-tailwind/react';
 import type { ColumnDef } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
 import type { View } from '@/queries/viewQueries';
-import { downloadTextFile, formatDateString, makeBrowseLink } from '@/utils';
+import {
+  downloadTextFile,
+  formatDateString,
+  getPreferredPathForDisplay,
+  makeBrowseLink,
+  makeMapKey
+} from '@/utils';
 import { constructNeuroglancerUrl } from '@/utils/neuroglancerUrl';
 import { copyToClipboard } from '@/utils/copyText';
 import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
+import { usePreferencesContext } from '@/contexts/PreferencesContext';
+import { useZoneAndFspMapContext } from '@/contexts/ZonesAndFspMapContext';
 import FgTooltip from '../widgets/FgTooltip';
 import CardActionsMenu from '@/components/ui/Menus/CardActionsMenu';
 import type { MenuItem } from '@/components/ui/Menus/FgMenuItems';
+import type { FileSharePath } from '@/shared.types';
 
 const TRIGGER_CLASSES = 'h-min max-w-full';
 
@@ -86,7 +96,7 @@ export function ActionsCell({
   ];
 
   return (
-    <div className="min-w-0 flex items-center">
+    <div className="min-w-0 flex items-center justify-start">
       <div onClick={e => e.stopPropagation()}>
         <CardActionsMenu<ViewRowActionProps>
           actionProps={{ item, baseUrl, onRename, onDelete }}
@@ -97,15 +107,69 @@ export function ActionsCell({
   );
 }
 
+// ponytail: drag handle for the Sources column. Local drag state lives in
+// refs (start-x, start-width) so re-renders during drag don't reset it;
+// pointer capture is via document mousemove/mouseup listeners bound at
+// mousedown, so releasing outside the header still ends the drag.
+function SourcesResizeHandle({
+  sourcesColWidth,
+  onResize
+}: {
+  readonly sourcesColWidth: number;
+  readonly onResize: (next: number) => void;
+}) {
+  const startX = useRef(0);
+  const startWidth = useRef(sourcesColWidth);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    // Header row toggles sort on click; keep the drag from also sorting.
+    e.preventDefault();
+    e.stopPropagation();
+    startX.current = e.clientX;
+    startWidth.current = sourcesColWidth;
+    setIsDragging(true);
+    const onMove = (ev: globalThis.MouseEvent) => {
+      onResize(startWidth.current + (ev.clientX - startX.current));
+    };
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      document.body.style.removeProperty('cursor');
+      document.body.style.removeProperty('user-select');
+      setIsDragging(false);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  };
+
+  return (
+    <div
+      aria-hidden="true"
+      className={`cursor-col-resize absolute z-10 -right-1 top-0 h-full w-3 bg-transparent group/resize ${isDragging ? 'is-dragging' : ''}`}
+      onClick={e => e.stopPropagation()}
+      onMouseDown={handleMouseDown}
+    >
+      <div className="absolute left-1/2 top-0 h-full w-[2px] -translate-x-1/2 bg-surface-foreground/50 group-hover/resize:bg-primary group-hover/resize:w-[3px] group-[.is-dragging]/resize:bg-primary group-[.is-dragging]/resize:w-[3px]" />
+    </div>
+  );
+}
+
 export function useNGViewsColumns(
   onRename: (item: View) => void,
   onDelete: (item: View) => void,
-  baseUrl: string
+  baseUrl: string,
+  sourcesColWidth: number,
+  onSourcesResize: (next: number) => void
 ): ColumnDef<View>[] {
   // Views listed here are the current user's own, so their backing Data Links
   // are in this (current-user-scoped) query. Layers whose Data Link is missing
   // or broken simply don't resolve to a browse link.
   const proxiedPathsQuery = useAllProxiedPathsQuery();
+  const { pathPreference } = usePreferencesContext();
+  const { zonesAndFspQuery } = useZoneAndFspMapContext();
   const pathById = useMemo(() => {
     const map = new Map<number, { fsp_name: string; path: string }>();
     for (const p of proxiedPathsQuery.data ?? []) {
@@ -123,11 +187,14 @@ export function useNGViewsColumns(
           const item = row.original;
           const label = item.name || item.short_key;
           return (
-            <div className="flex items-center truncate w-full h-full">
+            <div className="flex items-center justify-start truncate w-full h-full text-left">
               <FgTooltip label={label} triggerClasses={TRIGGER_CLASSES}>
-                <Typography className="text-foreground truncate select-all">
+                <Link
+                  className="text-primary truncate text-left hover:underline"
+                  to={`/view/${item.read_key}`}
+                >
                   {label}
-                </Typography>
+                </Link>
               </FgTooltip>
             </div>
           );
@@ -143,8 +210,8 @@ export function useNGViewsColumns(
         header: 'Layers',
         accessorFn: row => row.layers.length,
         cell: ({ getValue }) => (
-          <div className="flex items-center h-full">
-            <Typography className="text-foreground" variant="small">
+          <div className="flex items-center justify-start h-full text-left">
+            <Typography className="text-foreground text-left" variant="small">
               {getValue() as number}
             </Typography>
           </div>
@@ -153,7 +220,15 @@ export function useNGViewsColumns(
       },
       {
         id: 'sources',
-        header: 'Sources',
+        header: () => (
+          <div className="relative flex items-center w-full h-full text-left select-none">
+            <span>Sources</span>
+            <SourcesResizeHandle
+              onResize={onSourcesResize}
+              sourcesColWidth={sourcesColWidth}
+            />
+          </div>
+        ),
         cell: ({ row }) => {
           // De-dupe: per-channel layers of one dataset share a source path.
           const seen = new Set<string>();
@@ -174,25 +249,37 @@ export function useNGViewsColumns(
           }
           if (sources.length === 0) {
             return (
-              <div className="flex items-center h-full">
-                <Typography className="text-foreground/60" variant="small">
+              <div className="flex items-center justify-start h-full w-full text-left">
+                <Typography
+                  className="text-foreground/60 text-left"
+                  variant="small"
+                >
                   —
                 </Typography>
               </div>
             );
           }
           return (
-            <div className="flex flex-col justify-center gap-0.5 h-full min-w-0">
-              {sources.map(src => (
-                <Link
-                  className="text-primary text-xs truncate hover:underline"
-                  key={`${src.fsp_name}::${src.path}`}
-                  onClick={e => e.stopPropagation()}
-                  to={makeBrowseLink(src.fsp_name, src.path)}
-                >
-                  {src.path}
-                </Link>
-              ))}
+            <div className="flex flex-col justify-center gap-0.5 h-full w-full min-w-0 text-left">
+              {sources.map(src => {
+                const fsp = zonesAndFspQuery.data?.[
+                  makeMapKey('fsp', src.fsp_name)
+                ] as FileSharePath | undefined;
+                const fullPath =
+                  getPreferredPathForDisplay(pathPreference, fsp, src.path) ||
+                  src.path;
+                return (
+                  <Link
+                    className="block max-w-full truncate text-primary text-xs text-left hover:underline"
+                    key={`${src.fsp_name}::${src.path}`}
+                    onClick={e => e.stopPropagation()}
+                    title={fullPath}
+                    to={makeBrowseLink(src.fsp_name, src.path)}
+                  >
+                    {fullPath}
+                  </Link>
+                );
+              })}
             </div>
           );
         },
@@ -202,8 +289,8 @@ export function useNGViewsColumns(
         accessorKey: 'sharing_mode',
         header: 'Sharing',
         cell: ({ row }) => (
-          <div className="flex items-center h-full">
-            <Typography className="text-foreground" variant="small">
+          <div className="flex items-center justify-start h-full text-left">
+            <Typography className="text-foreground text-left" variant="small">
               {SHARING_LABEL[row.original.sharing_mode]}
             </Typography>
           </div>
@@ -214,8 +301,11 @@ export function useNGViewsColumns(
         accessorKey: 'updated_at',
         header: 'Updated',
         cell: ({ cell }) => (
-          <div className="flex items-center h-full">
-            <Typography className="text-foreground truncate" variant="small">
+          <div className="flex items-center justify-start h-full text-left">
+            <Typography
+              className="text-foreground truncate text-left"
+              variant="small"
+            >
               {formatDateString(cell.getValue() as string)}
             </Typography>
           </div>
@@ -236,6 +326,15 @@ export function useNGViewsColumns(
         enableSorting: false
       }
     ],
-    [onRename, onDelete, baseUrl, pathById]
+    [
+      onRename,
+      onDelete,
+      baseUrl,
+      pathById,
+      sourcesColWidth,
+      onSourcesResize,
+      pathPreference,
+      zonesAndFspQuery.data
+    ]
   );
 }
diff --git a/frontend/src/components/ui/Views/CartDatasetRow.tsx b/frontend/src/components/ui/Views/CartDatasetRow.tsx
index 043007d36..9acc4a294 100644
--- a/frontend/src/components/ui/Views/CartDatasetRow.tsx
+++ b/frontend/src/components/ui/Views/CartDatasetRow.tsx
@@ -2,15 +2,18 @@ import { useState } from 'react';
 import { Link } from 'react-router';
 import { Collapse, IconButton, Typography } from '@material-tailwind/react';
 import { HiChevronRight, HiOutlineTrash } from 'react-icons/hi';
+import { HiExclamationTriangle } from 'react-icons/hi2';
 import toast from 'react-hot-toast';
 
 import FgIcon from '@/components/designSystem/atoms/FgIcon';
 import FgCheckbox from '@/components/designSystem/atoms/formElements/FgCheckbox';
+import FgTooltip from '@/components/ui/widgets/FgTooltip';
 import ZarrAxisTable from '@/components/ui/BrowsePage/ZarrAxisTable';
 import { useCartContext } from '@/contexts/CartContext';
 import { getOmeZarrChannels, getOmeZarrMetadata } from '@/omezarr-helper';
 import type { Metadata } from '@/omezarr-helper';
 import { makeBrowseLink } from '@/utils';
+import { getFileURL } from '@/utils/pathHandling';
 import type { CartItem } from '@/contexts/CartContext';
 
 interface CartDatasetRowProps {
@@ -18,20 +21,20 @@ interface CartDatasetRowProps {
   readonly path: string;
   readonly label: string;
   readonly items: CartItem[];
-  readonly dataLinkUrl: string | undefined;
+  readonly mismatch?: boolean;
 }
 
 // ponytail: two-level dataset->channel tree via MT Collapse (no generic
-// TreeView exists). Channel URL comes from an existing Data Link; if a
-// dataset has no link yet, expansion is disabled with a hint rather than
-// creating a link just to browse channels. Non-Zarr/N5 datasets simply fail
-// getOmeZarrChannels gracefully (toast) instead of a hard pre-check.
+// TreeView exists). Metadata/channels are fetched from the internal
+// /api/content URL (credentialed), so no Data Link is required to inspect
+// dimensions or pick channels. Non-Zarr/N5 datasets fail gracefully in
+// getOmeZarrChannels (toast) instead of a hard pre-check.
 export default function CartDatasetRow({
   fsp_name,
   path,
   label,
   items,
-  dataLinkUrl
+  mismatch
 }: CartDatasetRowProps) {
   const { addToCart, removeFromCart, removeManyFromCart } = useCartContext();
   const [isOpen, setIsOpen] = useState(false);
@@ -47,10 +50,14 @@ export default function CartDatasetRow({
   const handleToggleOpen = async () => {
     const nextOpen = !isOpen;
     setIsOpen(nextOpen);
-    if (nextOpen && channels === undefined && !loadingChannels && dataLinkUrl) {
+    if (!nextOpen) {
+      return;
+    }
+    const dataUrl = getFileURL(fsp_name, path);
+    if (channels === undefined && !loadingChannels) {
       setLoadingChannels(true);
       try {
-        setChannels(await getOmeZarrChannels(dataLinkUrl));
+        setChannels(await getOmeZarrChannels(dataUrl));
       } catch (error) {
         toast.error(
           error instanceof Error ? error.message : 'Failed to load channels'
@@ -60,10 +67,10 @@ export default function CartDatasetRow({
         setLoadingChannels(false);
       }
     }
-    if (nextOpen && metadata === null && !loadingMeta && dataLinkUrl) {
+    if (metadata === null && !loadingMeta) {
       setLoadingMeta(true);
       try {
-        setMetadata(await getOmeZarrMetadata(dataLinkUrl));
+        setMetadata(await getOmeZarrMetadata(dataUrl));
       } catch {
         // Metadata is a nice-to-have here; ignore fetch failures.
       } finally {
@@ -104,12 +111,17 @@ export default function CartDatasetRow({
     }
   };
 
+  // A plain (non-OME) Zarr array has no multiscale axes and no channels, so its
+  // expanded body would otherwise be empty. Track whether there is anything to
+  // show so we can render an explicit "nothing here" message instead.
+  const hasOmeContent =
+    !!metadata?.multiscales?.[0]?.axes?.length || (channels?.length ?? 0) > 0;
+
   return (
     <div className="border-b border-surface py-2">
       <div className="flex items-center justify-between gap-2">
         <button
-          className="flex items-center gap-2 flex-1 min-w-0 text-left disabled:opacity-50 disabled:cursor-not-allowed"
-          disabled={!dataLinkUrl}
+          className="flex items-center gap-2 flex-1 min-w-0 text-left"
           onClick={() => void handleToggleOpen()}
           type="button"
         >
@@ -119,6 +131,15 @@ export default function CartDatasetRow({
             size="sm"
           />
           <Typography className="text-foreground truncate">{label}</Typography>
+          {mismatch ? (
+            <FgTooltip label="Dimensions differ from the first layer in this view">
+              <FgIcon
+                className="text-warning shrink-0"
+                icon={HiExclamationTriangle}
+                size="sm"
+              />
+            </FgTooltip>
+          ) : null}
         </button>
         <IconButton
           aria-label="Remove dataset"
@@ -135,20 +156,24 @@ export default function CartDatasetRow({
         {path}
       </Link>
 
-      {dataLinkUrl ? (
-        <Collapse open={isOpen}>
-          <div className="pl-6 flex flex-col gap-2 pt-2">
-            {metadata ? <ZarrAxisTable metadata={metadata} /> : null}
-            <div className="flex flex-col gap-1">
-              <Typography className="text-foreground/70 text-xs font-semibold">
-                Optional: select channels to create per-channel layers
-              </Typography>
-              {loadingChannels ? (
-                <Typography className="text-foreground/70 text-sm">
-                  Loading channels...
+      <Collapse open={isOpen}>
+        <div className="pl-6 flex flex-col gap-2 pt-2">
+          {loadingMeta || loadingChannels ? (
+            <Typography className="text-foreground/70 text-sm">
+              Loading...
+            </Typography>
+          ) : !hasOmeContent ? (
+            <Typography className="text-foreground/70 text-sm">
+              No OME-Zarr metadata to display.
+            </Typography>
+          ) : (
+            <>
+              {metadata ? <ZarrAxisTable metadata={metadata} /> : null}
+              <div className="flex flex-col gap-1">
+                <Typography className="text-foreground/70 text-xs font-semibold">
+                  Optional: select channels to create per-channel layers
                 </Typography>
-              ) : (
-                (channels ?? []).map((channel, index) => (
+                {(channels ?? []).map((channel, index) => (
                   <FgCheckbox
                     checked={checkedChannels.has(channel)}
                     key={channel}
@@ -157,16 +182,12 @@ export default function CartDatasetRow({
                       void handleToggleChannel(channel, index, e.target.checked)
                     }
                   />
-                ))
-              )}
-            </div>
-          </div>
-        </Collapse>
-      ) : (
-        <Typography className="text-foreground/70 text-sm pl-6">
-          Channels load after the View is created.
-        </Typography>
-      )}
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </Collapse>
     </div>
   );
 }
diff --git a/frontend/src/components/ui/Views/CartList.tsx b/frontend/src/components/ui/Views/CartList.tsx
index a0c99dc90..0c4485790 100644
--- a/frontend/src/components/ui/Views/CartList.tsx
+++ b/frontend/src/components/ui/Views/CartList.tsx
@@ -7,7 +7,7 @@ import CartDatasetRow from '@/components/ui/Views/CartDatasetRow';
 import CreateViewButton from '@/components/ui/Views/CreateViewButton';
 import FgButton from '@/components/designSystem/atoms/FgButton';
 import { useCartContext } from '@/contexts/CartContext';
-import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
+import { useCartDimensionCheck } from '@/hooks/useCartDimensionCheck';
 import { datasetKey } from '@/utils/pathHandling';
 import type { CartItem } from '@/contexts/CartContext';
 
@@ -46,17 +46,10 @@ function groupCartByDataset(cart: CartItem[]): CartGroup[] {
 
 export default function CartList() {
   const { cart, clearCart } = useCartContext();
-  const allProxiedPathsQuery = useAllProxiedPathsQuery();
   const navigate = useNavigate();
 
   const cartGroups = useMemo(() => groupCartByDataset(cart), [cart]);
-  const dataLinkUrlByDataset = useMemo(() => {
-    const map = new Map<string, string>();
-    for (const p of allProxiedPathsQuery.data ?? []) {
-      map.set(datasetKey(p.fsp_name, p.path), p.url);
-    }
-    return map;
-  }, [allProxiedPathsQuery.data]);
+  const { mismatchedKeys } = useCartDimensionCheck(cart);
 
   const handleClearCart = async () => {
     try {
@@ -78,13 +71,11 @@ export default function CartList() {
     <div className="flex flex-col gap-3">
       {cartGroups.map(group => (
         <CartDatasetRow
-          dataLinkUrl={dataLinkUrlByDataset.get(
-            datasetKey(group.fsp_name, group.path)
-          )}
           fsp_name={group.fsp_name}
           items={group.items}
           key={datasetKey(group.fsp_name, group.path)}
           label={group.label}
+          mismatch={mismatchedKeys.has(datasetKey(group.fsp_name, group.path))}
           path={group.path}
         />
       ))}
diff --git a/frontend/src/components/ui/widgets/Loaders.tsx b/frontend/src/components/ui/widgets/Loaders.tsx
index 93a77af84..036ac5178 100644
--- a/frontend/src/components/ui/widgets/Loaders.tsx
+++ b/frontend/src/components/ui/widgets/Loaders.tsx
@@ -73,14 +73,17 @@ function SidebarItemSkeleton({
 
 function TableRowSkeleton({
   gridColsClass,
+  gridColsStyle,
   numberOfCols = 4
 }: {
-  readonly gridColsClass: string;
+  readonly gridColsClass?: string;
+  readonly gridColsStyle?: string;
   readonly numberOfCols?: number;
 }) {
   return (
     <div
-      className={`grid ${gridColsClass} justify-items-start gap-4 px-4 py-4 animate-pulse`}
+      className={`grid ${gridColsClass ?? ''} justify-items-start gap-4 px-4 py-4 animate-pulse`}
+      style={gridColsStyle ? { gridTemplateColumns: gridColsStyle } : undefined}
     >
       {Array.from({ length: numberOfCols }).map((_, index) => (
         <div className="w-full h-4 bg-surface rounded" key={index} />
diff --git a/frontend/src/hooks/useCartDimensionCheck.ts b/frontend/src/hooks/useCartDimensionCheck.ts
new file mode 100644
index 000000000..5fea8b3c1
--- /dev/null
+++ b/frontend/src/hooks/useCartDimensionCheck.ts
@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { useQueries } from '@tanstack/react-query';
+import { getOmeZarrMetadata } from '@/omezarr-helper';
+import type { Metadata } from '@/omezarr-helper';
+import { datasetKey, getFileURL } from '@/utils/pathHandling';
+import {
+  getDimensionSignature,
+  signaturesMatch
+} from '@/utils/dimensionSignature';
+import type { CartItem } from '@/contexts/CartContext';
+
+export type CartDimensionCheck = {
+  mismatchedKeys: Set<string>;
+  hasMismatch: boolean;
+};
+
+// One entry per unique dataset, preserving first-added order (order[0] is the
+// reference dataset for the mismatch comparison).
+function uniqueDatasets(items: CartItem[]) {
+  const seen = new Set<string>();
+  const out: { key: string; fsp_name: string; path: string }[] = [];
+  for (const item of items) {
+    const key = datasetKey(item.fsp_name, item.path);
+    if (!seen.has(key)) {
+      seen.add(key);
+      out.push({ key, fsp_name: item.fsp_name, path: item.path });
+    }
+  }
+  return out;
+}
+
+export function useCartDimensionCheck(items: CartItem[]): CartDimensionCheck {
+  const datasets = useMemo(() => uniqueDatasets(items), [items]);
+
+  const results = useQueries({
+    queries: datasets.map(ds => ({
+      queryKey: ['zarr', 'dims', ds.fsp_name, ds.path],
+      queryFn: async (): Promise<Metadata> =>
+        getOmeZarrMetadata(getFileURL(ds.fsp_name, ds.path)),
+      staleTime: 5 * 60 * 1000,
+      retry: false
+    }))
+  });
+
+  // useQueries returns fresh array refs each render; key the memo on which
+  // datasets have resolved data so it recomputes as metadata lands.
+  const resolvedKey = results.map(r => (r.data ? 1 : 0)).join(',');
+
+  return useMemo(() => {
+    // Signature per dataset, or null when loading/errored/no-multiscale.
+    // Fail open: a null signature never produces a warning.
+    const signatures = datasets.map((_, i) => {
+      const data = results[i]?.data;
+      return data ? getDimensionSignature(data) : null;
+    });
+
+    const reference = signatures[0];
+    const mismatchedKeys = new Set<string>();
+    if (reference) {
+      for (let i = 1; i < datasets.length; i++) {
+        const sig = signatures[i];
+        if (sig && !signaturesMatch(reference, sig)) {
+          mismatchedKeys.add(datasets[i].key);
+        }
+      }
+    }
+    return { mismatchedKeys, hasMismatch: mismatchedKeys.size > 0 };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasets, resolvedKey]);
+}
diff --git a/frontend/src/hooks/useCreateViewFlow.tsx b/frontend/src/hooks/useCreateViewFlow.tsx
index 27ac1ebad..1148ae12e 100644
--- a/frontend/src/hooks/useCreateViewFlow.tsx
+++ b/frontend/src/hooks/useCreateViewFlow.tsx
@@ -5,10 +5,12 @@ import { useNavigate } from 'react-router';
 import type { ReactNode } from 'react';
 
 import { useCartCheckout } from '@/hooks/useCartCheckout';
+import { useCartDimensionCheck } from '@/hooks/useCartDimensionCheck';
 import { usePreferencesContext } from '@/contexts/PreferencesContext';
 import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
 import { datasetKey } from '@/utils/pathHandling';
 import FgButton from '@/components/designSystem/atoms/FgButton';
+import FgCheckbox from '@/components/designSystem/atoms/formElements/FgCheckbox';
 import FgInput from '@/components/designSystem/atoms/formElements/FgInput';
 import FgSwitch from '@/components/designSystem/atoms/formElements/FgSwitch';
 import FgDialog from '@/components/ui/Dialogs/FgDialog';
@@ -34,8 +36,11 @@ export function useCreateViewFlow() {
 
   const [pending, setPending] = useState(false);
   const [name, setName] = useState('');
+  const [acknowledged, setAcknowledged] = useState(false);
   const [request, setRequest] = useState<PendingRequest | null>(null);
 
+  const { hasMismatch } = useCartDimensionCheck(request?.datasets ?? []);
+
   const runCheckout = async () => {
     if (!request) {
       return;
@@ -79,6 +84,7 @@ export function useCreateViewFlow() {
       areDataLinksAutomatic && dataLinkSubpathMode !== 'custom';
 
     setName(defaultName);
+    setAcknowledged(false);
     setRequest({
       datasets,
       onCreated,
@@ -126,9 +132,24 @@ export function useCreateViewFlow() {
           </>
         ) : null}
 
+        {hasMismatch ? (
+          <div className="flex flex-col gap-2">
+            <Typography className="text-warning font-semibold">
+              Some layers have dimensions that differ from the first layer.
+            </Typography>
+            <FgCheckbox
+              checked={acknowledged}
+              label="I understand I'm creating a view with mismatched dimensions."
+              onChange={e => setAcknowledged(e.target.checked)}
+            />
+          </div>
+        ) : null}
+
         <div className="flex gap-4">
           <FgButton
-            disabled={pending || name.trim() === ''}
+            disabled={
+              pending || name.trim() === '' || (hasMismatch && !acknowledged)
+            }
             loading={pending}
             loadingText="Creating..."
             onClick={() => void runCheckout()}
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
index 6c1b2692f..f92102449 100644
--- a/frontend/src/hooks/useTheme.ts
+++ b/frontend/src/hooks/useTheme.ts
@@ -1,19 +1,18 @@
-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 
+import useDarkMode from './useDarkMode';
+
+// Theme source of truth is the `dark` class on <html> + localStorage.theme.
+// `isDark` is read live from the DOM (via useDarkMode) so every consumer stays
+// in sync; toggleTheme flips both the class and localStorage.
 export default function useTheme() {
-  const [isLightTheme, setIsLightTheme] = useState(true);
+  const isDark = useDarkMode();
 
   const toggleTheme = useCallback(() => {
-    setIsLightTheme(prev => {
-      const newTheme = !prev;
-      localStorage.setItem('theme', newTheme ? 'light' : 'dark');
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      newTheme
-        ? document.documentElement.classList.remove('dark')
-        : document.documentElement.classList.add('dark');
-      return newTheme;
-    });
+    const nextDark = !document.documentElement.classList.contains('dark');
+    localStorage.setItem('theme', nextDark ? 'dark' : 'light');
+    document.documentElement.classList.toggle('dark', nextDark);
   }, []);
 
-  return { isLightTheme, setIsLightTheme, toggleTheme };
+  return { isDark, toggleTheme };
 }
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index c1c4fa78f..198225ab0 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable react/jsx-max-depth */
 // Disable max depth because of many context providers
 
-import { Outlet, useParams } from 'react-router';
+import { useEffect } from 'react';
+import { Outlet, useParams, useMatch } from 'react-router';
 import { Toaster } from 'react-hot-toast';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ShepherdJourneyProvider } from 'react-shepherd';
@@ -32,6 +33,17 @@ const MainLayoutContent = () => {
   const { showWarningOverlay, checkHealth, nextRetrySeconds } =
     useServerHealthContext();
   const bare = isConnectLoginPopup();
+  // The embedded neuroglancer viewer renders its own collapsed top bar, so
+  // suppress the global navbar there.
+  const isViewer = useMatch('/view/:readKey');
+
+  // Restore persisted theme on load. Lives here (always mounted) rather than in
+  // the navbar so dark mode applies on routes that hide the navbar (the viewer).
+  useEffect(() => {
+    if (localStorage.getItem('theme') === 'dark') {
+      document.documentElement.classList.add('dark');
+    }
+  }, []);
 
   return (
     <ShepherdJourneyProvider>
@@ -43,7 +55,7 @@ const MainLayoutContent = () => {
         }}
       />
       <div className="flex flex-col h-full w-full overflow-y-hidden bg-background text-foreground box-border">
-        {!bare ? (
+        {!bare && !isViewer ? (
           <div className="flex-shrink-0 w-full">
             <FileglancerNavbar />
             <Notifications />
diff --git a/frontend/src/utils/dimensionSignature.ts b/frontend/src/utils/dimensionSignature.ts
new file mode 100644
index 000000000..af7a7a6f2
--- /dev/null
+++ b/frontend/src/utils/dimensionSignature.ts
@@ -0,0 +1,71 @@
+import {
+  getResolvedScales,
+  translateUnitToNeuroglancer
+} from '@/omezarr-helper';
+
+import type { Metadata } from '@/omezarr-helper';
+
+export type DimensionSignature = {
+  axes: { name: string; unit: string }[];
+  scales: number[];
+};
+
+// ponytail: signature is axes (name+unit) + resolved voxel scales. That's the
+// "will these layers align in Neuroglancer" question; shape is deliberately
+// excluded per spec.
+export function getDimensionSignature(
+  metadata: Metadata
+): DimensionSignature | null {
+  const multiscale = metadata.multiscales?.[0];
+  if (!multiscale?.axes || multiscale.axes.length === 0) {
+    return null;
+  }
+  let scales: number[];
+  try {
+    scales = getResolvedScales(multiscale);
+  } catch {
+    return null;
+  }
+  if (scales.length === 0) {
+    return null;
+  }
+  return {
+    axes: multiscale.axes.map(axis => ({
+      name: axis.name.toLowerCase(),
+      unit: translateUnitToNeuroglancer(axis.unit as string) || ''
+    })),
+    scales
+  };
+}
+
+// Relative epsilon: voxel sizes span nm→µm, so absolute tolerance is wrong.
+// ponytail: 1e-3 relative; tighten if false matches appear.
+export function signaturesMatch(
+  a: DimensionSignature,
+  b: DimensionSignature,
+  epsilon = 1e-3
+): boolean {
+  if (a.axes.length !== b.axes.length) {
+    return false;
+  }
+  for (let i = 0; i < a.axes.length; i++) {
+    if (a.axes[i].name !== b.axes[i].name) {
+      return false;
+    }
+    if (a.axes[i].unit !== b.axes[i].unit) {
+      return false;
+    }
+  }
+  if (a.scales.length !== b.scales.length) {
+    return false;
+  }
+  for (let i = 0; i < a.scales.length; i++) {
+    const av = a.scales[i];
+    const bv = b.scales[i];
+    const denom = Math.max(Math.abs(av), Math.abs(bv), Number.MIN_VALUE);
+    if (Math.abs(av - bv) / denom > epsilon) {
+      return false;
+    }
+  }
+  return true;
+}
diff --git a/frontend/ui-tests/tests/data-link-operations.spec.ts b/frontend/ui-tests/tests/data-link-operations.spec.ts
index 19bc717a4..7ecf90efe 100644
--- a/frontend/ui-tests/tests/data-link-operations.spec.ts
+++ b/frontend/ui-tests/tests/data-link-operations.spec.ts
@@ -25,7 +25,8 @@ const navigateToZarrDir = async (
 
 const createLinkWithDirectoryNameOnlyFormat = async (page: any) => {
   // Change data link format to "Directory name only" in the dialog
-  const advancedSettingsAccordion = page.getByRole('button', {
+  const dialog = page.getByRole('dialog');
+  const advancedSettingsAccordion = dialog.getByRole('button', {
     name: /advanced settings/i
   });
   await advancedSettingsAccordion.click();
@@ -33,7 +34,7 @@ const createLinkWithDirectoryNameOnlyFormat = async (page: any) => {
   await nameOnlyInput.click();
   await expect(nameOnlyInput).toBeChecked();
   // Confirm in dialog
-  const confirmButton = page.getByRole('button', {
+  const confirmButton = dialog.getByRole('button', {
     name: /confirm|create|yes/i
   });
   await expect(confirmButton).toBeVisible({ timeout: 5000 });
@@ -64,11 +65,12 @@ test.describe('Data Link Operations', () => {
     // Wait for zarr metadata to load
     await expect(page.getByText('zarr.json')).toBeVisible();
 
+    const dialog = page.getByRole('dialog');
     const dataLinkToggle = page.getByRole('checkbox', { name: /data link/i });
-    const confirmButton = page.getByRole('button', {
+    const confirmButton = dialog.getByRole('button', {
       name: /confirm|create|yes/i
     });
-    const confirmDeleteButton = page.getByRole('button', {
+    const confirmDeleteButton = dialog.getByRole('button', {
       name: /delete/i
     });
 
@@ -79,7 +81,7 @@ test.describe('Data Link Operations', () => {
       await expect(confirmButton).toBeVisible();
 
       // Check that the data link format is set to "Transparent path" in the dialog
-      const advancedSettingsAccordion = page.getByRole('button', {
+      const advancedSettingsAccordion = dialog.getByRole('button', {
         name: /advanced settings/i
       });
       await advancedSettingsAccordion.click();
diff --git a/frontend/ui-tests/tests/data-link-table-filtering.spec.ts b/frontend/ui-tests/tests/data-link-table-filtering.spec.ts
index b0b527945..7636a989f 100644
--- a/frontend/ui-tests/tests/data-link-table-filtering.spec.ts
+++ b/frontend/ui-tests/tests/data-link-table-filtering.spec.ts
@@ -111,7 +111,9 @@ test.describe('Data Link Table Filtering', () => {
 
       // Create the data link
       await dataLinkToggle.click();
-      const confirmButton = page.getByRole('button', {
+      // Scope to the dialog: the zarr preview also has a "Create a view"
+      // button, so a page-wide /create/ match is ambiguous.
+      const confirmButton = page.getByRole('dialog').getByRole('button', {
         name: /confirm|create|yes/i
       });
       await expect(confirmButton).toBeVisible({ timeout: 5000 });
diff --git a/frontend/ui-tests/tests/data-link-usage-tabs.spec.ts b/frontend/ui-tests/tests/data-link-usage-tabs.spec.ts
index 21251946a..1991ac0a9 100644
--- a/frontend/ui-tests/tests/data-link-usage-tabs.spec.ts
+++ b/frontend/ui-tests/tests/data-link-usage-tabs.spec.ts
@@ -29,8 +29,10 @@ async function openDataLinkUsageDialog(page: Page, dirName: string) {
   await expect(dataLinkToggle).toBeVisible({ timeout: 10000 });
   await dataLinkToggle.click();
 
-  // Confirm data link creation in the dialog
-  const confirmButton = page.getByRole('button', {
+  // Confirm data link creation in the dialog. Scope to the dialog: the zarr
+  // preview also has a "Create a view" button, so a page-wide /create/ match
+  // is ambiguous.
+  const confirmButton = page.getByRole('dialog').getByRole('button', {
     name: /confirm|create|yes/i
   });
   await expect(confirmButton).toBeVisible({ timeout: 5000 });