diff --git a/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx b/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
index b4e34d0c..87e4cbb4 100644
--- a/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
+++ b/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
@@ -1,155 +1,185 @@
-import { Button, ButtonGroup, Typography } from '@material-tailwind/react';
+import { Typography } from '@material-tailwind/react';
 import { Link } from 'react-router';
+import { HiOutlineClipboardCopy } from 'react-icons/hi';
+import { HiOutlineEllipsisHorizontalCircle } from 'react-icons/hi2';
 
 import neuroglancer_logo from '@/assets/neuroglancer.png';
 import validator_logo from '@/assets/ome-ngff-validator.png';
 import volE_logo from '@/assets/aics_website-3d-cell-viewer.png';
 import avivator_logo from '@/assets/vizarr_logo.png';
-import copy_logo from '@/assets/copy-link-64.png';
 import type { OpenWithToolUrls, PendingToolKey } from '@/hooks/useZarrMetadata';
 import FgTooltip from '@/components/ui/widgets/FgTooltip';
+import DialogIconBtn from '@/components/ui/buttons/DialogIconBtn';
+import DataLinkUsageDialog from '@/components/ui/Dialogs/DataLinkUsageDialog';
+import type { DataLinkType } from '@/components/ui/Dialogs/DataLinkUsageDialog';
+
+const CIRCLE_CLASSES =
+  'rounded-full bg-surface-light dark:bg-surface-light hover:bg-surface dark:hover:bg-surface w-12 h-12 flex items-center justify-center cursor-pointer transform active:scale-90 transition-all duration-75';
+
+const LABEL_CLASSES = 'text-xs text-center text-foreground mt-1';
 
 export default function DataToolLinks({
+  compact = false,
+  dataLinkUrl,
+  dataType,
   onToolClick,
   showCopiedTooltip,
   title,
   urls
 }: {
+  readonly compact?: boolean;
+  readonly dataLinkUrl?: string;
+  readonly dataType?: DataLinkType;
   readonly onToolClick: (toolKey: PendingToolKey) => Promise<void>;
   readonly showCopiedTooltip: boolean;
   readonly title: string;
   readonly urls: OpenWithToolUrls | null;
 }) {
-  const tooltipTriggerClasses =
-    'rounded-sm m-0 p-0 transform active:scale-90 transition-transform duration-75';
-
   if (!urls) {
     return null;
   }
 
   return (
     <div className="my-1" data-tour="data-tool-links">
-      <Typography className="font-semibold text-sm text-surface-foreground">
+      <Typography className="font-semibold text-sm text-surface-foreground mb-1">
         {title}
       </Typography>
-      <ButtonGroup className="relative">
+      <div
+        className={`flex flex-wrap gap-2 items-start ${compact ? 'max-w-[13.5rem]' : ''}`}
+      >
         {urls.neuroglancer !== null ? (
-          <FgTooltip
-            as={Button}
-            label="View in Neuroglancer"
-            triggerClasses={tooltipTriggerClasses}
-            variant="ghost"
-          >
-            <Link
-              onClick={async e => {
-                e.preventDefault();
-                await onToolClick('neuroglancer');
-              }}
-              rel="noopener noreferrer"
-              target="_blank"
-              to={urls.neuroglancer}
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip
+              label="View in Neuroglancer"
+              triggerClasses={CIRCLE_CLASSES}
             >
-              <img
-                alt="Neuroglancer logo"
-                className="max-h-8 max-w-8 m-1 rounded-sm"
-                src={neuroglancer_logo}
-              />
-            </Link>
-          </FgTooltip>
+              <Link
+                onClick={async e => {
+                  e.preventDefault();
+                  await onToolClick('neuroglancer');
+                }}
+                rel="noopener noreferrer"
+                target="_blank"
+                to={urls.neuroglancer}
+              >
+                <img
+                  alt="Neuroglancer logo"
+                  className="max-h-7 max-w-7 rounded-sm"
+                  src={neuroglancer_logo}
+                />
+              </Link>
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Neuroglancer</span>
+          </div>
         ) : null}
 
         {urls.vole !== null ? (
-          <FgTooltip
-            as={Button}
-            label="View in Vol-E"
-            triggerClasses={tooltipTriggerClasses}
-            variant="ghost"
-          >
-            <Link
-              onClick={async e => {
-                e.preventDefault();
-                await onToolClick('vole');
-              }}
-              rel="noopener noreferrer"
-              target="_blank"
-              to={urls.vole}
-            >
-              <img
-                alt="Vol-E logo"
-                className="max-h-8 max-w-8 m-1 rounded-sm"
-                src={volE_logo}
-              />
-            </Link>
-          </FgTooltip>
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip label="View in Vol-E" triggerClasses={CIRCLE_CLASSES}>
+              <Link
+                onClick={async e => {
+                  e.preventDefault();
+                  await onToolClick('vole');
+                }}
+                rel="noopener noreferrer"
+                target="_blank"
+                to={urls.vole}
+              >
+                <img
+                  alt="Vol-E logo"
+                  className="max-h-7 max-w-7 rounded-sm"
+                  src={volE_logo}
+                />
+              </Link>
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Vol-E</span>
+          </div>
         ) : null}
 
         {urls.avivator !== null ? (
-          <FgTooltip
-            as={Button}
-            label="View in Avivator"
-            triggerClasses={tooltipTriggerClasses}
-            variant="ghost"
-          >
-            <Link
-              onClick={async e => {
-                e.preventDefault();
-                await onToolClick('avivator');
-              }}
-              rel="noopener noreferrer"
-              target="_blank"
-              to={urls.avivator}
-            >
-              <img
-                alt="Avivator logo"
-                className="max-h-8 max-w-8 m-1 rounded-sm"
-                src={avivator_logo}
-              />
-            </Link>
-          </FgTooltip>
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip label="View in Avivator" triggerClasses={CIRCLE_CLASSES}>
+              <Link
+                onClick={async e => {
+                  e.preventDefault();
+                  await onToolClick('avivator');
+                }}
+                rel="noopener noreferrer"
+                target="_blank"
+                to={urls.avivator}
+              >
+                <img
+                  alt="Avivator logo"
+                  className="max-h-7 max-w-7 rounded-sm"
+                  src={avivator_logo}
+                />
+              </Link>
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Avivator</span>
+          </div>
         ) : null}
 
         {urls.validator !== null ? (
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip
+              label="View in OME-Zarr Validator"
+              triggerClasses={CIRCLE_CLASSES}
+            >
+              <Link
+                onClick={async e => {
+                  e.preventDefault();
+                  await onToolClick('validator');
+                }}
+                rel="noopener noreferrer"
+                target="_blank"
+                to={urls.validator}
+              >
+                <img
+                  alt="OME-Zarr Validator logo"
+                  className="max-h-7 max-w-7 rounded-sm"
+                  src={validator_logo}
+                />
+              </Link>
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Validator</span>
+          </div>
+        ) : null}
+
+        <div className="flex flex-col items-center w-16">
           <FgTooltip
-            as={Button}
-            label="View in OME-Zarr Validator"
-            triggerClasses={tooltipTriggerClasses}
-            variant="ghost"
+            as="button"
+            label={showCopiedTooltip ? 'Copied!' : 'Copy data URL'}
+            onClick={async () => {
+              await onToolClick('copy');
+            }}
+            openCondition={showCopiedTooltip ? true : undefined}
+            triggerClasses={CIRCLE_CLASSES}
           >
-            <Link
-              onClick={async e => {
-                e.preventDefault();
-                await onToolClick('validator');
-              }}
-              rel="noopener noreferrer"
-              target="_blank"
-              to={urls.validator}
-            >
-              <img
-                alt="OME-Zarr Validator logo"
-                className="max-h-8 max-w-8 m-1 rounded-sm"
-                src={validator_logo}
-              />
-            </Link>
+            <HiOutlineClipboardCopy className="icon-default text-foreground" />
           </FgTooltip>
-        ) : null}
+          <span className={LABEL_CLASSES}>Copy</span>
+        </div>
 
-        <FgTooltip
-          as={Button}
-          label={showCopiedTooltip ? 'Copied!' : 'Copy data URL'}
-          onClick={async () => {
-            await onToolClick('copy');
-          }}
-          openCondition={showCopiedTooltip ? true : undefined}
-          triggerClasses={tooltipTriggerClasses}
-          variant="ghost"
-        >
-          <img
-            alt="Copy URL icon"
-            className="max-h-8 max-w-8 m-1 rounded-sm"
-            src={copy_logo}
-          />
-        </FgTooltip>
-      </ButtonGroup>
+        {dataLinkUrl && dataType ? (
+          <div className="flex flex-col items-center w-16">
+            <DialogIconBtn
+              icon={HiOutlineEllipsisHorizontalCircle}
+              label="More ways to open"
+              triggerClasses={CIRCLE_CLASSES}
+            >
+              {closeDialog => (
+                <DataLinkUsageDialog
+                  dataLinkUrl={dataLinkUrl}
+                  dataType={dataType}
+                  onClose={closeDialog}
+                  open={true}
+                />
+              )}
+            </DialogIconBtn>
+            <span className={LABEL_CLASSES}>More...</span>
+          </div>
+        ) : null}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/ui/BrowsePage/FileViewer.tsx b/frontend/src/components/ui/BrowsePage/FileViewer.tsx
index cfb3a8d5..50d89c01 100644
--- a/frontend/src/components/ui/BrowsePage/FileViewer.tsx
+++ b/frontend/src/components/ui/BrowsePage/FileViewer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Switch, Typography } from '@material-tailwind/react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import {
@@ -13,6 +13,7 @@ import {
   useFileContentQuery,
   useFileMetadataQuery
 } from '@/queries/fileContentQueries';
+import useDarkMode from '@/hooks/useDarkMode';
 
 type FileViewerProps = {
   readonly file: FileOrFolder;
@@ -79,8 +80,7 @@ const getLanguageFromExtension = (filename: string): string => {
 
 export default function FileViewer({ file }: FileViewerProps) {
   const { fspName } = useFileBrowserContext();
-
-  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+  const isDarkMode = useDarkMode();
   const [formatJson, setFormatJson] = useState<boolean>(true);
 
   // First, fetch metadata to check if file is binary
@@ -97,22 +97,6 @@ export default function FileViewer({ file }: FileViewerProps) {
   const language = getLanguageFromExtension(file.name);
   const isJsonFile = language === 'json';
 
-  // Detect dark mode from document
-  useEffect(() => {
-    const checkDarkMode = () => {
-      setIsDarkMode(document.documentElement.classList.contains('dark'));
-    };
-
-    checkDarkMode();
-    const observer = new MutationObserver(checkDarkMode);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
   const renderViewer = () => {
     if (metadataQuery.isLoading) {
       return (
@@ -184,7 +168,10 @@ export default function FileViewer({ file }: FileViewerProps) {
         codeTagProps={mergedCodeTagProps}
         customStyle={{
           margin: 0,
-          padding: '1rem',
+          paddingTop: '1em',
+          paddingRight: '1em',
+          paddingBottom: '0',
+          paddingLeft: '1em',
           fontSize: '14px',
           lineHeight: '1.5',
           overflow: 'visible',
diff --git a/frontend/src/components/ui/BrowsePage/N5Preview.tsx b/frontend/src/components/ui/BrowsePage/N5Preview.tsx
index ec1f5c55..9e598ca8 100644
--- a/frontend/src/components/ui/BrowsePage/N5Preview.tsx
+++ b/frontend/src/components/ui/BrowsePage/N5Preview.tsx
@@ -55,6 +55,9 @@ export default function N5Preview({
 
           {openWithToolUrls ? (
             <DataToolLinks
+              compact={mainPanelWidth <= 1000}
+              dataLinkUrl={openWithToolUrls.copy || undefined}
+              dataType="n5"
               onToolClick={handleToolClick}
               showCopiedTooltip={showCopiedTooltip}
               title="Open with:"
diff --git a/frontend/src/components/ui/BrowsePage/NavigationButton.tsx b/frontend/src/components/ui/BrowsePage/NavigationButton.tsx
index 08661b16..85d9ad9d 100644
--- a/frontend/src/components/ui/BrowsePage/NavigationButton.tsx
+++ b/frontend/src/components/ui/BrowsePage/NavigationButton.tsx
@@ -1,11 +1,7 @@
-import { useState } from 'react';
-import type { MouseEvent } from 'react';
 import { IoNavigateCircleSharp } from 'react-icons/io5';
 
-import FgTooltip from '@/components/ui/widgets/FgTooltip';
+import DialogIconBtn from '@/components/ui/buttons/DialogIconBtn';
 import NavigationInput from '@/components/ui/BrowsePage/NavigateInput';
-import FgDialog from '@/components/ui/Dialogs/FgDialog';
-import { IconButton } from '@material-tailwind/react';
 
 type NavigationButtonProps = {
   readonly triggerClasses: string;
@@ -14,30 +10,18 @@ type NavigationButtonProps = {
 export default function NavigationButton({
   triggerClasses
 }: NavigationButtonProps) {
-  const [showNavigationDialog, setShowNavigationDialog] = useState(false);
-
   return (
-    <>
-      <FgTooltip
-        as={IconButton}
-        icon={IoNavigateCircleSharp}
-        label="Navigate to a path"
-        onClick={(e: MouseEvent<HTMLButtonElement>) => {
-          setShowNavigationDialog(true);
-        }}
-        triggerClasses={triggerClasses}
-      />
-      {showNavigationDialog ? (
-        <FgDialog
-          onClose={() => setShowNavigationDialog(false)}
-          open={showNavigationDialog}
-        >
-          <NavigationInput
-            location="dialog"
-            setShowNavigationDialog={setShowNavigationDialog}
-          />
-        </FgDialog>
-      ) : null}
-    </>
+    <DialogIconBtn
+      icon={IoNavigateCircleSharp}
+      label="Navigate to a path"
+      triggerClasses={triggerClasses}
+    >
+      {closeDialog => (
+        <NavigationInput
+          location="dialog"
+          setShowNavigationDialog={closeDialog}
+        />
+      )}
+    </DialogIconBtn>
   );
 }
diff --git a/frontend/src/components/ui/BrowsePage/NewFolderButton.tsx b/frontend/src/components/ui/BrowsePage/NewFolderButton.tsx
index 401f6be1..0130fff8 100644
--- a/frontend/src/components/ui/BrowsePage/NewFolderButton.tsx
+++ b/frontend/src/components/ui/BrowsePage/NewFolderButton.tsx
@@ -1,11 +1,9 @@
-import { useState } from 'react';
-import type { ChangeEvent, MouseEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { Button, Typography } from '@material-tailwind/react';
 import { HiFolderAdd } from 'react-icons/hi';
 import toast from 'react-hot-toast';
 
-import FgTooltip from '@/components/ui/widgets/FgTooltip';
-import FgDialog from '@/components/ui/Dialogs/FgDialog';
+import DialogIconBtn from '@/components/ui/buttons/DialogIconBtn';
 import { Spinner } from '@/components/ui/widgets/Loaders';
 import useNewFolderDialog from '@/hooks/useNewFolderDialog';
 import { useFileBrowserContext } from '@/contexts/FileBrowserContext';
@@ -17,7 +15,6 @@ type NewFolderButtonProps = {
 export default function NewFolderButton({
   triggerClasses
 }: NewFolderButtonProps) {
-  const [showNewFolderDialog, setShowNewFolderDialog] = useState(false);
   const { fspName, mutations } = useFileBrowserContext();
   const { handleNewFolderSubmit, newName, setNewName, isDuplicateName } =
     useNewFolderDialog();
@@ -25,7 +22,10 @@ export default function NewFolderButton({
   const isSubmitDisabled =
     !newName.trim() || isDuplicateName || mutations.createFolder.isPending;
 
-  const formSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+  const formSubmit = async (
+    event: React.FormEvent<HTMLFormElement>,
+    closeDialog: () => void
+  ) => {
     event.preventDefault();
     const result = await handleNewFolderSubmit();
     if (result.success) {
@@ -34,74 +34,62 @@ export default function NewFolderButton({
     } else {
       toast.error(`Error creating folder: ${result.error}`);
     }
-    setShowNewFolderDialog(false);
-  };
-
-  const handleClose = () => {
-    setNewName('');
-    setShowNewFolderDialog(false);
+    closeDialog();
   };
 
   return (
-    <>
-      <FgTooltip
-        as="button"
-        disabledCondition={!fspName}
-        icon={HiFolderAdd}
-        label="New folder"
-        onClick={(e: MouseEvent<HTMLButtonElement>) => {
-          setShowNewFolderDialog(true);
-        }}
-        triggerClasses={triggerClasses}
-      />
-      {showNewFolderDialog ? (
-        <FgDialog onClose={handleClose} open={showNewFolderDialog}>
-          <form onSubmit={formSubmit}>
-            <div className="mt-8 flex flex-col gap-2">
-              <Typography
-                as="label"
-                className="text-foreground font-semibold"
-                htmlFor="new_name"
-              >
-                Create a New Folder
+    <DialogIconBtn
+      disabled={!fspName}
+      icon={HiFolderAdd}
+      label="New folder"
+      triggerClasses={triggerClasses}
+    >
+      {closeDialog => (
+        <form onSubmit={e => formSubmit(e, closeDialog)}>
+          <div className="mt-8 flex flex-col gap-2">
+            <Typography
+              as="label"
+              className="text-foreground font-semibold"
+              htmlFor="new_name"
+            >
+              Create a New Folder
+            </Typography>
+            <input
+              autoFocus
+              className="mb-4 p-2 text-foreground text-lg border border-primary-light rounded-sm focus:outline-none focus:border-primary bg-background"
+              id="new_name"
+              onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                setNewName(event.target.value);
+              }}
+              placeholder="Folder name ..."
+              type="text"
+              value={newName}
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              className="!rounded-md"
+              disabled={isSubmitDisabled}
+              type="submit"
+            >
+              {mutations.createFolder.isPending ? (
+                <Spinner customClasses="border-white" text="Creating..." />
+              ) : (
+                'Submit'
+              )}
+            </Button>
+            {!newName.trim() ? (
+              <Typography className="text-sm text-gray-500">
+                Please enter a folder name
+              </Typography>
+            ) : newName.trim() && isDuplicateName ? (
+              <Typography className="text-sm text-red-500">
+                A file or folder with this name already exists
               </Typography>
-              <input
-                autoFocus
-                className="mb-4 p-2 text-foreground text-lg border border-primary-light rounded-sm focus:outline-none focus:border-primary bg-background"
-                id="new_name"
-                onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                  setNewName(event.target.value);
-                }}
-                placeholder="Folder name ..."
-                type="text"
-                value={newName}
-              />
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                className="!rounded-md"
-                disabled={isSubmitDisabled}
-                type="submit"
-              >
-                {mutations.createFolder.isPending ? (
-                  <Spinner customClasses="border-white" text="Creating..." />
-                ) : (
-                  'Submit'
-                )}
-              </Button>
-              {!newName.trim() ? (
-                <Typography className="text-sm text-gray-500">
-                  Please enter a folder name
-                </Typography>
-              ) : newName.trim() && isDuplicateName ? (
-                <Typography className="text-sm text-red-500">
-                  A file or folder with this name already exists
-                </Typography>
-              ) : null}
-            </div>
-          </form>
-        </FgDialog>
-      ) : null}
-    </>
+            ) : null}
+          </div>
+        </form>
+      )}
+    </DialogIconBtn>
   );
 }
diff --git a/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx b/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx
index 0b917349..0d952418 100644
--- a/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx
+++ b/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx
@@ -92,6 +92,9 @@ export default function ZarrPreview({
 
           {openWithToolUrls ? (
             <DataToolLinks
+              compact={mainPanelWidth <= 1000}
+              dataLinkUrl={openWithToolUrls.copy || undefined}
+              dataType="zarr"
               onToolClick={handleToolClick}
               showCopiedTooltip={showCopiedTooltip}
               title="Open with:"
diff --git a/frontend/src/components/ui/Dialogs/DataLinkUsageDialog.tsx b/frontend/src/components/ui/Dialogs/DataLinkUsageDialog.tsx
new file mode 100644
index 00000000..8f37a70a
--- /dev/null
+++ b/frontend/src/components/ui/Dialogs/DataLinkUsageDialog.tsx
@@ -0,0 +1,602 @@
+import { useState } from 'react';
+import { Typography, Tabs } from '@material-tailwind/react';
+import { HiExternalLink, HiOutlineClipboardCopy } from 'react-icons/hi';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import {
+  materialDark,
+  coy
+} from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import FgDialog from './FgDialog';
+import useDarkMode from '@/hooks/useDarkMode';
+import CopyTooltip from '@/components/ui/widgets/CopyTooltip';
+
+export type DataLinkType = 'directory' | 'zarr' | 'n5';
+
+export function inferDataType(path: string): DataLinkType {
+  if (/\.zarr(\/|$)/.test(path)) {
+    return 'zarr';
+  }
+  if (/\.n5(\/|$)/.test(path)) {
+    return 'n5';
+  }
+  return 'directory';
+}
+
+type CodeBlockProps = {
+  readonly code: string;
+  readonly language?: string;
+  readonly showLineNumbers?: boolean;
+  readonly wrapLines?: boolean;
+  readonly wrapLongLines?: boolean;
+  readonly copyable?: boolean;
+  readonly copyLabel?: string;
+  readonly customStyle?: React.CSSProperties;
+};
+
+const TOOLTIP_TRIGGER_CLASSES =
+  'text-foreground/50 hover:text-foreground py-1 px-2';
+
+function CodeBlock({
+  code,
+  language = 'text',
+  showLineNumbers = false,
+  wrapLines = true,
+  wrapLongLines = true,
+  copyable = false,
+  copyLabel = 'Copy code',
+  customStyle
+}: CodeBlockProps) {
+  const isDarkMode = useDarkMode();
+
+  // Note: margin and marginBottom need to be defined separately because the coy theme in react-syntax-highlighter defines both.
+  // If we only set margin, the coy theme's marginBottom value will override ours and cause extra space at the bottom of the code block.
+  const defaultStyle = {
+    margin: '0 0',
+    marginBottom: '0',
+    padding: '3em 3em 1em 1em',
+    fontSize: '14px',
+    lineHeight: '1.5',
+    width: '100%',
+    boxSizing: 'border-box' as const,
+    whiteSpace: 'pre-wrap' as const,
+    wordBreak: 'break-word' as const,
+    overflowX: 'hidden' as const,
+    borderRadius: '0.5rem',
+    background: isDarkMode ? '#2f2f2f' : '#fdfdfd'
+  };
+
+  const mergedCustomStyle = customStyle
+    ? { ...defaultStyle, ...customStyle }
+    : defaultStyle;
+
+  // Get the theme's code styles and merge with custom codeTagProps
+  const theme = isDarkMode ? materialDark : coy;
+  const themeCodeStyles = theme['code[class*="language-"]'] || {};
+  const mergedCodeTagProps = {
+    style: {
+      ...themeCodeStyles,
+      paddingBottom: '1.5em',
+      whiteSpace: 'pre-wrap' as const,
+      wordBreak: 'break-word' as const
+    }
+  };
+
+  return (
+    <div className="relative w-full min-w-0 rounded-lg border border-surface dark:border-foreground/30">
+      <SyntaxHighlighter
+        codeTagProps={mergedCodeTagProps}
+        customStyle={mergedCustomStyle}
+        language={language}
+        showLineNumbers={showLineNumbers}
+        style={theme}
+        wrapLines={wrapLines}
+        wrapLongLines={wrapLongLines}
+      >
+        {code}
+      </SyntaxHighlighter>
+      {copyable ? (
+        <div className="absolute top-2 right-2">
+          <CopyTooltip
+            primaryLabel={copyLabel}
+            textToCopy={code}
+            tooltipTriggerClasses={TOOLTIP_TRIGGER_CLASSES}
+          >
+            <HiOutlineClipboardCopy className="icon-default" />
+          </CopyTooltip>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+type InstructionBlockProps = {
+  readonly steps: string[];
+};
+
+function InstructionBlock({ steps }: InstructionBlockProps) {
+  return (
+    <ol className="space-y-6 text-foreground">
+      {steps.map((step, index) => (
+        <li className="flex items-start gap-3 text-sm" key={index}>
+          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-xs font-semibold">
+            {index + 1}
+          </span>
+          <span className="pt-0.5">{step}</span>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+type DataLinkUsageDialogProps = {
+  readonly dataLinkUrl: string;
+  readonly dataType: DataLinkType;
+  readonly open: boolean;
+  readonly onClose: () => void;
+};
+
+function getNapariZarrTab(dataLinkUrl: string) {
+  return {
+    id: 'napari',
+    label: 'Napari',
+    content: (
+      <ol className="space-y-6 text-foreground">
+        <li className="flex items-start gap-3 text-sm">
+          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-xs font-semibold">
+            1
+          </span>
+          <div className="flex flex-col gap-2 pt-0.5 min-w-0 flex-1">
+            <span>Install napari.</span>
+            <CodeBlock
+              code={`conda create -y -n napari-env -c conda-forge python=3.11
+conda activate napari-env
+conda install -c conda-forge napari pyqt`}
+              copyLabel="Copy code"
+              copyable={true}
+              language="bash"
+            />
+            <a
+              className="flex items-center gap-1 text-primary hover:underline"
+              href="https://napari.org/stable/tutorials/fundamentals/installation.html"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <span>Full installation instructions</span>
+              <HiExternalLink className="icon-xsmall" />
+            </a>
+          </div>
+        </li>
+        <li className="flex items-start gap-3 text-sm">
+          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-xs font-semibold">
+            2
+          </span>
+          <div className="flex flex-col gap-2 pt-0.5 min-w-0 flex-1">
+            <span>
+              Install the napari-ome-zarr plugin. Assuming you are in the conda
+              environment, from the command line:
+            </span>
+            <CodeBlock
+              code="pip install napari-ome-zarr"
+              copyLabel="Copy code"
+              copyable={true}
+              language="bash"
+            />
+          </div>
+        </li>
+        <li className="flex items-start gap-3 text-sm">
+          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-xs font-semibold">
+            3
+          </span>
+          <div className="flex flex-col gap-2 pt-0.5 min-w-0 flex-1">
+            <span>
+              Launch napari and open the data link using the napari-ome-zarr
+              plugin. From the command line:
+            </span>
+            <CodeBlock
+              code={`napari --plugin napari-ome-zarr '${dataLinkUrl}'`}
+              copyLabel="Copy code"
+              copyable={true}
+              language="bash"
+            />
+            <span>Or in Python:</span>
+            <CodeBlock
+              code={`import napari
+
+viewer = napari.Viewer()
+viewer.open('${dataLinkUrl}', plugin='napari-ome-zarr')
+
+napari.run()`}
+              copyLabel="Copy code"
+              copyable={true}
+              language="python"
+            />
+          </div>
+        </li>
+      </ol>
+    )
+  };
+}
+
+function getFijiTab() {
+  return {
+    id: 'fiji',
+    label: 'Fiji',
+    content: (
+      <InstructionBlock
+        steps={[
+          'Launch Fiji',
+          'Navigate to Plugins \u2192 BigDataViewer \u2192 HDF5/N5/Zarr/OME-NGFF Viewer',
+          'Paste your data link into the text input area located at the top of the "Main" tab of the resulting dialog. Then click "Detect datasets"',
+          'In the text area under where you pasted the data link, you should now see the image file name, followed by "multiscale". Click on this entry, then click "OK"'
+        ]}
+      />
+    )
+  };
+}
+
+function getTabsForDataType(dataType: DataLinkType, dataLinkUrl: string) {
+  if (dataType === 'directory') {
+    return [
+      {
+        id: 'java',
+        label: 'Java',
+        content: (
+          <CodeBlock
+            code={`import java.net.URI;
+import java.net.http.HttpClient;
+import java.net.http.HttpRequest;
+import java.net.http.HttpResponse;
+import javax.xml.parsers.DocumentBuilderFactory;
+import org.w3c.dom.Document;
+import org.w3c.dom.NodeList;
+import org.w3c.dom.Element;
+import java.io.ByteArrayInputStream;
+
+public class ListFiles {
+    private static final String URL = '${dataLinkUrl}';
+
+    public static void main(String[] args) throws Exception {
+        HttpClient client = HttpClient.newHttpClient();
+        HttpRequest request = HttpRequest.newBuilder()
+            .uri(URI.create(URL + "?list-type=2&delimiter=/"))
+            .GET()
+            .build();
+
+        HttpResponse<String> response = client.send(request,
+            HttpResponse.BodyHandlers.ofString());
+
+        Document doc = DocumentBuilderFactory.newInstance()
+            .newDocumentBuilder()
+            .parse(new ByteArrayInputStream(
+                response.body().getBytes()));
+
+        // Print files
+        NodeList contents = doc.getElementsByTagName("Contents");
+        for (int i = 0; i < contents.getLength(); i++) {
+            Element el = (Element) contents.item(i);
+            String key = el.getElementsByTagName("Key")
+                .item(0).getTextContent();
+            String size = el.getElementsByTagName("Size")
+                .item(0).getTextContent();
+            System.out.println(key + "  (" + size + " bytes)");
+        }
+
+        // Print subdirectories
+        NodeList prefixes = doc.getElementsByTagName("CommonPrefixes");
+        for (int i = 0; i < prefixes.getLength(); i++) {
+            Element el = (Element) prefixes.item(i);
+            String prefix = el.getElementsByTagName("Prefix")
+                .item(0).getTextContent();
+            System.out.println(prefix + "  (directory)");
+        }
+    }
+}`}
+            copyLabel="Copy code"
+            copyable={true}
+            language="java"
+          />
+        )
+      },
+      {
+        id: 'python',
+        label: 'Python',
+        content: (
+          <>
+            <InstructionBlock steps={['Install requests package']} />
+            <CodeBlock
+              code={`import requests
+import xml.etree.ElementTree as ET
+
+url = '${dataLinkUrl}'
+
+# List files using S3-compatible ListObjectsV2 API
+response = requests.get(url, params={'list-type': '2', 'delimiter': '/'})
+response.raise_for_status()
+
+root = ET.fromstring(response.text)
+ns = root.tag.split('}')[0] + '}' if '}' in root.tag else ''
+
+# Print files
+for contents in root.findall(f'{ns}Contents'):
+    key = contents.find(f'{ns}Key').text
+    size = contents.find(f'{ns}Size').text
+    print(f'{key}  ({size} bytes)')
+
+# Print subdirectories
+for prefix in root.findall(f'{ns}CommonPrefixes'):
+    dirname = prefix.find(f'{ns}Prefix').text
+    print(f'{dirname}  (directory)')`}
+              copyLabel="Copy code"
+              copyable={true}
+              language="python"
+            />
+          </>
+        )
+      }
+    ];
+  }
+
+  if (dataType === 'zarr') {
+    return [
+      getFijiTab(),
+      {
+        id: 'java',
+        label: 'Java',
+        content: (
+          <CodeBlock
+            code={`import org.janelia.saalfeldlab.n5.DataBlock;
+import org.janelia.saalfeldlab.n5.DatasetAttributes;
+import org.janelia.saalfeldlab.n5.N5Reader;
+import org.janelia.saalfeldlab.n5.N5URI;
+import org.janelia.saalfeldlab.n5.universe.N5Factory;
+import org.janelia.saalfeldlab.n5.universe.StorageFormat;
+
+import java.util.Arrays;
+
+public class ReadZarr {
+    private static final String URL = '${dataLinkUrl}';
+
+    public static void main(String[] args) throws Exception {
+        N5URI n5URI = new N5URI(URL);
+        N5Factory n5Factory = new N5Factory().cacheAttributes(true);
+        N5Reader reader = n5Factory.openReader(StorageFormat.ZARR, n5URI.getURI());
+
+        String dataset = "0";
+        DatasetAttributes attrs = reader.getDatasetAttributes(dataset);
+        System.out.println("Shape: " + Arrays.toString(attrs.getDimensions()));
+        System.out.println("Dtype: " + attrs.getDataType());
+        System.out.println("Block size: " + Arrays.toString(attrs.getBlockSize()));
+
+        // Read a block and print voxel values
+        long[] blockPosition = new long[attrs.getBlockSize().length];
+        DataBlock<?> block = reader.readBlock(
+            dataset, attrs, blockPosition);
+        if (block != null) {
+            Object data = block.getData();
+            if (data instanceof short[]) {
+                short[] arr = (short[]) data;
+                System.out.println("First 10 voxels: " + Arrays.toString(Arrays.copyOf(arr, Math.min(10, arr.length))));
+            } else if (data instanceof float[]) {
+                float[] arr = (float[]) data;
+                System.out.println("First 10 voxels: " + Arrays.toString(Arrays.copyOf(arr, Math.min(10, arr.length))));
+            } else if (data instanceof byte[]) {
+                byte[] arr = (byte[]) data;
+                System.out.println("First 10 voxels: " + Arrays.toString(Arrays.copyOf(arr, Math.min(10, arr.length))));
+            }
+        }
+
+        reader.close();
+    }
+}`}
+            copyLabel="Copy code"
+            copyable={true}
+            language="java"
+          />
+        )
+      },
+      getNapariZarrTab(dataLinkUrl),
+      {
+        id: 'python',
+        label: 'Python',
+        content: (
+          <>
+            <InstructionBlock steps={['Install zarr package']} />
+            <CodeBlock
+              code={`import zarr
+from zarr.storage import FsspecStore
+
+url = '${dataLinkUrl}'
+
+# Open the Zarr store over HTTP
+store = FsspecStore.from_url(url)
+root = zarr.open_group(store, mode='r')
+
+# Access the highest resolution array
+arr = root['0']
+print(f'Shape: {arr.shape}')
+print(f'Dtype: {arr.dtype}')
+print(f'Chunks: {arr.chunks}')
+
+# Read and print a slice of voxel data
+data = arr[0, 0, :10, :10, :10]
+print(f'Voxels:\\n{data}')`}
+              copyLabel="Copy code"
+              copyable={true}
+              language="python"
+            />
+          </>
+        )
+      }
+    ];
+  }
+
+  // dataType === 'n5'
+  return [
+    getFijiTab(),
+    {
+      id: 'java',
+      label: 'Java',
+      content: (
+        <CodeBlock
+          code={`import org.janelia.saalfeldlab.n5.DataBlock;
+import org.janelia.saalfeldlab.n5.DatasetAttributes;
+import org.janelia.saalfeldlab.n5.N5Reader;
+import org.janelia.saalfeldlab.n5.N5URI;
+import org.janelia.saalfeldlab.n5.universe.N5Factory;
+import org.janelia.saalfeldlab.n5.universe.StorageFormat;
+
+import java.util.Arrays;
+
+public class ReadN5 {
+    private static final String URL = '${dataLinkUrl}';
+
+    public static void main(String[] args) throws Exception {
+        N5URI n5URI = new N5URI(URL);
+        N5Factory n5Factory = new N5Factory().cacheAttributes(true);
+        N5Reader reader = n5Factory.openReader(StorageFormat.N5, n5URI.getURI());
+
+        String dataset = "s0";
+        DatasetAttributes attrs = reader.getDatasetAttributes(dataset);
+        System.out.println("Shape: " + Arrays.toString(attrs.getDimensions()));
+        System.out.println("Dtype: " + attrs.getDataType());
+        System.out.println("Block size: " + Arrays.toString(attrs.getBlockSize()));
+
+        // Read a block and print voxel values
+        long[] blockPosition = new long[attrs.getBlockSize().length];
+        DataBlock<?> block = reader.readBlock(
+            dataset, attrs, blockPosition);
+        if (block != null) {
+            Object data = block.getData();
+            if (data instanceof short[]) {
+                short[] arr = (short[]) data;
+                System.out.println("First 10 voxels: " + Arrays.toString(Arrays.copyOf(arr, Math.min(10, arr.length))));
+            } else if (data instanceof float[]) {
+                float[] arr = (float[]) data;
+                System.out.println("First 10 voxels: " + Arrays.toString(Arrays.copyOf(arr, Math.min(10, arr.length))));
+            } else if (data instanceof byte[]) {
+                byte[] arr = (byte[]) data;
+                System.out.println("First 10 voxels: " + Arrays.toString(Arrays.copyOf(arr, Math.min(10, arr.length))));
+            }
+        }
+
+        reader.close();
+    }
+}`}
+          copyLabel="Copy code"
+          copyable={true}
+          language="java"
+        />
+      )
+    },
+    {
+      id: 'napari',
+      label: 'Napari',
+      content: (
+        <InstructionBlock
+          steps={[
+            'Napari does not natively support N5 datasets',
+            'Convert N5 to OME-Zarr, or use Fiji to view N5 data directly'
+          ]}
+        />
+      )
+    },
+    {
+      id: 'python',
+      label: 'Python',
+      content: (
+        <>
+          <InstructionBlock steps={['Install zarr package']} />
+          <CodeBlock
+            code={`import zarr
+from zarr.storage import FsspecStore
+
+url = '${dataLinkUrl}'
+
+# Open the N5 store over HTTP
+store = FsspecStore.from_url(url)
+root = zarr.open_group(store, mode='r')
+
+# Access the highest resolution array
+arr = root['s0']
+print(f'Shape: {arr.shape}')
+print(f'Dtype: {arr.dtype}')
+print(f'Chunks: {arr.chunks}')
+
+# Read and print a slice of voxel data
+data = arr[:10, :10, :10]
+print(f'Voxels:\\n{data}')`}
+            copyLabel="Copy code"
+            copyable={true}
+            language="python"
+          />
+        </>
+      )
+    }
+  ];
+}
+
+export default function DataLinkUsageDialog({
+  dataLinkUrl,
+  dataType,
+  open,
+  onClose
+}: DataLinkUsageDialogProps) {
+  const tabs = getTabsForDataType(dataType, dataLinkUrl);
+  const [activeTab, setActiveTab] = useState<string>(tabs[0]?.id ?? '');
+
+  const TAB_TRIGGER_CLASSES = '!text-foreground h-full';
+  const PANEL_CLASSES =
+    'flex flex-col gap-4 max-w-full max-h-[65vh] p-4 rounded-b-lg border border-t-0 border-surface dark:border-foreground/30 bg-surface-light dark:bg-surface overflow-y-auto overflow-x-hidden';
+
+  return (
+    <FgDialog
+      className="max-w-4xl w-11/12 md:w-11/12 lg:w-10/12 dark:bg-surface"
+      onClose={onClose}
+      open={open}
+    >
+      <div className="flex flex-col gap-4 my-4 min-h-0 max-h-[85vh]">
+        <Typography className="text-foreground font-semibold text-lg w-[95%] self-center">
+          How to use your data link
+        </Typography>
+        <div className="flex items-center gap-2 w-[95%] self-center border border-surface rounded-lg px-3 py-2 bg-surface-light overflow-hidden">
+          <span className="text-foreground text-sm font-mono truncate flex-1 min-w-0">
+            {dataLinkUrl}
+          </span>
+          <CopyTooltip
+            primaryLabel="Copy data link"
+            textToCopy={dataLinkUrl}
+            tooltipTriggerClasses={TOOLTIP_TRIGGER_CLASSES}
+          >
+            <HiOutlineClipboardCopy className="icon-default text-foreground shrink-0" />
+          </CopyTooltip>
+        </div>
+        <Tabs
+          className="flex flex-col flex-1 min-h-0 gap-0 max-h-[75vh] w-[95%] self-center"
+          key="data-link-usage-tabs"
+          onValueChange={setActiveTab}
+          value={activeTab}
+        >
+          <Tabs.List className="justify-start items-stretch shrink-0 min-w-fit w-full py-2 rounded-b-none bg-surface dark:bg-surface-light">
+            {tabs.map(tab => (
+              <Tabs.Trigger
+                className={TAB_TRIGGER_CLASSES}
+                key={tab.id}
+                value={tab.id}
+              >
+                {tab.label}
+              </Tabs.Trigger>
+            ))}
+            <Tabs.TriggerIndicator className="h-full" />
+          </Tabs.List>
+
+          {tabs.map(tab => (
+            <Tabs.Panel className={PANEL_CLASSES} key={tab.id} value={tab.id}>
+              {tab.content}
+            </Tabs.Panel>
+          ))}
+        </Tabs>
+      </div>
+    </FgDialog>
+  );
+}
diff --git a/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx b/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx
index f14e8515..f8f936df 100644
--- a/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx
+++ b/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx
@@ -8,7 +8,12 @@ import {
   Tabs
 } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
-import { HiOutlineDocument, HiOutlineDuplicate, HiX } from 'react-icons/hi';
+import {
+  HiExternalLink,
+  HiOutlineDocument,
+  HiOutlineDuplicate,
+  HiX
+} from 'react-icons/hi';
 import { HiOutlineFolder } from 'react-icons/hi2';
 import { useLocation } from 'react-router';
 
@@ -17,6 +22,10 @@ import OverviewTable from '@/components/ui/PropertiesDrawer/OverviewTable';
 import TicketDetails from '@/components/ui/PropertiesDrawer/TicketDetails';
 import FgTooltip from '@/components/ui/widgets/FgTooltip';
 import DataLinkDialog from '@/components/ui/Dialogs/DataLink';
+import DataLinkUsageDialog, {
+  inferDataType
+} from '@/components/ui/Dialogs/DataLinkUsageDialog';
+import TextDialogBtn from '@/components/ui/buttons/DialogTextBtn';
 import { getPreferredPathForDisplay } from '@/utils';
 import { copyToClipboard } from '@/utils/copyText';
 import { useFileBrowserContext } from '@/contexts/FileBrowserContext';
@@ -307,17 +316,67 @@ export default function PropertiesDrawer({
                           ? 'Deleting the data link will remove data access for collaborators with the link.'
                           : 'Creating a data link allows you to share the data at this path with internal collaborators or use tools to view the data.'}
                     </Typography>
+                    {!externalDataUrlQuery.data &&
+                    !proxiedPathByFspAndPathQuery.data ? (
+                      <a
+                        className="flex items-center gap-1 text-primary hover:underline"
+                        href="https://fileglancer-docs.janelia.org/features/data-sharing/"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        <Typography type="small">
+                          Learn more about data links
+                        </Typography>
+                        <HiExternalLink className="icon-xsmall" />
+                      </a>
+                    ) : null}
                   </div>
                   {externalDataUrlQuery.data ? (
-                    <CopyPathButton
-                      isDataLink={true}
-                      path={externalDataUrlQuery.data}
-                    />
+                    <>
+                      <CopyPathButton
+                        isDataLink={true}
+                        path={externalDataUrlQuery.data}
+                      />
+                      <TextDialogBtn
+                        label="Example code snippets"
+                        variant="solid"
+                      >
+                        {closeDialog => (
+                          <DataLinkUsageDialog
+                            dataLinkUrl={externalDataUrlQuery.data ?? ''}
+                            dataType={inferDataType(
+                              fileBrowserState.propertiesTarget?.path ?? ''
+                            )}
+                            onClose={closeDialog}
+                            open={true}
+                          />
+                        )}
+                      </TextDialogBtn>
+                    </>
                   ) : proxiedPathByFspAndPathQuery.data?.url ? (
-                    <CopyPathButton
-                      isDataLink={true}
-                      path={proxiedPathByFspAndPathQuery.data.url}
-                    />
+                    <>
+                      <CopyPathButton
+                        isDataLink={true}
+                        path={proxiedPathByFspAndPathQuery.data.url}
+                      />
+                      <TextDialogBtn
+                        label="How to use your data link"
+                        variant="solid"
+                      >
+                        {closeDialog => (
+                          <DataLinkUsageDialog
+                            dataLinkUrl={
+                              proxiedPathByFspAndPathQuery.data?.url ?? ''
+                            }
+                            dataType={inferDataType(
+                              fileBrowserState.propertiesTarget?.path ?? ''
+                            )}
+                            onClose={closeDialog}
+                            open={true}
+                          />
+                        )}
+                      </TextDialogBtn>
+                    </>
                   ) : null}
                 </>
               ) : null}
diff --git a/frontend/src/components/ui/Table/linksColumns.tsx b/frontend/src/components/ui/Table/linksColumns.tsx
index 222848eb..238cd1ec 100644
--- a/frontend/src/components/ui/Table/linksColumns.tsx
+++ b/frontend/src/components/ui/Table/linksColumns.tsx
@@ -4,6 +4,9 @@ import { Typography } from '@material-tailwind/react';
 import type { ColumnDef } from '@tanstack/react-table';
 
 import DataLinkDialog from '@/components/ui/Dialogs/DataLink';
+import DataLinkUsageDialog, {
+  inferDataType
+} from '@/components/ui/Dialogs/DataLinkUsageDialog';
 import DataLinksActionsMenu from '@/components/ui/Menus/DataLinksActions';
 import { usePreferencesContext } from '@/contexts/PreferencesContext';
 import { useZoneAndFspMapContext } from '@/contexts/ZonesAndFspMapContext';
@@ -37,6 +40,7 @@ type ProxiedPathRowActionProps = {
   handleCopyPath: (path: string) => Promise<void>;
   handleCopyUrl: (item: ProxiedPath) => Promise<void>;
   handleUnshare: () => void;
+  handleViewDataLinkUsage: () => void;
   item: ProxiedPath;
   displayPath: string;
   pathFsp: FileSharePath | undefined;
@@ -94,6 +98,8 @@ function PathCell({
 
 function ActionsCell({ item }: { readonly item: ProxiedPath }) {
   const [showDataLinkDialog, setShowDataLinkDialog] = useState<boolean>(false);
+  const [showDataLinkUsageDialog, setShowDataLinkUsageDialog] =
+    useState<boolean>(false);
   const { handleDeleteDataLink } = useDataToolLinks(setShowDataLinkDialog);
   const { pathPreference } = usePreferencesContext();
   const { zonesAndFspQuery } = useZoneAndFspMapContext();
@@ -114,6 +120,10 @@ function ActionsCell({ item }: { readonly item: ProxiedPath }) {
     item.path
   );
 
+  const handleViewDataLinkUsage = () => {
+    setShowDataLinkUsageDialog(true);
+  };
+
   const menuItems: MenuItem<ProxiedPathRowActionProps>[] = [
     {
       name: 'Copy path',
@@ -127,6 +137,11 @@ function ActionsCell({ item }: { readonly item: ProxiedPath }) {
         await props.handleCopyUrl(props.item);
       }
     },
+    {
+      name: 'Example code snippets',
+      action: (props: ProxiedPathRowActionProps) =>
+        props.handleViewDataLinkUsage()
+    },
     {
       name: 'Unshare',
       action: (props: ProxiedPathRowActionProps) => props.handleUnshare(),
@@ -138,6 +153,7 @@ function ActionsCell({ item }: { readonly item: ProxiedPath }) {
     handleCopyPath,
     handleCopyUrl,
     handleUnshare,
+    handleViewDataLinkUsage,
     item,
     displayPath,
     pathFsp
@@ -169,6 +185,15 @@ function ActionsCell({ item }: { readonly item: ProxiedPath }) {
           showDataLinkDialog={showDataLinkDialog}
         />
       ) : null}
+      {/* Code snippets dialog */}
+      {showDataLinkUsageDialog ? (
+        <DataLinkUsageDialog
+          dataLinkUrl={item.url}
+          dataType={inferDataType(item.path)}
+          onClose={() => setShowDataLinkUsageDialog(false)}
+          open={showDataLinkUsageDialog}
+        />
+      ) : null}
     </div>
   );
 }
@@ -241,12 +266,15 @@ export function useLinksColumns(): ColumnDef<ProxiedPath>[] {
         enableSorting: true,
         meta: {
           // Allow searching by URL and all path formats (linux, mac, windows)
-          getSearchableValues: (value: PathCellValue, row: ProxiedPath) => [
-            row.url,
-            value.pathMap.mac_path,
-            value.pathMap.linux_path,
-            value.pathMap.windows_path
-          ]
+          getSearchableValues: (value: unknown, row: ProxiedPath) => {
+            const pathValue = value as PathCellValue;
+            return [
+              row.url,
+              pathValue.pathMap.mac_path,
+              pathValue.pathMap.linux_path,
+              pathValue.pathMap.windows_path
+            ];
+          }
         }
       },
       {
diff --git a/frontend/src/components/ui/buttons/DialogIconBtn.tsx b/frontend/src/components/ui/buttons/DialogIconBtn.tsx
new file mode 100644
index 00000000..2f81af6a
--- /dev/null
+++ b/frontend/src/components/ui/buttons/DialogIconBtn.tsx
@@ -0,0 +1,46 @@
+import { useState, type ReactNode, type MouseEvent } from 'react';
+import type { IconType } from 'react-icons';
+
+import FgTooltip from '@/components/ui/widgets/FgTooltip';
+import FgDialog from '@/components/ui/Dialogs/FgDialog';
+
+type DialogIconBtnProps = {
+  readonly icon: IconType;
+  readonly label: string;
+  readonly triggerClasses: string;
+  readonly disabled?: boolean;
+  readonly children: ReactNode | ((closeDialog: () => void) => ReactNode);
+};
+
+export default function DialogIconBtn({
+  icon,
+  label,
+  triggerClasses,
+  disabled = false,
+  children
+}: DialogIconBtnProps) {
+  const [showDialog, setShowDialog] = useState(false);
+
+  const closeDialog = () => setShowDialog(false);
+
+  return (
+    <>
+      <FgTooltip
+        as="button"
+        disabledCondition={disabled}
+        icon={icon}
+        label={label}
+        onClick={(e: MouseEvent<HTMLButtonElement>) => {
+          setShowDialog(true);
+          e.currentTarget.blur();
+        }}
+        triggerClasses={triggerClasses}
+      />
+      {showDialog ? (
+        <FgDialog onClose={closeDialog} open={showDialog}>
+          {typeof children === 'function' ? children(closeDialog) : children}
+        </FgDialog>
+      ) : null}
+    </>
+  );
+}
diff --git a/frontend/src/components/ui/buttons/DialogTextBtn.tsx b/frontend/src/components/ui/buttons/DialogTextBtn.tsx
new file mode 100644
index 00000000..29071a35
--- /dev/null
+++ b/frontend/src/components/ui/buttons/DialogTextBtn.tsx
@@ -0,0 +1,45 @@
+import { useState, type ReactNode, type MouseEvent } from 'react';
+import { Button } from '@material-tailwind/react';
+
+import FgDialog from '@/components/ui/Dialogs/FgDialog';
+
+type TextDialogBtnProps = {
+  readonly label: string;
+  readonly variant?: 'solid' | 'outline' | 'ghost' | 'gradient' | undefined;
+  readonly className?: string;
+  readonly disabled?: boolean;
+  readonly children: ReactNode | ((closeDialog: () => void) => ReactNode);
+};
+
+export default function TextDialogBtn({
+  label,
+  variant = 'outline',
+  className = '!rounded-md w-fit',
+  disabled = false,
+  children
+}: TextDialogBtnProps) {
+  const [showDialog, setShowDialog] = useState(false);
+
+  const closeDialog = () => setShowDialog(false);
+
+  return (
+    <>
+      <Button
+        className={className}
+        disabled={disabled}
+        onClick={(e: MouseEvent<HTMLButtonElement>) => {
+          setShowDialog(true);
+          e.currentTarget.blur();
+        }}
+        variant={variant}
+      >
+        {label}
+      </Button>
+      {showDialog ? (
+        <FgDialog onClose={closeDialog} open={showDialog}>
+          {typeof children === 'function' ? children(closeDialog) : children}
+        </FgDialog>
+      ) : null}
+    </>
+  );
+}
diff --git a/frontend/src/components/ui/widgets/FgTooltip.tsx b/frontend/src/components/ui/widgets/FgTooltip.tsx
index 49be7b7b..5432495b 100644
--- a/frontend/src/components/ui/widgets/FgTooltip.tsx
+++ b/frontend/src/components/ui/widgets/FgTooltip.tsx
@@ -46,7 +46,7 @@ export default function FgTooltip({
       >
         {Icon ? <Icon className="icon-default" /> : null}
         {children}
-        <Tooltip.Content className="px-2.5 py-1.5 text-primary-foreground z-10">
+        <Tooltip.Content className="px-2.5 py-1.5 text-primary-foreground z-[9999]">
           <Typography className="opacity-90" type="small">
             {interactiveLabel ? interactiveLabel : label}
           </Typography>
diff --git a/frontend/src/hooks/useDarkMode.ts b/frontend/src/hooks/useDarkMode.ts
new file mode 100644
index 00000000..83187a9e
--- /dev/null
+++ b/frontend/src/hooks/useDarkMode.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Hook to detect dark mode from the document element's class list.
+ * Observes changes to the document element's class attribute.
+ * @returns boolean indicating if dark mode is active
+ */
+export default function useDarkMode(): boolean {
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      setIsDarkMode(document.documentElement.classList.contains('dark'));
+    };
+
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return isDarkMode;
+}