diff --git a/frontend/app/datasets/page.tsx b/frontend/app/datasets/page.tsx
index 0a12f24..e3b9da2 100644
--- a/frontend/app/datasets/page.tsx
+++ b/frontend/app/datasets/page.tsx
@@ -1,21 +1,26 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { api, Dataset, SambaShare, NfsShare, Pool } from "@/lib/api"
+import { useRouter } from "next/navigation"
+import { api, Dataset, Pool } from "@/lib/api"
 import { Header } from "@/components/Header"
 import { Button } from "@/components/ui/button"
 import { Dialog } from "@/components/ui/dialog"
-import { Plus, Trash2, RefreshCw, ChevronRight, ChevronDown, MoreVertical, Camera } from "lucide-react"
+import { Plus, Trash2, RefreshCw, ChevronRight, ChevronDown, MoreVertical, Camera, AlertCircle } from "lucide-react"
 import { Snapshot } from "@/lib/api"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
+import CreateSambaDialog from "@/components/shares/CreateSambaDialog"
+import CreateNfsDialog from "@/components/shares/CreateNfsDialog"
+import DeleteConfirmDialog from "@/components/shares/DeleteConfirmDialog"
 
 export default function DatasetsPage() {
+  const router = useRouter()
   const [tab, setTab] = useState<"datasets" | "shares">("datasets")
+
+  // ── Datasets state ──────────────────────────────────────────────────────────
   const [datasets, setDatasets] = useState<Dataset[]>([])
   const [pools, setPools] = useState<Pool[]>([])
-  const [sambaShares, setSambaShares] = useState<SambaShare[]>([])
-  const [nfsShares, setNfsShares] = useState<NfsShare[]>([])
   const [loading, setLoading] = useState(true)
   const [expandedDatasets, setExpandedDatasets] = useState<Set<string>>(new Set())
   const [poolTabs, setPoolTabs] = useState<Map<string, string>>(new Map())
@@ -27,39 +32,46 @@ export default function DatasetsPage() {
   const [cloneTarget, setCloneTarget] = useState<Snapshot | null>(null)
   const [cloneValue, setCloneValue] = useState("")
 
-  // Dialogs
+  // Dataset dialogs
   const [showCreateDataset, setShowCreateDataset] = useState(false)
-  const [showCreateSambaShare, setShowCreateSambaShare] = useState(false)
-  const [showCreateNfsShare, setShowCreateNfsShare] = useState(false)
   const [deleteDataset, setDeleteDataset] = useState<string | null>(null)
-  const [deleteSambaShare, setDeleteSambaShare] = useState<string | null>(null)
-  const [deleteNfsShare, setDeleteNfsShare] = useState<string | null>(null)
-
-  // Form states
   const [newDatasetName, setNewDatasetName] = useState("")
-  const [newSambaName, setNewSambaName] = useState("")
-  const [newSambaPath, setNewSambaPath] = useState("")
-  const [newSambaComment, setNewSambaComment] = useState("")
-  const [newNfsPath, setNewNfsPath] = useState("")
-  const [newNfsClients, setNewNfsClients] = useState("")
-  const [newNfsOptions, setNewNfsOptions] = useState("ro,sync,no_subtree_check")
+
+  // ── Shares state (from shares/page.tsx) ─────────────────────────────────────
+  const [sharesTab, setSharesTab] = useState<"samba" | "nfs" | "config">("samba")
+  const [sambaShares, setSambaShares] = useState<any[]>([])
+  const [nfsShares, setNfsShares] = useState<any[]>([])
+  const [sambaConfig, setSambaConfig] = useState<any[]>([])
+  const [sharesLoading, setSharesLoading] = useState(false)
+  const [sharesError, setSharesError] = useState<string | null>(null)
+  const [showSambaDialog, setShowSambaDialog] = useState(false)
+  const [showNfsDialog, setShowNfsDialog] = useState(false)
+  const [deleteConfirm, setDeleteConfirm] = useState<{ type: "samba" | "nfs"; name: string } | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [editMode, setEditMode] = useState(false)
+  const [rawConfigText, setRawConfigText] = useState("")
+  const [saving, setSaving] = useState(false)
+  const [macosEnabled, setMacosEnabled] = useState(false)
+  const [editingShare, setEditingShare] = useState<any | null>(null)
 
   useEffect(() => {
+    const token = localStorage.getItem("access_token")
+    if (!token) {
+      router.push("/login")
+      return
+    }
     loadData()
-  }, [])
+  }, [router])
 
+  // ── Load datasets + pools ───────────────────────────────────────────────────
   const loadData = async () => {
     setLoading(true)
     try {
-      const [ds, samba, nfs, poolData] = await Promise.all([
+      const [ds, poolData] = await Promise.all([
         api.getDatasets(),
-        api.getSambaShares(),
-        api.getNfsShares(),
         api.getPools().catch(() => []),
       ])
       setDatasets(ds)
-      setSambaShares(samba)
-      setNfsShares(nfs)
       setPools(Array.isArray(poolData) ? poolData : [])
     } catch (err) {
       console.error("Failed to load data:", err)
@@ -68,6 +80,46 @@ export default function DatasetsPage() {
     }
   }
 
+  // ── Load shares ─────────────────────────────────────────────────────────────
+  const loadShares = async () => {
+    try {
+      setSharesLoading(true)
+      setSharesError(null)
+
+      const [samba, nfs, config] = await Promise.all([
+        api.getSambaShares().catch(() => []),
+        api.getNfsShares().catch(() => []),
+        api.getSambaConfig().catch(() => ({ parameters: [] })),
+      ])
+
+      setSambaShares(samba)
+      setNfsShares(nfs)
+      const params: { key: string; value: string }[] = config.parameters || []
+      setSambaConfig(params)
+      const raw = params.map((p) => `${p.key} = ${p.value}`).join("\n")
+      setRawConfigText(raw)
+      const hasMacOS = ["fruit:encoding", "fruit:metadata", "fruit:zero_file_id", "fruit:nfs_aces"].every(
+        (k) => params.some((p) => p.key === k)
+      )
+      setMacosEnabled(hasMacOS)
+    } catch (err) {
+      setSharesError(err instanceof Error ? err.message : "Failed to load shares")
+    } finally {
+      setSharesLoading(false)
+    }
+  }
+
+  // Lazy-load shares when the tab is first activated
+  const [sharesLoaded, setSharesLoaded] = useState(false)
+  const handleSharesTab = () => {
+    setTab("shares")
+    if (!sharesLoaded) {
+      setSharesLoaded(true)
+      loadShares()
+    }
+  }
+
+  // ── Snapshot helpers ────────────────────────────────────────────────────────
   const loadPoolSnapshots = async (poolName: string) => {
     setLoadingSnaps((s) => new Set(s).add(poolName))
     try {
@@ -119,10 +171,10 @@ export default function DatasetsPage() {
     setCloneTarget(null)
   }
 
+  // ── Dataset CRUD ─────────────────────────────────────────────────────────────
   const handleCreateDataset = async () => {
     if (!newDatasetName.trim()) return
     try {
-      // Create dataset via API
       await api.createDataset(newDatasetName, {})
       setNewDatasetName("")
       setShowCreateDataset(false)
@@ -142,62 +194,118 @@ export default function DatasetsPage() {
     }
   }
 
-  const handleCreateSambaShare = async () => {
-    if (!newSambaName.trim() || !newSambaPath.trim()) return
-    try {
-      await api.createSambaShare({
-        name: newSambaName,
-        path: newSambaPath,
-        comment: newSambaComment || undefined,
-      })
-      setNewSambaName("")
-      setNewSambaPath("")
-      setNewSambaComment("")
-      setShowCreateSambaShare(false)
-      loadData()
-    } catch (err) {
-      console.error("Failed to create Samba share:", err)
-    }
-  }
-
-  const handleDeleteSambaShare = async (name: string) => {
+  // ── Share CRUD ───────────────────────────────────────────────────────────────
+  const handleDeleteSamba = async (name: string) => {
     try {
+      setDeleting(true)
       await api.deleteSambaShare(name)
-      setDeleteSambaShare(null)
-      loadData()
+      setSambaShares(sambaShares.filter((s) => s.name !== name))
+      setDeleteConfirm(null)
     } catch (err) {
-      console.error("Failed to delete Samba share:", err)
+      setSharesError(err instanceof Error ? err.message : "Failed to delete share")
+    } finally {
+      setDeleting(false)
     }
   }
 
-  const handleCreateNfsShare = async () => {
-    if (!newNfsPath.trim() || !newNfsClients.trim()) return
-    try {
-      await api.createNfsShare({
-        path: newNfsPath,
-        clients: newNfsClients,
-        options: newNfsOptions || undefined,
-      })
-      setNewNfsPath("")
-      setNewNfsClients("")
-      setNewNfsOptions("ro,sync,no_subtree_check")
-      setShowCreateNfsShare(false)
-      loadData()
-    } catch (err) {
-      console.error("Failed to create NFS share:", err)
-    }
-  }
-
-  const handleDeleteNfsShare = async (path: string) => {
+  const handleDeleteNfs = async (path: string) => {
     try {
+      setDeleting(true)
       await api.deleteNfsShare(path)
-      setDeleteNfsShare(null)
-      loadData()
+      setNfsShares(nfsShares.filter((s) => s.path !== path))
+      setDeleteConfirm(null)
     } catch (err) {
-      console.error("Failed to delete NFS share:", err)
+      setSharesError(err instanceof Error ? err.message : "Failed to delete share")
+    } finally {
+      setDeleting(false)
     }
   }
 
+  const handleSambaCreated = (newShare: any) => {
+    setSambaShares([...sambaShares, newShare])
+    setShowSambaDialog(false)
+  }
+
+  const handleNfsCreated = (newShare: any) => {
+    setNfsShares([...nfsShares, newShare])
+    setShowNfsDialog(false)
+  }
+
+  const handleSaveShare = async () => {
+    if (!editingShare) return
+    try {
+      setSaving(true)
+      await api.updateSambaShare(editingShare.oldName, {
+        name: editingShare.name,
+        path: editingShare.path,
+        comment: editingShare.comment,
+      })
+      setSambaShares(sambaShares.map((s) =>
+        s.name === editingShare.oldName
+          ? { name: editingShare.name, path: editingShare.path, comment: editingShare.comment, ...s }
+          : s
+      ))
+      setEditingShare(null)
+      setSharesError(null)
+    } catch (err) {
+      setSharesError(err instanceof Error ? err.message : "Failed to save share")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const MACOS_PARAMS: { [key: string]: string } = {
+    "fruit:encoding": "native",
+    "fruit:metadata": "stream",
+    "fruit:zero_file_id": "yes",
+    "fruit:nfs_aces": "no",
+  }
+  const MACOS_KEYS = Object.keys(MACOS_PARAMS)
+
+  const handleSaveRaw = async () => {
+    try {
+      setSaving(true)
+      const parsed: { [key: string]: string } = {}
+      rawConfigText.split("\n").forEach((line) => {
+        const eq = line.indexOf("=")
+        if (eq === -1) return
+        const key = line.slice(0, eq).trim()
+        const value = line.slice(eq + 1).trim()
+        if (key) parsed[key] = value
+      })
+      await api.setSambaConfig(parsed)
+      await loadShares()
+      setEditMode(false)
+      setSharesError(null)
+    } catch (err) {
+      setSharesError(err instanceof Error ? err.message : "Failed to save configuration")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleToggleMacOS = async (enable: boolean) => {
+    try {
+      setSaving(true)
+      const current = sambaConfig.reduce((acc, p) => { acc[p.key] = p.value; return acc }, {} as { [key: string]: string })
+      if (enable) {
+        await api.setSambaConfig({ ...current, ...MACOS_PARAMS } as { [key: string]: string })
+      } else {
+        const filtered: { [key: string]: string } = {}
+        Object.entries(current).forEach(([k, v]) => { if (!MACOS_KEYS.includes(k)) filtered[k] = v as string })
+        await api.setSambaConfig(filtered)
+      }
+      setMacosEnabled(enable)
+      await loadShares()
+      setSharesError(null)
+    } catch (err) {
+      setSharesError(err instanceof Error ? err.message : "Failed to update macOS settings")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  // ── Dataset tree helpers ─────────────────────────────────────────────────────
   const formatBytes = (bytes: number) => {
     if (bytes === 0) return "0 B"
     const k = 1024
@@ -206,82 +314,13 @@ export default function DatasetsPage() {
     return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i]
   }
 
-  const getDatasetDepth = (name: string): number => {
-    return name.split("/").length - 1
-  }
-
-  const getTopLevelDatasets = (): Dataset[] => {
-    return datasets.filter((ds) => ds.name.split("/").length === 1)
-  }
-
+  const getTopLevelDatasets = (): Dataset[] => datasets.filter((ds) => ds.name.split("/").length === 1)
 
   const getChildDatasets = (parent: string): Dataset[] => {
     const prefix = parent + "/"
     return datasets.filter((ds) => ds.name.startsWith(prefix) && ds.name !== parent)
   }
 
-  const toggleExpand = (name: string) => {
-    const newExpanded = new Set(expandedDatasets)
-    if (newExpanded.has(name)) {
-      newExpanded.delete(name)
-    } else {
-      newExpanded.add(name)
-    }
-    setExpandedDatasets(newExpanded)
-  }
-
-  const renderDatasetTree = (parent?: string): React.ReactNode[] => {
-    const items: React.ReactNode[] = []
-    const datasetList = parent ? getChildDatasets(parent) : getTopLevelDatasets()
-
-    datasetList.forEach((ds) => {
-      const children = getChildDatasets(ds.name)
-      const isExpanded = expandedDatasets.has(ds.name)
-      const depth = getDatasetDepth(ds.name)
-
-      items.push(
-        <tr key={ds.name} className="border-b border-border hover:bg-muted/50">
-          <td className="px-4 py-3 font-mono text-xs" style={{ paddingLeft: `${depth * 24 + 16}px` }}>
-            <div className="flex items-center gap-2">
-              {children.length > 0 && (
-                <button
-                  onClick={() => toggleExpand(ds.name)}
-                  className="p-0 hover:bg-muted rounded"
-                >
-                  {isExpanded ? (
-                    <ChevronDown className="w-4 h-4" />
-                  ) : (
-                    <ChevronRight className="w-4 h-4" />
-                  )}
-                </button>
-              )}
-              {children.length === 0 && <div className="w-4" />}
-              <span>{ds.name.split("/").pop()}</span>
-            </div>
-          </td>
-          <td className="px-4 py-3">{ds.type}</td>
-          <td className="px-4 py-3">{formatBytes(ds.used || 0)}</td>
-          <td className="px-4 py-3 text-xs">{ds.mountpoint || "—"}</td>
-          <td className="px-4 py-3">{ds.compression || "off"}</td>
-          <td className="px-4 py-3">
-            <button
-              onClick={() => setDeleteDataset(ds.name)}
-              className="text-destructive hover:underline"
-            >
-              <Trash2 className="w-4 h-4" />
-            </button>
-          </td>
-        </tr>
-      )
-
-      if (isExpanded && children.length > 0) {
-        items.push(...renderDatasetTree(ds.name))
-      }
-    })
-
-    return items
-  }
-
   if (loading) {
     return <div className="p-8">Loading...</div>
   }
@@ -291,13 +330,13 @@ export default function DatasetsPage() {
       <Header />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center justify-between mb-6">
-          <h1 className="text-3xl font-bold">Datasets & Shares</h1>
-          <Button onClick={loadData} variant="outline" size="sm">
+          <h1 className="text-3xl font-bold">Datasets &amp; Shares</h1>
+          <Button onClick={tab === "datasets" ? loadData : loadShares} variant="outline" size="sm">
             <RefreshCw className="w-4 h-4" />
           </Button>
         </div>
 
-        {/* Tab Navigation */}
+        {/* Top-level Tab Navigation */}
         <div className="flex gap-2 mb-6 border-b border-border">
           <button
             onClick={() => setTab("datasets")}
@@ -310,18 +349,18 @@ export default function DatasetsPage() {
             Datasets
           </button>
           <button
-            onClick={() => setTab("shares")}
+            onClick={handleSharesTab}
             className={`px-4 py-2 font-medium transition-colors ${
               tab === "shares"
                 ? "text-foreground border-b-2 border-primary"
                 : "text-muted-foreground hover:text-foreground"
             }`}
           >
-            Shares (Samba & NFS)
+            Shares &amp; Config
           </button>
         </div>
 
-        {/* Datasets Tab */}
+        {/* ── DATASETS TAB ────────────────────────────────────────────────────── */}
         {tab === "datasets" && (
           <div className="space-y-6">
             <div className="mb-4">
@@ -338,7 +377,6 @@ export default function DatasetsPage() {
 
               return (
                 <Card key={pool.name}>
-                  {/* Pool Header */}
                   <CardHeader className="pb-2">
                     <div className="flex items-center justify-between mb-4">
                       <div className="flex items-center gap-3">
@@ -353,7 +391,6 @@ export default function DatasetsPage() {
                       </button>
                     </div>
 
-                    {/* Pool Stats Grid */}
                     <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-4">
                       <div>
                         <p className="text-xs text-muted-foreground">Size</p>
@@ -377,7 +414,6 @@ export default function DatasetsPage() {
                       </div>
                     </div>
 
-                    {/* Usage Bar */}
                     {(() => {
                       const pct = poolInfo?.size ? (poolInfo.alloc / poolInfo.size) * 100 : 0
                       return (
@@ -394,7 +430,6 @@ export default function DatasetsPage() {
                     })()}
                   </CardHeader>
 
-                  {/* Tabs */}
                   <CardContent>
                     <div className="border-b border-border mb-4">
                       <div className="flex gap-4">
@@ -431,7 +466,6 @@ export default function DatasetsPage() {
                       </div>
                     </div>
 
-                    {/* File Systems Tab */}
                     {currentPoolTab === "filesystems" && (
                       <div className="overflow-x-auto">
                         <table className="w-full text-sm">
@@ -471,7 +505,6 @@ export default function DatasetsPage() {
                       </div>
                     )}
 
-                    {/* Snapshots Tab */}
                     {currentPoolTab === "snapshots" && (() => {
                       const snaps = poolSnapshots.get(pool.name) || []
                       const isLoading = loadingSnaps.has(pool.name)
@@ -495,7 +528,6 @@ export default function DatasetsPage() {
                           ) : snaps.length === 0 ? (
                             <div className="text-center py-6 text-muted-foreground text-xs">No snapshots</div>
                           ) : (() => {
-                            // Group snapshots by dataset
                             const groups = new Map<string, Snapshot[]>()
                             snaps.forEach((s) => {
                               const ds = s.dataset || s.name.split("@")[0]
@@ -520,7 +552,6 @@ export default function DatasetsPage() {
                                     {Array.from(groups.entries()).map(([ds, dsSnaps]) => {
                                       const isGroupExpanded = expandedDatasets.has(`${expandKey}-${ds}`)
                                       return [
-                                        // Group header row
                                         <tr
                                           key={`group-${ds}`}
                                           className="border-b border-border bg-muted/20 hover:bg-muted/40 cursor-pointer select-none"
@@ -540,7 +571,6 @@ export default function DatasetsPage() {
                                           </td>
                                           <td />
                                         </tr>,
-                                        // Snapshot rows (expanded)
                                         ...(isGroupExpanded ? dsSnaps.map((snap) => (
                                           <tr key={snap.name} className="border-b border-border/40 hover:bg-muted/30">
                                             <td className="px-3 py-1.5 font-mono pl-8">{snap.name.split("@")[1]}</td>
@@ -571,7 +601,6 @@ export default function DatasetsPage() {
                       )
                     })()}
 
-                    {/* Status Tab */}
                     {currentPoolTab === "status" && (
                       <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                         <div>
@@ -599,110 +628,313 @@ export default function DatasetsPage() {
           </div>
         )}
 
-        {/* Shares Tab */}
+        {/* ── SHARES & CONFIG TAB ─────────────────────────────────────────────── */}
         {tab === "shares" && (
           <div>
-            <div className="mb-8">
-              <h2 className="text-xl font-bold mb-4">Samba Shares</h2>
-              <div className="mb-4">
-                <Button onClick={() => setShowCreateSambaShare(true)} size="sm">
-                  <Plus className="w-4 h-4 mr-2" />
-                  Create Samba Share
-                </Button>
-              </div>
+            {sharesError && (
+              <Card className="mb-6 border-red-200 bg-red-50">
+                <CardContent className="flex items-center gap-3 pt-6">
+                  <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
+                  <div>
+                    <p className="font-medium text-red-900">Error</p>
+                    <p className="text-sm text-red-800">{sharesError}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
 
-              <div className="border border-border rounded-lg overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead className="bg-muted border-b border-border">
-                    <tr>
-                      <th className="px-4 py-3 text-left font-medium">Name</th>
-                      <th className="px-4 py-3 text-left font-medium">Path</th>
-                      <th className="px-4 py-3 text-left font-medium">Comment</th>
-                      <th className="px-4 py-3 text-left font-medium">Action</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {sambaShares.map((share) => (
-                      <tr key={share.name} className="border-b border-border hover:bg-muted/50">
-                        <td className="px-4 py-3 font-mono text-xs">{share.name}</td>
-                        <td className="px-4 py-3 text-xs">{share.path}</td>
-                        <td className="px-4 py-3 text-xs">{share.comment || "—"}</td>
-                        <td className="px-4 py-3">
-                          <button
-                            onClick={() => setDeleteSambaShare(share.name)}
-                            className="text-destructive hover:underline"
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </button>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+            {/* Sub-tab navigation */}
+            <div className="border-b border-border mb-6">
+              <div className="flex gap-4">
+                <button
+                  onClick={() => setSharesTab("samba")}
+                  className={`px-4 py-2 font-medium transition-colors ${
+                    sharesTab === "samba"
+                      ? "border-b-2 border-primary text-primary"
+                      : "text-muted-foreground hover:text-foreground"
+                  }`}
+                >
+                  SMB/Samba
+                </button>
+                <button
+                  onClick={() => setSharesTab("nfs")}
+                  className={`px-4 py-2 font-medium transition-colors ${
+                    sharesTab === "nfs"
+                      ? "border-b-2 border-primary text-primary"
+                      : "text-muted-foreground hover:text-foreground"
+                  }`}
+                >
+                  NFS
+                </button>
+                <button
+                  onClick={() => setSharesTab("config")}
+                  className={`px-4 py-2 font-medium transition-colors ${
+                    sharesTab === "config"
+                      ? "border-b-2 border-primary text-primary"
+                      : "text-muted-foreground hover:text-foreground"
+                  }`}
+                >
+                  Samba Config
+                </button>
               </div>
-
-              {sambaShares.length === 0 && (
-                <div className="text-center py-4 text-muted-foreground text-sm">
-                  No Samba shares
-                </div>
-              )}
             </div>
 
-            <div>
-              <h2 className="text-xl font-bold mb-4">NFS Shares</h2>
-              <div className="mb-4">
-                <Button onClick={() => setShowCreateNfsShare(true)} size="sm">
-                  <Plus className="w-4 h-4 mr-2" />
-                  Create NFS Share
-                </Button>
-              </div>
+            {/* SAMBA SUB-TAB */}
+            {sharesTab === "samba" && (
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <CardTitle>Samba Shares</CardTitle>
+                    <Button size="sm" onClick={() => setShowSambaDialog(true)}>
+                      <Plus className="w-4 h-4 mr-2" />
+                      New Share
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {sharesLoading ? (
+                    <p className="text-muted-foreground text-center py-12">Loading…</p>
+                  ) : sambaShares.length === 0 ? (
+                    <p className="text-muted-foreground text-center py-12">
+                      No Samba shares configured. Create one to get started.
+                    </p>
+                  ) : (
+                    <div className="overflow-x-auto">
+                      <table className="w-full text-sm">
+                        <thead className="border-b border-border bg-muted/30">
+                          <tr>
+                            <th className="text-left py-3 px-4 font-medium">Name</th>
+                            <th className="text-left py-3 px-4 font-medium">Path</th>
+                            <th className="text-left py-3 px-4 font-medium">Users</th>
+                            <th className="text-left py-3 px-4 font-medium">Perms</th>
+                            <th className="text-left py-3 px-4 font-medium">Comment</th>
+                            <th className="text-right py-3 px-4 font-medium">Actions</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {sambaShares.map((share) => {
+                            const isEditing = editingShare?.oldName === share.name
+                            return (
+                              <tr key={share.name} className="border-b border-border/50 hover:bg-muted/30">
+                                <td className="py-3 px-4 text-xs">
+                                  {isEditing ? (
+                                    <input
+                                      type="text"
+                                      value={editingShare.name}
+                                      onChange={(e) => setEditingShare({ ...editingShare, name: e.target.value })}
+                                      className="px-2 py-1 rounded border border-border bg-background text-xs font-mono w-full"
+                                      disabled={saving}
+                                    />
+                                  ) : (
+                                    <span className="font-mono">{share.name}</span>
+                                  )}
+                                </td>
+                                <td className="py-3 px-4 text-xs">
+                                  {isEditing ? (
+                                    <input
+                                      type="text"
+                                      value={editingShare.path}
+                                      onChange={(e) => setEditingShare({ ...editingShare, path: e.target.value })}
+                                      className="px-2 py-1 rounded border border-border bg-background text-xs font-mono w-full"
+                                      disabled={saving}
+                                    />
+                                  ) : (
+                                    <span className="font-mono">{share.path}</span>
+                                  )}
+                                </td>
+                                <td className="py-3 px-4 text-xs">{share.valid_users || "—"}</td>
+                                <td className="py-3 px-4 text-xs">
+                                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                                    {share.read_only ? "RO" : "RW"}
+                                  </span>
+                                </td>
+                                <td className="py-3 px-4 text-xs">
+                                  {isEditing ? (
+                                    <input
+                                      type="text"
+                                      value={editingShare.comment || ""}
+                                      onChange={(e) => setEditingShare({ ...editingShare, comment: e.target.value })}
+                                      className="px-2 py-1 rounded border border-border bg-background text-xs w-full"
+                                      disabled={saving}
+                                      placeholder="Optional comment"
+                                    />
+                                  ) : (
+                                    share.comment || "—"
+                                  )}
+                                </td>
+                                <td className="py-3 px-4 text-right space-x-2">
+                                  {isEditing ? (
+                                    <>
+                                      <button
+                                        onClick={handleSaveShare}
+                                        className="text-green-600 hover:text-green-700 transition-colors text-xs font-medium"
+                                        disabled={saving}
+                                      >
+                                        Save
+                                      </button>
+                                      <button
+                                        onClick={() => setEditingShare(null)}
+                                        className="text-gray-600 hover:text-gray-700 transition-colors text-xs font-medium"
+                                        disabled={saving}
+                                      >
+                                        Cancel
+                                      </button>
+                                    </>
+                                  ) : (
+                                    <>
+                                      <button
+                                        onClick={() => setEditingShare({ ...share, oldName: share.name })}
+                                        className="text-blue-600 hover:text-blue-700 transition-colors"
+                                      >
+                                        Edit
+                                      </button>
+                                      <button
+                                        onClick={() => setDeleteConfirm({ type: "samba", name: share.name })}
+                                        className="text-red-600 hover:text-red-700 transition-colors"
+                                      >
+                                        <Trash2 className="w-4 h-4 inline" />
+                                      </button>
+                                    </>
+                                  )}
+                                </td>
+                              </tr>
+                            )
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            )}
 
-              <div className="border border-border rounded-lg overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead className="bg-muted border-b border-border">
-                    <tr>
-                      <th className="px-4 py-3 text-left font-medium">Path</th>
-                      <th className="px-4 py-3 text-left font-medium">Clients</th>
-                      <th className="px-4 py-3 text-left font-medium">Options</th>
-                      <th className="px-4 py-3 text-left font-medium">Action</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {nfsShares.map((share) => (
-                      <tr key={share.path} className="border-b border-border hover:bg-muted/50">
-                        <td className="px-4 py-3 text-xs font-mono">{share.path}</td>
-                        <td className="px-4 py-3 text-xs">{share.clients}</td>
-                        <td className="px-4 py-3 text-xs">{share.options || "—"}</td>
-                        <td className="px-4 py-3">
-                          <button
-                            onClick={() => setDeleteNfsShare(share.path)}
-                            className="text-destructive hover:underline"
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </button>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
+            {/* NFS SUB-TAB */}
+            {sharesTab === "nfs" && (
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <CardTitle>NFS Shares</CardTitle>
+                    <Button size="sm" onClick={() => setShowNfsDialog(true)}>
+                      <Plus className="w-4 h-4 mr-2" />
+                      New Share
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {sharesLoading ? (
+                    <p className="text-muted-foreground text-center py-12">Loading…</p>
+                  ) : nfsShares.length === 0 ? (
+                    <p className="text-muted-foreground text-center py-12">
+                      No NFS shares configured. Create one to get started.
+                    </p>
+                  ) : (
+                    <div className="overflow-x-auto">
+                      <table className="w-full text-sm">
+                        <thead className="border-b border-border bg-muted/30">
+                          <tr>
+                            <th className="text-left py-3 px-4 font-medium">Path</th>
+                            <th className="text-left py-3 px-4 font-medium">Clients</th>
+                            <th className="text-left py-3 px-4 font-medium">Options</th>
+                            <th className="text-right py-3 px-4 font-medium">Actions</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {nfsShares.map((share) => (
+                            <tr key={share.path} className="border-b border-border/50 hover:bg-muted/30">
+                              <td className="py-3 px-4 font-mono text-xs">{share.path}</td>
+                              <td className="py-3 px-4 text-xs">{share.clients}</td>
+                              <td className="py-3 px-4 font-mono text-xs">{share.options || "—"}</td>
+                              <td className="py-3 px-4 text-right">
+                                <button
+                                  onClick={() => setDeleteConfirm({ type: "nfs", name: share.path })}
+                                  className="text-red-600 hover:text-red-700 transition-colors"
+                                >
+                                  <Trash2 className="w-4 h-4 inline" />
+                                </button>
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            )}
 
-              {nfsShares.length === 0 && (
-                <div className="text-center py-4 text-muted-foreground text-sm">
-                  No NFS shares
-                </div>
-              )}
-            </div>
+            {/* SAMBA CONFIG SUB-TAB */}
+            {sharesTab === "config" && (
+              <div className="space-y-4">
+                <Card>
+                  <CardContent className="py-5">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="font-medium">Global MacOS Shares</p>
+                        <p className="text-sm text-muted-foreground mt-0.5">Optimize all shares for MacOS</p>
+                        {macosEnabled && (
+                          <div className="mt-2 flex flex-wrap gap-2">
+                            {Object.entries(MACOS_PARAMS).map(([k, v]) => (
+                              <span key={k} className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
+                                {k} = {v}
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                      <button
+                        role="switch"
+                        aria-checked={macosEnabled}
+                        disabled={saving}
+                        onClick={() => handleToggleMacOS(!macosEnabled)}
+                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${macosEnabled ? "bg-red-500" : "bg-muted-foreground/30"} disabled:opacity-50`}
+                      >
+                        <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${macosEnabled ? "translate-x-6" : "translate-x-1"}`} />
+                      </button>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <div className="flex items-center justify-between">
+                      <CardTitle>Advanced</CardTitle>
+                      {!editMode ? (
+                        <Button size="sm" onClick={() => setEditMode(true)} variant="outline">
+                          Edit
+                        </Button>
+                      ) : (
+                        <div className="flex gap-2">
+                          <Button size="sm" onClick={handleSaveRaw} disabled={saving}>
+                            {saving ? "Saving..." : "Apply"}
+                          </Button>
+                          <Button size="sm" onClick={() => setEditMode(false)} variant="outline" disabled={saving}>
+                            Cancel
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <textarea
+                      readOnly={!editMode}
+                      value={rawConfigText}
+                      onChange={(e) => setRawConfigText(e.target.value)}
+                      rows={20}
+                      spellCheck={false}
+                      className={`w-full font-mono text-xs rounded border px-3 py-2 bg-background resize-y focus:outline-none focus:ring-2 focus:ring-ring ${editMode ? "border-border" : "border-transparent text-muted-foreground"}`}
+                    />
+                  </CardContent>
+                </Card>
+              </div>
+            )}
           </div>
         )}
       </div>
 
-      {/* Create Dataset Dialog */}
-      <Dialog
-        open={showCreateDataset}
-        onClose={() => setShowCreateDataset(false)}
-        title="Create Dataset"
-      >
+      {/* ── DIALOGS ──────────────────────────────────────────────────────────── */}
+
+      {/* Create Dataset */}
+      <Dialog open={showCreateDataset} onClose={() => setShowCreateDataset(false)} title="Create Dataset">
         <input
           type="text"
           placeholder="dataset name (e.g., tank/data)"
@@ -711,180 +943,19 @@ export default function DatasetsPage() {
           className="w-full border border-input rounded px-3 py-2 mb-4 bg-background text-foreground"
         />
         <div className="flex gap-2">
-          <Button onClick={handleCreateDataset} className="flex-1">
-            Create
-          </Button>
-          <Button
-            onClick={() => setShowCreateDataset(false)}
-            variant="outline"
-            className="flex-1"
-          >
-            Cancel
-          </Button>
+          <Button onClick={handleCreateDataset} className="flex-1">Create</Button>
+          <Button onClick={() => setShowCreateDataset(false)} variant="outline" className="flex-1">Cancel</Button>
         </div>
       </Dialog>
 
-      {/* Delete Dataset Dialog */}
-      <Dialog
-        open={!!deleteDataset}
-        onClose={() => setDeleteDataset(null)}
-        title="Delete Dataset"
-      >
+      {/* Delete Dataset */}
+      <Dialog open={!!deleteDataset} onClose={() => setDeleteDataset(null)} title="Delete Dataset">
         <p className="mb-4 text-sm">
-          Are you sure you want to delete <span className="font-mono">{deleteDataset}</span>?
-          This cannot be undone.
+          Are you sure you want to delete <span className="font-mono">{deleteDataset}</span>? This cannot be undone.
         </p>
         <div className="flex gap-2">
-          <Button
-            onClick={() => deleteDataset && handleDeleteDataset(deleteDataset)}
-            variant="destructive"
-            className="flex-1"
-          >
-            Delete
-          </Button>
-          <Button
-            onClick={() => setDeleteDataset(null)}
-            variant="outline"
-            className="flex-1"
-          >
-            Cancel
-          </Button>
-        </div>
-      </Dialog>
-
-      {/* Create Samba Share Dialog */}
-      <Dialog
-        open={showCreateSambaShare}
-        onClose={() => setShowCreateSambaShare(false)}
-        title="Create Samba Share"
-      >
-        <input
-          type="text"
-          placeholder="share name"
-          value={newSambaName}
-          onChange={(e) => setNewSambaName(e.target.value)}
-          className="w-full border border-input rounded px-3 py-2 mb-3 bg-background text-foreground text-sm"
-        />
-        <input
-          type="text"
-          placeholder="path (e.g., /mnt/tank/share)"
-          value={newSambaPath}
-          onChange={(e) => setNewSambaPath(e.target.value)}
-          className="w-full border border-input rounded px-3 py-2 mb-3 bg-background text-foreground text-sm"
-        />
-        <input
-          type="text"
-          placeholder="comment (optional)"
-          value={newSambaComment}
-          onChange={(e) => setNewSambaComment(e.target.value)}
-          className="w-full border border-input rounded px-3 py-2 mb-4 bg-background text-foreground text-sm"
-        />
-        <div className="flex gap-2">
-          <Button onClick={handleCreateSambaShare} className="flex-1">
-            Create
-          </Button>
-          <Button
-            onClick={() => setShowCreateSambaShare(false)}
-            variant="outline"
-            className="flex-1"
-          >
-            Cancel
-          </Button>
-        </div>
-      </Dialog>
-
-      {/* Delete Samba Share Dialog */}
-      <Dialog
-        open={!!deleteSambaShare}
-        onClose={() => setDeleteSambaShare(null)}
-        title="Delete Samba Share"
-      >
-        <p className="mb-4 text-sm">
-          Are you sure you want to delete <span className="font-mono">{deleteSambaShare}</span>?
-        </p>
-        <div className="flex gap-2">
-          <Button
-            onClick={() => deleteSambaShare && handleDeleteSambaShare(deleteSambaShare)}
-            variant="destructive"
-            className="flex-1"
-          >
-            Delete
-          </Button>
-          <Button
-            onClick={() => setDeleteSambaShare(null)}
-            variant="outline"
-            className="flex-1"
-          >
-            Cancel
-          </Button>
-        </div>
-      </Dialog>
-
-      {/* Create NFS Share Dialog */}
-      <Dialog
-        open={showCreateNfsShare}
-        onClose={() => setShowCreateNfsShare(false)}
-        title="Create NFS Share"
-      >
-        <input
-          type="text"
-          placeholder="path (e.g., /mnt/tank/share)"
-          value={newNfsPath}
-          onChange={(e) => setNewNfsPath(e.target.value)}
-          className="w-full border border-input rounded px-3 py-2 mb-3 bg-background text-foreground text-sm"
-        />
-        <input
-          type="text"
-          placeholder="clients (e.g., 192.168.1.0/24 or *)"
-          value={newNfsClients}
-          onChange={(e) => setNewNfsClients(e.target.value)}
-          className="w-full border border-input rounded px-3 py-2 mb-3 bg-background text-foreground text-sm"
-        />
-        <input
-          type="text"
-          placeholder="options"
-          value={newNfsOptions}
-          onChange={(e) => setNewNfsOptions(e.target.value)}
-          className="w-full border border-input rounded px-3 py-2 mb-4 bg-background text-foreground text-sm"
-        />
-        <div className="flex gap-2">
-          <Button onClick={handleCreateNfsShare} className="flex-1">
-            Create
-          </Button>
-          <Button
-            onClick={() => setShowCreateNfsShare(false)}
-            variant="outline"
-            className="flex-1"
-          >
-            Cancel
-          </Button>
-        </div>
-      </Dialog>
-
-      {/* Delete NFS Share Dialog */}
-      <Dialog
-        open={!!deleteNfsShare}
-        onClose={() => setDeleteNfsShare(null)}
-        title="Delete NFS Share"
-      >
-        <p className="mb-4 text-sm">
-          Are you sure you want to delete <span className="font-mono">{deleteNfsShare}</span>?
-        </p>
-        <div className="flex gap-2">
-          <Button
-            onClick={() => deleteNfsShare && handleDeleteNfsShare(deleteNfsShare)}
-            variant="destructive"
-            className="flex-1"
-          >
-            Delete
-          </Button>
-          <Button
-            onClick={() => setDeleteNfsShare(null)}
-            variant="outline"
-            className="flex-1"
-          >
-            Cancel
-          </Button>
+          <Button onClick={() => deleteDataset && handleDeleteDataset(deleteDataset)} variant="destructive" className="flex-1">Delete</Button>
+          <Button onClick={() => setDeleteDataset(null)} variant="outline" className="flex-1">Cancel</Button>
         </div>
       </Dialog>
 
@@ -914,7 +985,7 @@ export default function DatasetsPage() {
         </>
       )}
 
-      {/* Rename Snapshot Dialog */}
+      {/* Rename Snapshot */}
       <Dialog open={!!renameTarget} onClose={() => setRenameTarget(null)} title="Rename Snapshot">
         <p className="text-sm text-muted-foreground mb-3">New name for <span className="font-mono">{renameTarget?.name.split("@")[1]}</span></p>
         <input
@@ -930,7 +1001,7 @@ export default function DatasetsPage() {
         </div>
       </Dialog>
 
-      {/* Clone Snapshot Dialog */}
+      {/* Clone Snapshot */}
       <Dialog open={!!cloneTarget} onClose={() => setCloneTarget(null)} title="Clone Snapshot">
         <p className="text-sm text-muted-foreground mb-3">Clone <span className="font-mono">{cloneTarget?.name.split("@")[1]}</span> to:</p>
         <input
@@ -946,6 +1017,24 @@ export default function DatasetsPage() {
           <Button onClick={() => setCloneTarget(null)} variant="outline" className="flex-1">Cancel</Button>
         </div>
       </Dialog>
+
+      {/* Shares dialogs */}
+      <CreateSambaDialog open={showSambaDialog} onOpenChange={setShowSambaDialog} onCreated={handleSambaCreated} />
+      <CreateNfsDialog open={showNfsDialog} onOpenChange={setShowNfsDialog} onCreated={handleNfsCreated} />
+      <DeleteConfirmDialog
+        open={!!deleteConfirm}
+        onOpenChange={(open) => !open && setDeleteConfirm(null)}
+        type={deleteConfirm?.type === "samba" ? "Samba Share" : "NFS Share"}
+        name={deleteConfirm?.name || ""}
+        onConfirm={() => {
+          if (deleteConfirm?.type === "samba") {
+            handleDeleteSamba(deleteConfirm.name)
+          } else if (deleteConfirm?.type === "nfs") {
+            handleDeleteNfs(deleteConfirm.name)
+          }
+        }}
+        loading={deleting}
+      />
     </div>
   )
 }
diff --git a/frontend/app/shares/page.tsx b/frontend/app/shares/page.tsx
index 227da60..31673f5 100644
--- a/frontend/app/shares/page.tsx
+++ b/frontend/app/shares/page.tsx
@@ -1,516 +1,5 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { useRouter } from "next/navigation"
-import { api } from "@/lib/api"
-import { Header } from "@/components/Header"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { RefreshCw, Plus, Trash2, AlertCircle } from "lucide-react"
-import CreateSambaDialog from "@/components/shares/CreateSambaDialog"
-import CreateNfsDialog from "@/components/shares/CreateNfsDialog"
-import DeleteConfirmDialog from "@/components/shares/DeleteConfirmDialog"
+import { redirect } from "next/navigation"
 
 export default function SharesPage() {
-  const router = useRouter()
-  const [activeTab, setActiveTab] = useState<"samba" | "nfs" | "config">("samba")
-  const [sambaShares, setSambaShares] = useState<any[]>([])
-  const [nfsShares, setNfsShares] = useState<any[]>([])
-  const [sambaConfig, setSambaConfig] = useState<any[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [showSambaDialog, setShowSambaDialog] = useState(false)
-  const [showNfsDialog, setShowNfsDialog] = useState(false)
-  const [deleteConfirm, setDeleteConfirm] = useState<{ type: "samba" | "nfs"; name: string } | null>(null)
-  const [deleting, setDeleting] = useState(false)
-  const [editMode, setEditMode] = useState(false)
-  const [rawConfigText, setRawConfigText] = useState("")
-  const [saving, setSaving] = useState(false)
-  const [macosEnabled, setMacosEnabled] = useState(false)
-  const [editingShare, setEditingShare] = useState<any | null>(null)
-
-  useEffect(() => {
-    const token = localStorage.getItem("access_token")
-    if (!token) {
-      router.push("/login")
-      return
-    }
-    loadShares()
-  }, [router])
-
-  const loadShares = async () => {
-    try {
-      setLoading(true)
-      setError(null)
-
-      const [samba, nfs, config] = await Promise.all([
-        api.getSambaShares().catch(() => []),
-        api.getNfsShares().catch(() => []),
-        api.getSambaConfig().catch(() => ({ parameters: [] })),
-      ])
-
-      setSambaShares(samba)
-      setNfsShares(nfs)
-      const params: { key: string; value: string }[] = config.parameters || []
-      setSambaConfig(params)
-      const raw = params.map((p) => `${p.key} = ${p.value}`).join("\n")
-      setRawConfigText(raw)
-      const hasMacOS = ["fruit:encoding", "fruit:metadata", "fruit:zero_file_id", "fruit:nfs_aces"].every(
-        (k) => params.some((p) => p.key === k)
-      )
-      setMacosEnabled(hasMacOS)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load shares")
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleDeleteSamba = async (name: string) => {
-    try {
-      setDeleting(true)
-      await api.deleteSambaShare(name)
-      setSambaShares(sambaShares.filter((s) => s.name !== name))
-      setDeleteConfirm(null)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to delete share")
-    } finally {
-      setDeleting(false)
-    }
-  }
-
-  const handleDeleteNfs = async (path: string) => {
-    try {
-      setDeleting(true)
-      await api.deleteNfsShare(path)
-      setNfsShares(nfsShares.filter((s) => s.path !== path))
-      setDeleteConfirm(null)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to delete share")
-    } finally {
-      setDeleting(false)
-    }
-  }
-
-  const handleSambaCreated = (newShare: any) => {
-    setSambaShares([...sambaShares, newShare])
-    setShowSambaDialog(false)
-  }
-
-  const handleSaveShare = async () => {
-    if (!editingShare) return
-    try {
-      setSaving(true)
-      await api.updateSambaShare(editingShare.oldName, {
-        name: editingShare.name,
-        path: editingShare.path,
-        comment: editingShare.comment
-      })
-      setSambaShares(sambaShares.map(s =>
-        s.name === editingShare.oldName
-          ? { name: editingShare.name, path: editingShare.path, comment: editingShare.comment, ...s }
-          : s
-      ))
-      setEditingShare(null)
-      setError(null)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to save share")
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const handleNfsCreated = (newShare: any) => {
-    setNfsShares([...nfsShares, newShare])
-    setShowNfsDialog(false)
-  }
-
-  const MACOS_PARAMS: { [key: string]: string } = {
-    "fruit:encoding": "native",
-    "fruit:metadata": "stream",
-    "fruit:zero_file_id": "yes",
-    "fruit:nfs_aces": "no",
-  }
-
-  const MACOS_KEYS = Object.keys(MACOS_PARAMS)
-
-  const handleSaveRaw = async () => {
-    try {
-      setSaving(true)
-      const parsed: { [key: string]: string } = {}
-      rawConfigText.split("\n").forEach((line) => {
-        const eq = line.indexOf("=")
-        if (eq === -1) return
-        const key = line.slice(0, eq).trim()
-        const value = line.slice(eq + 1).trim()
-        if (key) parsed[key] = value
-      })
-      await api.setSambaConfig(parsed)
-      await loadShares()
-      setEditMode(false)
-      setError(null)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to save configuration")
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const handleToggleMacOS = async (enable: boolean) => {
-    try {
-      setSaving(true)
-      const current = sambaConfig.reduce((acc, p) => { acc[p.key] = p.value; return acc }, {} as { [key: string]: string })
-      if (enable) {
-        await api.setSambaConfig({ ...current, ...MACOS_PARAMS } as { [key: string]: string })
-      } else {
-        const filtered: { [key: string]: string } = {}
-        Object.entries(current).forEach(([k, v]) => { if (!MACOS_KEYS.includes(k)) filtered[k] = v as string })
-        await api.setSambaConfig(filtered)
-      }
-      setMacosEnabled(enable)
-      await loadShares()
-      setError(null)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to update macOS settings")
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-3xl font-bold">File Sharing</h1>
-            <p className="text-muted-foreground mt-1">Manage Samba (SMB) and NFS network shares</p>
-          </div>
-          <Button onClick={loadShares} disabled={loading}>
-            <RefreshCw className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`} />
-            Refresh
-          </Button>
-        </div>
-
-        {error && (
-          <Card className="mb-6 border-red-200 bg-red-50">
-            <CardContent className="flex items-center gap-3 pt-6">
-              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
-              <div>
-                <p className="font-medium text-red-900">Error</p>
-                <p className="text-sm text-red-800">{error}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Tabs */}
-        <div className="border-b border-border mb-6">
-          <div className="flex gap-4">
-            <button
-              onClick={() => setActiveTab("samba")}
-              className={`px-4 py-2 font-medium transition-colors ${
-                activeTab === "samba"
-                  ? "border-b-2 border-primary text-primary"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              SMB/Samba
-            </button>
-            <button
-              onClick={() => setActiveTab("nfs")}
-              className={`px-4 py-2 font-medium transition-colors ${
-                activeTab === "nfs"
-                  ? "border-b-2 border-primary text-primary"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              NFS
-            </button>
-            <button
-              onClick={() => setActiveTab("config")}
-              className={`px-4 py-2 font-medium transition-colors ${
-                activeTab === "config"
-                  ? "border-b-2 border-primary text-primary"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              Samba Config
-            </button>
-          </div>
-        </div>
-
-        {/* SAMBA TAB */}
-        {activeTab === "samba" && (
-          <Card>
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <CardTitle>Samba Shares</CardTitle>
-                <Button size="sm" onClick={() => setShowSambaDialog(true)}>
-                  <Plus className="w-4 h-4 mr-2" />
-                  New Share
-                </Button>
-              </div>
-            </CardHeader>
-            <CardContent>
-              {sambaShares.length === 0 ? (
-                <p className="text-muted-foreground text-center py-12">
-                  No Samba shares configured. Create one to get started.
-                </p>
-              ) : (
-                <div className="overflow-x-auto">
-                  <table className="w-full text-sm">
-                    <thead className="border-b border-border bg-muted/30">
-                      <tr>
-                        <th className="text-left py-3 px-4 font-medium">Name</th>
-                        <th className="text-left py-3 px-4 font-medium">Path</th>
-                        <th className="text-left py-3 px-4 font-medium">Users</th>
-                        <th className="text-left py-3 px-4 font-medium">Perms</th>
-                        <th className="text-left py-3 px-4 font-medium">Comment</th>
-                        <th className="text-right py-3 px-4 font-medium">Actions</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {sambaShares.map((share) => {
-                        const isEditing = editingShare?.oldName === share.name
-                        return (
-                          <tr key={share.name} className="border-b border-border/50 hover:bg-muted/30">
-                            <td className="py-3 px-4 text-xs">
-                              {isEditing ? (
-                                <input
-                                  type="text"
-                                  value={editingShare.name}
-                                  onChange={(e) => setEditingShare({ ...editingShare, name: e.target.value })}
-                                  className="px-2 py-1 rounded border border-border bg-background text-xs font-mono w-full"
-                                  disabled={saving}
-                                />
-                              ) : (
-                                <span className="font-mono">{share.name}</span>
-                              )}
-                            </td>
-                            <td className="py-3 px-4 text-xs">
-                              {isEditing ? (
-                                <input
-                                  type="text"
-                                  value={editingShare.path}
-                                  onChange={(e) => setEditingShare({ ...editingShare, path: e.target.value })}
-                                  className="px-2 py-1 rounded border border-border bg-background text-xs font-mono w-full"
-                                  disabled={saving}
-                                />
-                              ) : (
-                                <span className="font-mono">{share.path}</span>
-                              )}
-                            </td>
-                            <td className="py-3 px-4 text-xs">{share.valid_users || "—"}</td>
-                            <td className="py-3 px-4 text-xs">
-                              <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
-                                {share.read_only ? "RO" : "RW"}
-                              </span>
-                            </td>
-                            <td className="py-3 px-4 text-xs">
-                              {isEditing ? (
-                                <input
-                                  type="text"
-                                  value={editingShare.comment || ""}
-                                  onChange={(e) => setEditingShare({ ...editingShare, comment: e.target.value })}
-                                  className="px-2 py-1 rounded border border-border bg-background text-xs w-full"
-                                  disabled={saving}
-                                  placeholder="Optional comment"
-                                />
-                              ) : (
-                                share.comment || "—"
-                              )}
-                            </td>
-                            <td className="py-3 px-4 text-right space-x-2">
-                              {isEditing ? (
-                                <>
-                                  <button
-                                    onClick={handleSaveShare}
-                                    className="text-green-600 hover:text-green-700 transition-colors text-xs font-medium"
-                                    disabled={saving}
-                                    title="Save"
-                                  >
-                                    Save
-                                  </button>
-                                  <button
-                                    onClick={() => setEditingShare(null)}
-                                    className="text-gray-600 hover:text-gray-700 transition-colors text-xs font-medium"
-                                    disabled={saving}
-                                    title="Cancel"
-                                  >
-                                    Cancel
-                                  </button>
-                                </>
-                              ) : (
-                                <>
-                                  <button
-                                    onClick={() => setEditingShare({ ...share, oldName: share.name })}
-                                    className="text-blue-600 hover:text-blue-700 transition-colors"
-                                    title="Edit"
-                                  >
-                                    Edit
-                                  </button>
-                                  <button
-                                    onClick={() => setDeleteConfirm({ type: "samba", name: share.name })}
-                                    className="text-red-600 hover:text-red-700 transition-colors"
-                                    title="Delete"
-                                  >
-                                    <Trash2 className="w-4 h-4 inline" />
-                                  </button>
-                                </>
-                              )}
-                            </td>
-                          </tr>
-                        )
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        )}
-
-        {/* NFS TAB */}
-        {activeTab === "nfs" && (
-          <Card>
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <CardTitle>NFS Shares</CardTitle>
-                <Button size="sm" onClick={() => setShowNfsDialog(true)}>
-                  <Plus className="w-4 h-4 mr-2" />
-                  New Share
-                </Button>
-              </div>
-            </CardHeader>
-            <CardContent>
-              {nfsShares.length === 0 ? (
-                <p className="text-muted-foreground text-center py-12">
-                  No NFS shares configured. Create one to get started.
-                </p>
-              ) : (
-                <div className="overflow-x-auto">
-                  <table className="w-full text-sm">
-                    <thead className="border-b border-border bg-muted/30">
-                      <tr>
-                        <th className="text-left py-3 px-4 font-medium">Path</th>
-                        <th className="text-left py-3 px-4 font-medium">Clients</th>
-                        <th className="text-left py-3 px-4 font-medium">Options</th>
-                        <th className="text-right py-3 px-4 font-medium">Actions</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {nfsShares.map((share) => (
-                        <tr key={share.path} className="border-b border-border/50 hover:bg-muted/30">
-                          <td className="py-3 px-4 font-mono text-xs">{share.path}</td>
-                          <td className="py-3 px-4 text-xs">{share.clients}</td>
-                          <td className="py-3 px-4 text-xs font-mono text-xs">{share.options || "—"}</td>
-                          <td className="py-3 px-4 text-right space-x-2">
-                            <button
-                              onClick={() => setDeleteConfirm({ type: "nfs", name: share.path })}
-                              className="text-red-600 hover:text-red-700 transition-colors"
-                              title="Delete"
-                            >
-                              <Trash2 className="w-4 h-4 inline" />
-                            </button>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        )}
-
-        {/* SAMBA CONFIG TAB */}
-        {activeTab === "config" && (
-          <div className="space-y-4">
-            {/* MacOS Toggle */}
-            <Card>
-              <CardContent className="py-5">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="font-medium">Global MacOS Shares</p>
-                    <p className="text-sm text-muted-foreground mt-0.5">Optimize all shares for MacOS</p>
-                    {macosEnabled && (
-                      <div className="mt-2 flex flex-wrap gap-2">
-                        {Object.entries(MACOS_PARAMS).map(([k, v]) => (
-                          <span key={k} className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
-                            {k} = {v}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                  <button
-                    role="switch"
-                    aria-checked={macosEnabled}
-                    disabled={saving}
-                    onClick={() => handleToggleMacOS(!macosEnabled)}
-                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${macosEnabled ? "bg-red-500" : "bg-muted-foreground/30"} disabled:opacity-50`}
-                  >
-                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${macosEnabled ? "translate-x-6" : "translate-x-1"}`} />
-                  </button>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Advanced raw config */}
-            <Card>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <CardTitle>Advanced</CardTitle>
-                  {!editMode ? (
-                    <Button size="sm" onClick={() => setEditMode(true)} variant="outline">
-                      Edit
-                    </Button>
-                  ) : (
-                    <div className="flex gap-2">
-                      <Button size="sm" onClick={handleSaveRaw} disabled={saving}>
-                        {saving ? "Saving..." : "Apply"}
-                      </Button>
-                      <Button size="sm" onClick={() => setEditMode(false)} variant="outline" disabled={saving}>
-                        Cancel
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              </CardHeader>
-              <CardContent>
-                <textarea
-                  readOnly={!editMode}
-                  value={rawConfigText}
-                  onChange={(e) => setRawConfigText(e.target.value)}
-                  rows={20}
-                  spellCheck={false}
-                  className={`w-full font-mono text-xs rounded border px-3 py-2 bg-background resize-y focus:outline-none focus:ring-2 focus:ring-ring ${editMode ? "border-border" : "border-transparent text-muted-foreground"}`}
-                />
-              </CardContent>
-            </Card>
-          </div>
-        )}
-      </main>
-
-      {/* Dialogs */}
-      <CreateSambaDialog open={showSambaDialog} onOpenChange={setShowSambaDialog} onCreated={handleSambaCreated} />
-      <CreateNfsDialog open={showNfsDialog} onOpenChange={setShowNfsDialog} onCreated={handleNfsCreated} />
-      <DeleteConfirmDialog
-        open={!!deleteConfirm}
-        onOpenChange={(open) => !open && setDeleteConfirm(null)}
-        type={deleteConfirm?.type === "samba" ? "Samba Share" : "NFS Share"}
-        name={deleteConfirm?.name || ""}
-        onConfirm={() => {
-          if (deleteConfirm?.type === "samba") {
-            handleDeleteSamba(deleteConfirm.name)
-          } else if (deleteConfirm?.type === "nfs") {
-            handleDeleteNfs(deleteConfirm.name)
-          }
-        }}
-        loading={deleting}
-      />
-    </div>
-  )
+  redirect("/datasets")
 }
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
index 0595b4f..c79d715 100644
--- a/frontend/components/Header.tsx
+++ b/frontend/components/Header.tsx
@@ -85,9 +85,9 @@ export function Header() {
               Navigator
             </Link>
             <Link
-              href="/shares"
+              href="/datasets"
               className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                isActive("/shares")
+                isActive("/datasets")
                   ? "bg-accent text-accent-foreground"
                   : "text-muted-foreground hover:text-foreground"
               }`}
@@ -205,9 +205,9 @@ export function Header() {
               Files
             </Link>
             <Link
-              href="/shares"
+              href="/datasets"
               className={`block px-3 py-2 rounded-md text-sm font-medium ${
-                isActive("/shares")
+                isActive("/datasets")
                   ? "bg-accent text-accent-foreground"
                   : "text-muted-foreground hover:text-foreground"
               }`}