diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/search-params.ts b/apps/sim/app/workspace/[workspaceId]/settings/[section]/search-params.ts
index 10d4b15793f..bde90b3f029 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/search-params.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/search-params.ts
@@ -163,6 +163,22 @@ export const customToolIdUrlKeys = {
   clearOnDefault: true,
 } as const
 
+/**
+ * `data-drain-id` deep-links the Data Drains settings tab to a specific drain's
+ * detail sub-view. The "create new" flow stays in local state — only existing
+ * entities are deep-linkable.
+ */
+export const dataDrainIdParam = {
+  key: 'data-drain-id',
+  parser: parseAsString,
+} as const
+
+/** Opening a drain's detail is a destination → push to history; clear on close. */
+export const dataDrainIdUrlKeys = {
+  history: 'push',
+  clearOnDefault: true,
+} as const
+
 /**
  * `fork-direction` is the sync direction (push/pull) on the parent fork's detail
  * page — shareable view state, so a copied link opens the same side of the sync.
diff --git a/apps/sim/ee/data-drains/components/data-drain-create.tsx b/apps/sim/ee/data-drains/components/data-drain-create.tsx
new file mode 100644
index 00000000000..9db2befb798
--- /dev/null
+++ b/apps/sim/ee/data-drains/components/data-drain-create.tsx
@@ -0,0 +1,179 @@
+'use client'
+
+import { useState } from 'react'
+import { ChipInput, ChipSelect, toast } from '@sim/emcn'
+import { ArrowLeft, Database } from '@sim/emcn/icons'
+import { createLogger } from '@sim/logger'
+import { toError } from '@sim/utils/errors'
+import type { CreateDataDrainBody } from '@/lib/api/contracts/data-drains'
+import type { CADENCE_TYPES, SOURCE_TYPES } from '@/lib/data-drains/types'
+import { DESTINATION_TYPES } from '@/lib/data-drains/types'
+import { ResourceTile } from '@/app/workspace/[workspaceId]/components'
+import {
+  CredentialDetailHeading,
+  UnsavedChangesModal,
+} from '@/app/workspace/[workspaceId]/components/credential-detail'
+import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
+import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
+import { useSettingsUnsavedGuard } from '@/app/workspace/[workspaceId]/settings/hooks/use-settings-unsaved-guard'
+import { SettingRow } from '@/ee/components/setting-row'
+import { DESTINATION_FORM_REGISTRY } from '@/ee/data-drains/destinations/registry'
+import { useCreateDataDrain } from '@/ee/data-drains/hooks/data-drains'
+import {
+  CADENCE_OPTIONS,
+  DESTINATION_LABELS,
+  DESTINATION_OPTIONS,
+  SOURCE_OPTIONS,
+} from '@/ee/data-drains/labels'
+
+const logger = createLogger('DataDrainCreate')
+
+interface DataDrainCreateProps {
+  organizationId: string
+  onBack: () => void
+  /** Lands the caller on the drain it just created, matching the skills create flow. */
+  onCreated: (drainId: string) => void
+}
+
+/**
+ * Full-page data drain creation rendered as a settings detail sub-view: a back
+ * chip, a Create action, and the common fields plus the selected destination's
+ * own fields from {@link DESTINATION_FORM_REGISTRY}.
+ */
+export function DataDrainCreate({ organizationId, onBack, onCreated }: DataDrainCreateProps) {
+  const createDrain = useCreateDataDrain()
+
+  const [name, setName] = useState('')
+  const [source, setSource] = useState<(typeof SOURCE_TYPES)[number]>('workflow_logs')
+  const [cadence, setCadence] = useState<(typeof CADENCE_TYPES)[number]>('daily')
+  const [destinationType, setDestinationType] = useState<(typeof DESTINATION_TYPES)[number]>(
+    DESTINATION_TYPES[0]
+  )
+  const [destState, setDestState] = useState<unknown>(
+    () => DESTINATION_FORM_REGISTRY[DESTINATION_TYPES[0]].initialState
+  )
+
+  const spec = DESTINATION_FORM_REGISTRY[destinationType]
+  const canSubmit = name.trim().length > 0 && spec.isComplete(destState)
+
+  const submitError = createDrain.error ? toError(createDrain.error).message : null
+  const isDirty =
+    name.trim().length > 0 ||
+    JSON.stringify(destState) !== JSON.stringify(spec.initialState) ||
+    source !== 'workflow_logs' ||
+    cadence !== 'daily' ||
+    destinationType !== DESTINATION_TYPES[0]
+
+  const guard = useSettingsUnsavedGuard({ isDirty })
+
+  const handleDestinationChange = (next: (typeof DESTINATION_TYPES)[number]) => {
+    setDestinationType(next)
+    setDestState(DESTINATION_FORM_REGISTRY[next].initialState)
+  }
+
+  const handleSubmit = async () => {
+    if (!canSubmit || createDrain.isPending) return
+    const body = {
+      name: name.trim(),
+      source,
+      scheduleCadence: cadence,
+      ...spec.toDestinationBranch(destState),
+    } as CreateDataDrainBody
+    try {
+      const drain = await createDrain.mutateAsync({ organizationId, body })
+      toast.success('Drain created')
+      onCreated(drain.id)
+    } catch (error) {
+      const message = toError(error).message
+      toast.error("Couldn't create drain", { description: message })
+      logger.error('Failed to create data drain', { error: message })
+    }
+  }
+
+  const actions: SettingsAction[] = [
+    {
+      text: createDrain.isPending ? 'Creating...' : 'Create',
+      variant: 'primary',
+      onSelect: handleSubmit,
+      disabled: !canSubmit || createDrain.isPending,
+      tooltip: canSubmit ? undefined : 'Name the drain and complete its destination',
+    },
+  ]
+
+  return (
+    <>
+      <SettingsPanel
+        back={{ text: 'Data drains', icon: ArrowLeft, onSelect: () => guard.guardBack(onBack) }}
+        title='New drain'
+        actions={actions}
+      >
+        <div className='flex flex-col gap-7'>
+          <CredentialDetailHeading
+            leading={<ResourceTile icon={Database} />}
+            title='New drain'
+            subtitle='Export logs, chats, and runs to your own storage or observability stack on a schedule.'
+          />
+
+          <SettingsSection label='Drain'>
+            <div className='flex flex-col gap-4'>
+              <SettingRow label='Name' htmlFor='data-drain-name'>
+                <ChipInput
+                  id='data-drain-name'
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder='Workflow logs export'
+                />
+              </SettingRow>
+              <SettingRow label='Source'>
+                <ChipSelect
+                  aria-label='Source'
+                  value={source}
+                  onChange={(v) => setSource(v as (typeof SOURCE_TYPES)[number])}
+                  options={SOURCE_OPTIONS}
+                  align='start'
+                />
+              </SettingRow>
+              <SettingRow label='Cadence'>
+                <ChipSelect
+                  aria-label='Cadence'
+                  value={cadence}
+                  onChange={(v) => setCadence(v as (typeof CADENCE_TYPES)[number])}
+                  options={CADENCE_OPTIONS}
+                  align='start'
+                />
+              </SettingRow>
+            </div>
+          </SettingsSection>
+
+          <SettingsSection label='Destination'>
+            <div className='flex flex-col gap-4'>
+              <SettingRow label='Type'>
+                <ChipSelect
+                  aria-label='Destination type'
+                  value={destinationType}
+                  onChange={(v) => handleDestinationChange(v as (typeof DESTINATION_TYPES)[number])}
+                  options={DESTINATION_OPTIONS}
+                  displayLabel={DESTINATION_LABELS[destinationType]}
+                  align='start'
+                />
+              </SettingRow>
+              <spec.FormFields state={destState} setState={setDestState} />
+              {submitError && (
+                <p role='alert' className='text-[var(--text-error)] text-caption'>
+                  {submitError}
+                </p>
+              )}
+            </div>
+          </SettingsSection>
+        </div>
+      </SettingsPanel>
+
+      <UnsavedChangesModal
+        open={guard.showUnsavedModal}
+        onOpenChange={guard.setShowUnsavedModal}
+        onDiscard={guard.confirmDiscard}
+      />
+    </>
+  )
+}
diff --git a/apps/sim/ee/data-drains/components/data-drain-detail.tsx b/apps/sim/ee/data-drains/components/data-drain-detail.tsx
new file mode 100644
index 00000000000..5ebbcdbe17b
--- /dev/null
+++ b/apps/sim/ee/data-drains/components/data-drain-detail.tsx
@@ -0,0 +1,262 @@
+'use client'
+
+import { useState } from 'react'
+import { Badge, ChipConfirmModal, Label, Switch, toast } from '@sim/emcn'
+import { ArrowLeft, Database } from '@sim/emcn/icons'
+import { toError } from '@sim/utils/errors'
+import type { DataDrain, DataDrainRun } from '@/lib/api/contracts/data-drains'
+import { formatFileSize } from '@/lib/uploads/utils/file-utils'
+import { ResourceTile } from '@/app/workspace/[workspaceId]/components'
+import { CredentialDetailHeading } from '@/app/workspace/[workspaceId]/components/credential-detail'
+import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
+import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
+import {
+  useDataDrainRuns,
+  useDeleteDataDrain,
+  useRunDataDrainNow,
+  useTestDataDrain,
+  useUpdateDataDrain,
+} from '@/ee/data-drains/hooks/data-drains'
+import { CADENCE_LABELS, DESTINATION_LABELS, SOURCE_LABELS } from '@/ee/data-drains/labels'
+
+const RECENT_RUN_LIMIT = 10
+
+/** Rendered generically so a new destination's config needs no formatter. */
+function formatConfigValue(value: unknown): string {
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No'
+  if (value === null || value === undefined || value === '') return '—'
+  return String(value)
+}
+
+/** `forcePathStyle` → `Force path style`, so a new destination field needs no map. */
+function humanizeConfigKey(key: string): string {
+  const spaced = key.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ')
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+}
+
+interface DetailRowProps {
+  label: string
+  children: React.ReactNode
+}
+
+function DetailRow({ label, children }: DetailRowProps) {
+  return (
+    <div className='flex items-center justify-between gap-3'>
+      <span className='flex-shrink-0 text-[var(--text-muted)] text-small'>{label}</span>
+      <span className='min-w-0 break-words text-right text-[var(--text-body)] text-sm'>
+        {children}
+      </span>
+    </div>
+  )
+}
+
+interface DataDrainDetailProps {
+  organizationId: string
+  drain: DataDrain
+  onBack: () => void
+}
+
+/**
+ * Full-page data drain detail rendered as a settings detail sub-view: a back
+ * chip, the drain's actions (Run now / Test connection / Delete), its resolved
+ * configuration, and recent run history. Only the enabled toggle is editable —
+ * destination credentials are never returned, so changing one means recreating
+ * the drain.
+ */
+export function DataDrainDetail({ organizationId, drain, onBack }: DataDrainDetailProps) {
+  const updateDrain = useUpdateDataDrain()
+  const deleteDrain = useDeleteDataDrain()
+  const runDrain = useRunDataDrainNow()
+  const testDrain = useTestDataDrain()
+  const {
+    data: runs,
+    isPending: runsPending,
+    isPlaceholderData: runsArePlaceholder,
+  } = useDataDrainRuns(organizationId, drain.id, RECENT_RUN_LIMIT)
+  // Defensive: the runs query keeps previous data, which would read as another
+  // drain's history if this view ever renders without a per-drain key.
+  const runsLoading = runsPending || runsArePlaceholder
+
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  const handleToggleEnabled = async () => {
+    try {
+      await updateDrain.mutateAsync({
+        organizationId,
+        drainId: drain.id,
+        body: { enabled: !drain.enabled },
+      })
+      toast.success(drain.enabled ? 'Drain disabled' : 'Drain enabled')
+    } catch (error) {
+      toast.error(toError(error).message)
+    }
+  }
+
+  const handleRunNow = async () => {
+    try {
+      await runDrain.mutateAsync({ organizationId, drainId: drain.id })
+      toast.success('Run queued')
+    } catch (error) {
+      toast.error(toError(error).message)
+    }
+  }
+
+  const handleTest = async () => {
+    try {
+      await testDrain.mutateAsync({ organizationId, drainId: drain.id })
+      toast.success('Connection test passed')
+    } catch (error) {
+      toast.error(toError(error).message)
+    }
+  }
+
+  const handleConfirmDelete = async () => {
+    setShowDeleteConfirm(false)
+    try {
+      await deleteDrain.mutateAsync({ organizationId, drainId: drain.id })
+      onBack()
+      toast.success('Drain deleted')
+    } catch (error) {
+      toast.error(toError(error).message)
+    }
+  }
+
+  const actions: SettingsAction[] = [
+    {
+      text: 'Run now',
+      onSelect: handleRunNow,
+      disabled: !drain.enabled || runDrain.isPending,
+      tooltip: drain.enabled ? undefined : 'Enable the drain to run it',
+    },
+    { text: 'Test connection', onSelect: handleTest, disabled: testDrain.isPending },
+    {
+      text: 'Delete',
+      variant: 'destructive',
+      onSelect: () => setShowDeleteConfirm(true),
+      disabled: deleteDrain.isPending,
+    },
+  ]
+
+  return (
+    <>
+      <SettingsPanel
+        back={{ text: 'Data drains', icon: ArrowLeft, onSelect: onBack }}
+        title={drain.name}
+        actions={actions}
+      >
+        <div className='flex flex-col gap-7'>
+          <CredentialDetailHeading
+            leading={<ResourceTile icon={Database} />}
+            title={drain.name}
+            subtitle={`${SOURCE_LABELS[drain.source]} → ${DESTINATION_LABELS[drain.destinationType]} · ${CADENCE_LABELS[drain.scheduleCadence]}`}
+          />
+
+          <SettingsSection label='Status'>
+            <div className='flex items-center justify-between'>
+              <div className='flex flex-col gap-1'>
+                <Label htmlFor='data-drain-enabled'>Enabled</Label>
+                <p className='text-[var(--text-muted)] text-caption'>
+                  Disabled drains keep their cursor and resume where they left off.
+                </p>
+              </div>
+              <Switch
+                id='data-drain-enabled'
+                checked={drain.enabled}
+                onCheckedChange={handleToggleEnabled}
+                disabled={updateDrain.isPending}
+              />
+            </div>
+          </SettingsSection>
+
+          <SettingsSection label='Schedule'>
+            <div className='flex flex-col gap-3'>
+              <DetailRow label='Source'>{SOURCE_LABELS[drain.source]}</DetailRow>
+              <DetailRow label='Cadence'>{CADENCE_LABELS[drain.scheduleCadence]}</DetailRow>
+              <DetailRow label='Last run'>
+                <span suppressHydrationWarning>
+                  {drain.lastRunAt ? new Date(drain.lastRunAt).toLocaleString() : 'Never'}
+                </span>
+              </DetailRow>
+              <DetailRow label='Last success'>
+                <span suppressHydrationWarning>
+                  {drain.lastSuccessAt ? new Date(drain.lastSuccessAt).toLocaleString() : 'Never'}
+                </span>
+              </DetailRow>
+            </div>
+          </SettingsSection>
+
+          <SettingsSection label='Destination'>
+            <div className='flex flex-col gap-3'>
+              <DetailRow label='Type'>{DESTINATION_LABELS[drain.destinationType]}</DetailRow>
+              {Object.entries(drain.destinationConfig).map(([key, value]) => (
+                <DetailRow key={key} label={humanizeConfigKey(key)}>
+                  {formatConfigValue(value)}
+                </DetailRow>
+              ))}
+            </div>
+          </SettingsSection>
+
+          <SettingsSection label='Recent runs'>
+            {runsLoading ? (
+              <SettingsEmptyState variant='inline'>Loading runs...</SettingsEmptyState>
+            ) : runs && runs.length > 0 ? (
+              <div className='flex flex-col gap-2'>
+                {runs.map((run) => (
+                  <RunRow key={run.id} run={run} />
+                ))}
+              </div>
+            ) : (
+              <SettingsEmptyState variant='inline'>No runs yet</SettingsEmptyState>
+            )}
+          </SettingsSection>
+        </div>
+      </SettingsPanel>
+
+      <ChipConfirmModal
+        open={showDeleteConfirm}
+        onOpenChange={setShowDeleteConfirm}
+        srTitle='Delete drain'
+        title='Delete drain'
+        text={[
+          'Are you sure you want to delete ',
+          { text: drain.name, bold: true },
+          '? This action cannot be undone.',
+        ]}
+        confirm={{ label: 'Delete', onClick: handleConfirmDelete }}
+      />
+    </>
+  )
+}
+
+const RUN_STATUS_VARIANT = {
+  success: 'green',
+  failed: 'red',
+  running: 'blue',
+} as const
+
+function RunRow({ run }: { run: DataDrainRun }) {
+  return (
+    <div className='flex items-start justify-between gap-4 rounded-lg border border-[var(--border-1)] px-3 py-2 text-caption'>
+      <div className='flex min-w-0 flex-col gap-0.5'>
+        <div className='flex items-center gap-2'>
+          <Badge variant={RUN_STATUS_VARIANT[run.status]} size='sm' dot>
+            {run.status}
+          </Badge>
+          <span className='text-[var(--text-muted)]'>{run.trigger}</span>
+          <span className='text-[var(--text-muted)]' suppressHydrationWarning>
+            {new Date(run.startedAt).toLocaleString()}
+          </span>
+        </div>
+        {run.error && <div className='break-words text-[var(--text-error)]'>{run.error}</div>}
+      </div>
+      <div className='flex-shrink-0 text-right text-[var(--text-muted)]'>
+        <div className='tabular-nums'>{run.rowsExported.toLocaleString()} rows</div>
+        <div className='tabular-nums'>
+          {formatFileSize(run.bytesWritten, { includeBytes: true })}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/ee/data-drains/components/data-drains-settings.tsx b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
index d83b67a929e..659c758ffb3 100644
--- a/apps/sim/ee/data-drains/components/data-drains-settings.tsx
+++ b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
@@ -1,93 +1,45 @@
 'use client'
 
 import { useState } from 'react'
+import { ChipTag } from '@sim/emcn'
+import { ArrowRight, Database, Plus } from '@sim/emcn/icons'
+import { getErrorMessage } from '@sim/utils/errors'
+import { useQueryState } from 'nuqs'
 import {
-  Badge,
-  ChipConfirmModal,
-  ChipModal,
-  ChipModalBody,
-  ChipModalError,
-  ChipModalField,
-  ChipModalFooter,
-  ChipModalHeader,
-  ChipSelect,
-  cn,
-  Switch,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  toast,
-} from '@sim/emcn'
-import { createLogger } from '@sim/logger'
-import { toError } from '@sim/utils/errors'
-import { ChevronDown, Plus } from 'lucide-react'
-import type { CreateDataDrainBody, DataDrain, DataDrainRun } from '@/lib/api/contracts/data-drains'
-import { CADENCE_TYPES, DESTINATION_TYPES, SOURCE_TYPES } from '@/lib/data-drains/types'
-import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
+  dataDrainIdParam,
+  dataDrainIdUrlKeys,
+} from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
-import { DESTINATION_FORM_REGISTRY } from '@/ee/data-drains/destinations/registry'
-import {
-  useCreateDataDrain,
-  useDataDrainRuns,
-  useDataDrains,
-  useDeleteDataDrain,
-  useRunDataDrainNow,
-  useTestDataDrain,
-  useUpdateDataDrain,
-} from '@/ee/data-drains/hooks/data-drains'
-
-const logger = createLogger('DataDrainsSettings')
-
-const SOURCE_LABELS: Record<(typeof SOURCE_TYPES)[number], string> = {
-  workflow_logs: 'Workflow logs',
-  job_logs: 'Job logs',
-  audit_logs: 'Audit logs',
-  copilot_chats: 'Chats',
-  copilot_runs: 'Chat runs',
-}
-
-const DESTINATION_LABELS: Record<(typeof DESTINATION_TYPES)[number], string> = {
-  s3: 'Amazon S3',
-  gcs: 'Google Cloud Storage',
-  azure_blob: 'Azure Blob Storage',
-  datadog: 'Datadog',
-  bigquery: 'Google BigQuery',
-  snowflake: 'Snowflake',
-  webhook: 'HTTPS webhook',
-}
-
-const CADENCE_LABELS: Record<(typeof CADENCE_TYPES)[number], string> = {
-  hourly: 'Every hour',
-  daily: 'Every day',
-}
-
-const SOURCE_OPTIONS = SOURCE_TYPES.map((t) => ({ value: t, label: SOURCE_LABELS[t] }))
-const CADENCE_OPTIONS = CADENCE_TYPES.map((t) => ({ value: t, label: CADENCE_LABELS[t] }))
-
-const DESTINATION_OPTIONS = DESTINATION_TYPES.map((t) => ({
-  value: t,
-  label: DESTINATION_LABELS[t],
-}))
+import { DataDrainCreate } from '@/ee/data-drains/components/data-drain-create'
+import { DataDrainDetail } from '@/ee/data-drains/components/data-drain-detail'
+import { useDataDrains } from '@/ee/data-drains/hooks/data-drains'
+import { CADENCE_LABELS, DESTINATION_LABELS, SOURCE_LABELS } from '@/ee/data-drains/labels'
 
 interface DataDrainsSettingsProps {
   organizationId: string
 }
 
 export function DataDrainsSettings({ organizationId }: DataDrainsSettingsProps) {
-  const {
-    data: drains,
-    isLoading: drainsLoading,
-    error: drainsError,
-  } = useDataDrains(organizationId)
+  const { data: drains, isPending, error } = useDataDrains(organizationId)
 
-  const [createOpen, setCreateOpen] = useState(false)
-  const [expandedDrainId, setExpandedDrainId] = useState<string | null>(null)
   const [searchTerm, setSearchTerm] = useSettingsSearch()
+  const [selectedDrainId, setSelectedDrainId] = useQueryState(dataDrainIdParam.key, {
+    ...dataDrainIdParam.parser,
+    ...dataDrainIdUrlKeys,
+  })
+  /** The create flow has no entity id and is not deep-linkable — stays local. */
+  const [isCreating, setIsCreating] = useState(false)
+
+  const selectedDrain = selectedDrainId ? drains?.find((d) => d.id === selectedDrainId) : undefined
+
+  const closeDetail = () => {
+    setIsCreating(false)
+    void setSelectedDrainId(null, { history: 'replace' })
+  }
 
   const query = searchTerm.trim().toLowerCase()
   const filteredDrains = !query
@@ -101,360 +53,104 @@ export function DataDrainsSettings({ organizationId }: DataDrainsSettingsProps)
         ].some((value) => value.toLowerCase().includes(query))
       )
 
-  if (drainsLoading) return null
-
-  return (
-    <>
-      <SettingsPanel
-        actions={[
-          {
-            text: 'New drain',
-            icon: Plus,
-            variant: 'primary',
-            onSelect: () => setCreateOpen(true),
-          },
-        ]}
-        search={{
-          value: searchTerm,
-          onChange: setSearchTerm,
-          placeholder: 'Search data drains...',
+  const actions: SettingsAction[] = [
+    {
+      text: 'Create drain',
+      icon: Plus,
+      variant: 'primary',
+      onSelect: () => setIsCreating(true),
+      disabled: isPending,
+    },
+  ]
+
+  /**
+   * Hold the first paint while a deep-linked id could still resolve, so a valid
+   * link never flashes the list before jumping to it. A dead id still falls back
+   * to the list.
+   */
+  if (selectedDrainId !== null && isPending) return null
+
+  if (isCreating) {
+    return (
+      <DataDrainCreate
+        organizationId={organizationId}
+        onBack={() => setIsCreating(false)}
+        onCreated={(drainId) => {
+          setIsCreating(false)
+          void setSelectedDrainId(drainId)
         }}
-      >
-        <div className='flex flex-col gap-4.5'>
-          <div>
-            {drainsError ? (
-              <div className='flex h-full flex-col items-center justify-center gap-2'>
-                <p className='text-[var(--text-error)] text-sm leading-tight'>
-                  Failed to load data drains: {toError(drainsError).message}
-                </p>
-              </div>
-            ) : drains && drains.length > 0 ? (
-              filteredDrains.length > 0 ? (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Name</TableHead>
-                      <TableHead>Source</TableHead>
-                      <TableHead>Destination</TableHead>
-                      <TableHead>Cadence</TableHead>
-                      <TableHead>Last run</TableHead>
-                      <TableHead>Enabled</TableHead>
-                      <TableHead className='w-[40px]' />
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {filteredDrains.map((drain) => (
-                      <DrainRow
-                        key={drain.id}
-                        drain={drain}
-                        organizationId={organizationId}
-                        expanded={expandedDrainId === drain.id}
-                        onToggleExpand={() =>
-                          setExpandedDrainId(expandedDrainId === drain.id ? null : drain.id)
-                        }
-                      />
-                    ))}
-                  </TableBody>
-                </Table>
-              ) : (
-                <SettingsEmptyState variant='inline'>
-                  No results for "{searchTerm.trim()}"
-                </SettingsEmptyState>
-              )
-            ) : (
-              <SettingsEmptyState>Click "New drain" above to get started</SettingsEmptyState>
-            )}
-          </div>
-        </div>
-      </SettingsPanel>
-
-      {createOpen && (
-        <CreateDrainModal organizationId={organizationId} onClose={() => setCreateOpen(false)} />
-      )}
-    </>
-  )
-}
-
-interface DrainRowProps {
-  drain: DataDrain
-  organizationId: string
-  expanded: boolean
-  onToggleExpand: () => void
-}
-
-function DrainRow({ drain, organizationId, expanded, onToggleExpand }: DrainRowProps) {
-  const updateMutation = useUpdateDataDrain()
-  const deleteMutation = useDeleteDataDrain()
-  const runMutation = useRunDataDrainNow()
-  const testMutation = useTestDataDrain()
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-
-  async function handleToggleEnabled() {
-    try {
-      await updateMutation.mutateAsync({
-        organizationId,
-        drainId: drain.id,
-        body: { enabled: !drain.enabled },
-      })
-      toast.success(drain.enabled ? 'Drain disabled' : 'Drain enabled')
-    } catch (error) {
-      toast.error(toError(error).message)
-    }
-  }
-
-  async function handleRunNow() {
-    try {
-      await runMutation.mutateAsync({ organizationId, drainId: drain.id })
-      toast.success('Drain run enqueued')
-    } catch (error) {
-      toast.error(toError(error).message)
-    }
-  }
-
-  async function handleTest() {
-    try {
-      await testMutation.mutateAsync({ organizationId, drainId: drain.id })
-      toast.success('Connection test succeeded')
-    } catch (error) {
-      toast.error(toError(error).message)
-    }
-  }
-
-  function handleDelete() {
-    setShowDeleteConfirm(true)
-  }
-
-  async function handleConfirmDelete() {
-    try {
-      setShowDeleteConfirm(false)
-      await deleteMutation.mutateAsync({ organizationId, drainId: drain.id })
-      toast.success('Drain deleted')
-    } catch (error) {
-      toast.error(toError(error).message)
-    }
+      />
+    )
   }
 
-  return (
-    <>
-      <TableRow className='cursor-pointer' onClick={onToggleExpand}>
-        <TableCell className='font-medium'>
-          <div className='flex items-center gap-1.5'>
-            <ChevronDown
-              className={cn(
-                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
-                expanded && 'rotate-180'
-              )}
-            />
-            <span>{drain.name}</span>
-          </div>
-        </TableCell>
-        <TableCell>
-          <Badge>{SOURCE_LABELS[drain.source]}</Badge>
-        </TableCell>
-        <TableCell>
-          <Badge>{DESTINATION_LABELS[drain.destinationType]}</Badge>
-        </TableCell>
-        <TableCell>{CADENCE_LABELS[drain.scheduleCadence]}</TableCell>
-        <TableCell className='text-[var(--text-muted)] text-small' suppressHydrationWarning>
-          {drain.lastRunAt ? new Date(drain.lastRunAt).toLocaleString() : 'Never'}
-        </TableCell>
-        <TableCell onClick={(e) => e.stopPropagation()}>
-          <Switch
-            checked={drain.enabled}
-            onCheckedChange={handleToggleEnabled}
-            disabled={updateMutation.isPending}
-          />
-        </TableCell>
-        <TableCell onClick={(e) => e.stopPropagation()}>
-          <RowActionsMenu
-            label='Drain actions'
-            actions={[
-              { label: 'Run now', onSelect: handleRunNow, disabled: !drain.enabled },
-              { label: 'Test connection', onSelect: handleTest },
-              { label: 'Delete', onSelect: handleDelete, destructive: true },
-            ]}
-          />
-        </TableCell>
-      </TableRow>
-      {expanded && (
-        <TableRow>
-          <TableCell colSpan={7} className='bg-[var(--surface-muted)] p-4'>
-            <DrainRunsPanel organizationId={organizationId} drainId={drain.id} />
-          </TableCell>
-        </TableRow>
-      )}
-      <ChipConfirmModal
-        open={showDeleteConfirm}
-        onOpenChange={setShowDeleteConfirm}
-        srTitle='Delete Drain'
-        title='Delete Drain'
-        text={[
-          'Are you sure you want to delete ',
-          { text: drain.name, bold: true },
-          '? This action cannot be undone.',
-        ]}
-        confirm={{
-          label: 'Delete',
-          onClick: handleConfirmDelete,
-          pending: deleteMutation.isPending,
-          pendingLabel: 'Deleting...',
-        }}
+  if (selectedDrain) {
+    return (
+      <DataDrainDetail
+        key={selectedDrain.id}
+        organizationId={organizationId}
+        drain={selectedDrain}
+        onBack={closeDetail}
       />
-    </>
-  )
-}
-
-interface DrainRunsPanelProps {
-  organizationId: string
-  drainId: string
-}
-
-function DrainRunsPanel({ organizationId, drainId }: DrainRunsPanelProps) {
-  const { data: runs, isLoading } = useDataDrainRuns(organizationId, drainId, 10)
-
-  if (isLoading) {
-    return <div className='text-[var(--text-muted)] text-small'>Loading runs...</div>
-  }
-  if (!runs || runs.length === 0) {
-    return <div className='text-[var(--text-muted)] text-small'>No runs yet.</div>
+    )
   }
 
   return (
-    <div className='flex flex-col gap-2'>
-      <div className='font-medium text-[var(--text-primary)] text-small'>Recent runs</div>
-      {runs.map((run) => (
-        <RunRow key={run.id} run={run} />
-      ))}
-    </div>
-  )
-}
-
-function RunRow({ run }: { run: DataDrainRun }) {
-  const statusColor =
-    run.status === 'success'
-      ? 'text-[var(--text-success)]'
-      : run.status === 'failed'
-        ? 'text-[var(--text-error)]'
-        : 'text-[var(--text-muted)]'
-  return (
-    <div className='flex items-start justify-between gap-4 rounded-lg border border-[var(--border)] px-3 py-2 text-caption'>
-      <div className='flex flex-col gap-0.5'>
-        <div className='flex items-center gap-2'>
-          <span className={cn('font-medium', statusColor)}>{run.status}</span>
-          <span className='text-[var(--text-muted)]'>{run.trigger}</span>
-          <span className='text-[var(--text-muted)]' suppressHydrationWarning>
-            {new Date(run.startedAt).toLocaleString()}
-          </span>
+    <SettingsPanel
+      actions={actions}
+      search={{
+        value: searchTerm,
+        onChange: setSearchTerm,
+        placeholder: 'Search data drains...',
+        disabled: isPending,
+      }}
+    >
+      {error ? (
+        <div className='flex h-full flex-col items-center justify-center gap-2'>
+          <p className='text-[var(--text-error)] text-sm leading-tight'>
+            {getErrorMessage(error, "Couldn't load data drains")}
+          </p>
         </div>
-        {run.error && <div className='text-[var(--text-error)]'>{run.error}</div>}
-      </div>
-      <div className='text-right text-[var(--text-muted)]'>
-        <div>{run.rowsExported.toLocaleString()} rows</div>
-        <div>{(run.bytesWritten / 1024).toFixed(1)} KB</div>
-      </div>
-    </div>
-  )
-}
-
-interface CreateDrainModalProps {
-  organizationId: string
-  onClose: () => void
-}
-
-function CreateDrainModal({ organizationId, onClose }: CreateDrainModalProps) {
-  const createMutation = useCreateDataDrain()
-
-  const [name, setName] = useState('')
-  const [source, setSource] = useState<(typeof SOURCE_TYPES)[number]>('workflow_logs')
-  const [cadence, setCadence] = useState<(typeof CADENCE_TYPES)[number]>('daily')
-  const [destinationType, setDestinationType] = useState<(typeof DESTINATION_TYPES)[number]>(
-    DESTINATION_TYPES[0]
-  )
-  const [destState, setDestState] = useState<unknown>(
-    () => DESTINATION_FORM_REGISTRY[DESTINATION_TYPES[0]].initialState
-  )
-  const [submitError, setSubmitError] = useState<string | null>(null)
-
-  const spec = DESTINATION_FORM_REGISTRY[destinationType]
-  const canSubmit = name.trim().length > 0 && spec.isComplete(destState)
-
-  function handleDestinationChange(next: (typeof DESTINATION_TYPES)[number]) {
-    setDestinationType(next)
-    setDestState(DESTINATION_FORM_REGISTRY[next].initialState)
-  }
-
-  async function handleSubmit() {
-    if (!canSubmit) return
-    setSubmitError(null)
-    try {
-      const body = {
-        name: name.trim(),
-        source,
-        scheduleCadence: cadence,
-        ...spec.toDestinationBranch(destState),
-      } as CreateDataDrainBody
-      await createMutation.mutateAsync({ organizationId, body })
-      toast.success('Drain created')
-      onClose()
-    } catch (error) {
-      const msg = toError(error).message
-      logger.error('Failed to create data drain', { error: msg })
-      setSubmitError(msg)
-    }
-  }
-
-  return (
-    <ChipModal open onOpenChange={(open) => !open && onClose()} srTitle='New data drain' size='md'>
-      <ChipModalHeader onClose={() => onClose()}>New data drain</ChipModalHeader>
-      <ChipModalBody>
-        <ChipModalField
-          type='input'
-          title='Name'
-          value={name}
-          onChange={setName}
-          placeholder='Workflow logs export'
-          required
-        />
-        <ChipModalField type='custom' title='Source'>
-          <ChipSelect
-            value={source}
-            onChange={(v) => setSource(v as (typeof SOURCE_TYPES)[number])}
-            options={SOURCE_OPTIONS}
-            align='start'
-          />
-        </ChipModalField>
-        <ChipModalField type='custom' title='Cadence'>
-          <ChipSelect
-            value={cadence}
-            onChange={(v) => setCadence(v as (typeof CADENCE_TYPES)[number])}
-            options={CADENCE_OPTIONS}
-            align='start'
-          />
-        </ChipModalField>
-        <ChipModalField type='custom' title='Destination'>
-          <ChipSelect
-            value={destinationType}
-            onChange={(v) => handleDestinationChange(v as (typeof DESTINATION_TYPES)[number])}
-            options={DESTINATION_OPTIONS}
-            displayLabel={DESTINATION_LABELS[destinationType]}
-            align='start'
-          />
-        </ChipModalField>
-
-        <section className='flex flex-col gap-4 px-2'>
-          <spec.FormFields state={destState} setState={setDestState} />
-        </section>
-        <ChipModalError>{submitError}</ChipModalError>
-      </ChipModalBody>
-      <ChipModalFooter
-        onCancel={onClose}
-        cancelDisabled={createMutation.isPending}
-        primaryAction={{
-          label: createMutation.isPending ? 'Creating...' : 'Create drain',
-          onClick: handleSubmit,
-          disabled: !canSubmit || createMutation.isPending,
-        }}
-      />
-    </ChipModal>
+      ) : isPending ? null : drains && drains.length > 0 ? (
+        <div className='-mx-2 flex flex-col gap-y-0.5'>
+          {filteredDrains.map((drain) => (
+            <button
+              key={drain.id}
+              type='button'
+              onClick={() => void setSelectedDrainId(drain.id)}
+              className='w-full rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
+            >
+              <SettingsResourceRow
+                icon={<Database className='text-[var(--text-icon)]' />}
+                iconFilled
+                title={drain.name}
+                description={
+                  <>
+                    {`${SOURCE_LABELS[drain.source]} → ${DESTINATION_LABELS[drain.destinationType]} · ${CADENCE_LABELS[drain.scheduleCadence]} · `}
+                    <span suppressHydrationWarning>
+                      {drain.lastRunAt
+                        ? `Last run ${new Date(drain.lastRunAt).toLocaleDateString()}`
+                        : 'Never run'}
+                    </span>
+                  </>
+                }
+                trailing={
+                  <div className='flex flex-shrink-0 items-center gap-2'>
+                    {!drain.enabled && <ChipTag variant='gray'>Disabled</ChipTag>}
+                    <ArrowRight className='size-4 text-[var(--text-icon)]' />
+                  </div>
+                }
+              />
+            </button>
+          ))}
+          {filteredDrains.length === 0 && (
+            <SettingsEmptyState variant='inline'>
+              No drains found matching "{searchTerm}"
+            </SettingsEmptyState>
+          )}
+        </div>
+      ) : (
+        <SettingsEmptyState>Click "Create drain" above to get started</SettingsEmptyState>
+      )}
+    </SettingsPanel>
   )
 }
diff --git a/apps/sim/ee/data-drains/destinations/registry.tsx b/apps/sim/ee/data-drains/destinations/registry.tsx
index b2d70c06f35..fb1371a1552 100644
--- a/apps/sim/ee/data-drains/destinations/registry.tsx
+++ b/apps/sim/ee/data-drains/destinations/registry.tsx
@@ -1,9 +1,10 @@
 'use client'
 
 import type { ComponentType } from 'react'
-import { ChipInput, ChipModalField, ChipSelect, ChipTextarea, SecretInput, Switch } from '@sim/emcn'
+import { ChipInput, ChipSelect, ChipTextarea, SecretInput, Switch } from '@sim/emcn'
 import type { CreateDataDrainBody } from '@/lib/api/contracts/data-drains'
 import type { DestinationType } from '@/lib/data-drains/types'
+import { SettingRow } from '@/ee/components/setting-row'
 
 type DestinationBranch = Pick<
   CreateDataDrainBody,
@@ -44,54 +45,67 @@ const s3FormSpec: DestinationFormSpec<S3State> = {
   },
   FormFields: ({ state, setState }) => (
     <>
-      <ChipModalField type='custom' flush title='Bucket'>
+      <SettingRow label='Bucket' htmlFor='drain-s3-bucket'>
         <ChipInput
+          id='drain-s3-bucket'
           value={state.bucket}
           onChange={(e) => setState({ ...state, bucket: e.target.value })}
           placeholder='my-logs-bucket'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Region'>
+      </SettingRow>
+      <SettingRow label='Region' htmlFor='drain-s3-region'>
         <ChipInput
+          id='drain-s3-region'
           value={state.region}
           onChange={(e) => setState({ ...state, region: e.target.value })}
           placeholder='us-east-1'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Prefix (optional)'>
+      </SettingRow>
+      <SettingRow label='Prefix (optional)' htmlFor='drain-s3-prefix-optional'>
         <ChipInput
+          id='drain-s3-prefix-optional'
           value={state.prefix}
           onChange={(e) => setState({ ...state, prefix: e.target.value })}
           placeholder='exports/sim'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Endpoint (optional, S3-compatible stores)'>
+      </SettingRow>
+      <SettingRow
+        label='Endpoint (optional, S3-compatible stores)'
+        htmlFor='drain-s3-endpoint-optional-s3-compatible-stores'
+      >
         <ChipInput
+          id='drain-s3-endpoint-optional-s3-compatible-stores'
           value={state.endpoint}
           onChange={(e) => setState({ ...state, endpoint: e.target.value })}
           placeholder='https://s3.example.com'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Force path style (MinIO, Ceph)'>
+      </SettingRow>
+      <SettingRow
+        label='Force path style (MinIO, Ceph)'
+        htmlFor='drain-s3-force-path-style-minio-ceph'
+      >
         <Switch
+          id='drain-s3-force-path-style-minio-ceph'
           checked={state.forcePathStyle}
           onCheckedChange={(v) => setState({ ...state, forcePathStyle: v })}
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Access key ID'>
+      </SettingRow>
+      <SettingRow label='Access key ID' htmlFor='drain-s3-access-key-id'>
         <SecretInput
+          id='drain-s3-access-key-id'
           value={state.accessKeyId}
           onChange={(v) => setState({ ...state, accessKeyId: v })}
           placeholder='AKIA...'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Secret access key'>
+      </SettingRow>
+      <SettingRow label='Secret access key' htmlFor='drain-s3-secret-access-key'>
         <SecretInput
+          id='drain-s3-secret-access-key'
           value={state.secretAccessKey}
           onChange={(v) => setState({ ...state, secretAccessKey: v })}
           placeholder='Paste your secret access key'
         />
-      </ChipModalField>
+      </SettingRow>
     </>
   ),
   isComplete: (s) =>
@@ -126,28 +140,31 @@ const gcsFormSpec: DestinationFormSpec<GCSState> = {
   initialState: { bucket: '', prefix: '', serviceAccountJson: '' },
   FormFields: ({ state, setState }) => (
     <>
-      <ChipModalField type='custom' flush title='Bucket'>
+      <SettingRow label='Bucket' htmlFor='drain-gcs-bucket'>
         <ChipInput
+          id='drain-gcs-bucket'
           value={state.bucket}
           onChange={(e) => setState({ ...state, bucket: e.target.value })}
           placeholder='my-logs-bucket'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Prefix (optional)'>
+      </SettingRow>
+      <SettingRow label='Prefix (optional)' htmlFor='drain-gcs-prefix-optional'>
         <ChipInput
+          id='drain-gcs-prefix-optional'
           value={state.prefix}
           onChange={(e) => setState({ ...state, prefix: e.target.value })}
           placeholder='exports/sim'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Service account JSON key'>
+      </SettingRow>
+      <SettingRow label='Service account JSON key' htmlFor='drain-gcs-service-account-json-key'>
         <ChipTextarea
+          id='drain-gcs-service-account-json-key'
           value={state.serviceAccountJson}
           onChange={(e) => setState({ ...state, serviceAccountJson: e.target.value })}
           placeholder='{ "type": "service_account", ... }'
           rows={6}
         />
-      </ChipModalField>
+      </SettingRow>
     </>
   ),
   isComplete: (s) => s.bucket.length >= 3 && s.serviceAccountJson.length > 0,
@@ -177,41 +194,49 @@ const azureBlobFormSpec: DestinationFormSpec<AzureBlobState> = {
   },
   FormFields: ({ state, setState }) => (
     <>
-      <ChipModalField type='custom' flush title='Account name'>
+      <SettingRow label='Account name' htmlFor='drain-azure-blob-account-name'>
         <ChipInput
+          id='drain-azure-blob-account-name'
           value={state.accountName}
           onChange={(e) => setState({ ...state, accountName: e.target.value })}
           placeholder='mystorageaccount'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Container'>
+      </SettingRow>
+      <SettingRow label='Container' htmlFor='drain-azure-blob-container'>
         <ChipInput
+          id='drain-azure-blob-container'
           value={state.containerName}
           onChange={(e) => setState({ ...state, containerName: e.target.value })}
           placeholder='sim-exports'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Prefix (optional)'>
+      </SettingRow>
+      <SettingRow label='Prefix (optional)' htmlFor='drain-azure-blob-prefix-optional'>
         <ChipInput
+          id='drain-azure-blob-prefix-optional'
           value={state.prefix}
           onChange={(e) => setState({ ...state, prefix: e.target.value })}
           placeholder='exports/sim'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Endpoint suffix (optional)'>
+      </SettingRow>
+      <SettingRow
+        label='Endpoint suffix (optional)'
+        htmlFor='drain-azure-blob-endpoint-suffix-optional'
+      >
         <ChipInput
+          id='drain-azure-blob-endpoint-suffix-optional'
           value={state.endpointSuffix}
           onChange={(e) => setState({ ...state, endpointSuffix: e.target.value })}
           placeholder='blob.core.windows.net'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Account key'>
+      </SettingRow>
+      <SettingRow label='Account key' htmlFor='drain-azure-blob-account-key'>
         <SecretInput
+          id='drain-azure-blob-account-key'
           value={state.accountKey}
           onChange={(v) => setState({ ...state, accountKey: v })}
           placeholder='Paste your storage account key'
         />
-      </ChipModalField>
+      </SettingRow>
     </>
   ),
   isComplete: (s) =>
@@ -250,35 +275,42 @@ const datadogFormSpec: DestinationFormSpec<DatadogState> = {
   initialState: { site: 'us1', service: '', tags: '', apiKey: '' },
   FormFields: ({ state, setState }) => (
     <>
-      <ChipModalField type='custom' flush title='Site'>
+      <SettingRow label='Site'>
         <ChipSelect
+          aria-label='Site'
           value={state.site}
           onChange={(v) => setState({ ...state, site: v as DatadogState['site'] })}
           options={DATADOG_SITE_OPTIONS}
           align='start'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Service (optional)'>
+      </SettingRow>
+      <SettingRow label='Service (optional)' htmlFor='drain-datadog-service-optional'>
         <ChipInput
+          id='drain-datadog-service-optional'
           value={state.service}
           onChange={(e) => setState({ ...state, service: e.target.value })}
           placeholder='sim'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Tags (optional, comma-separated)'>
+      </SettingRow>
+      <SettingRow
+        label='Tags (optional, comma-separated)'
+        htmlFor='drain-datadog-tags-optional-comma-separated'
+      >
         <ChipInput
+          id='drain-datadog-tags-optional-comma-separated'
           value={state.tags}
           onChange={(e) => setState({ ...state, tags: e.target.value })}
           placeholder='env:prod,team:platform'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='API key'>
+      </SettingRow>
+      <SettingRow label='API key' htmlFor='drain-datadog-api-key'>
         <SecretInput
+          id='drain-datadog-api-key'
           value={state.apiKey}
           onChange={(v) => setState({ ...state, apiKey: v })}
           placeholder='Paste your Datadog API key'
         />
-      </ChipModalField>
+      </SettingRow>
     </>
   ),
   isComplete: (s) => s.apiKey.length > 0,
@@ -305,35 +337,42 @@ const bigqueryFormSpec: DestinationFormSpec<BigQueryState> = {
   initialState: { projectId: '', datasetId: '', tableId: '', serviceAccountJson: '' },
   FormFields: ({ state, setState }) => (
     <>
-      <ChipModalField type='custom' flush title='Project ID'>
+      <SettingRow label='Project ID' htmlFor='drain-bigquery-project-id'>
         <ChipInput
+          id='drain-bigquery-project-id'
           value={state.projectId}
           onChange={(e) => setState({ ...state, projectId: e.target.value })}
           placeholder='my-gcp-project'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Dataset'>
+      </SettingRow>
+      <SettingRow label='Dataset' htmlFor='drain-bigquery-dataset'>
         <ChipInput
+          id='drain-bigquery-dataset'
           value={state.datasetId}
           onChange={(e) => setState({ ...state, datasetId: e.target.value })}
           placeholder='sim_drains'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Table'>
+      </SettingRow>
+      <SettingRow label='Table' htmlFor='drain-bigquery-table'>
         <ChipInput
+          id='drain-bigquery-table'
           value={state.tableId}
           onChange={(e) => setState({ ...state, tableId: e.target.value })}
           placeholder='workflow_logs'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Service account JSON key'>
+      </SettingRow>
+      <SettingRow
+        label='Service account JSON key'
+        htmlFor='drain-bigquery-service-account-json-key'
+      >
         <ChipTextarea
+          id='drain-bigquery-service-account-json-key'
           value={state.serviceAccountJson}
           onChange={(e) => setState({ ...state, serviceAccountJson: e.target.value })}
           placeholder='{ "type": "service_account", ... }'
           rows={6}
         />
-      </ChipModalField>
+      </SettingRow>
     </>
   ),
   isComplete: (s) =>
@@ -375,70 +414,82 @@ const snowflakeFormSpec: DestinationFormSpec<SnowflakeState> = {
   },
   FormFields: ({ state, setState }) => (
     <>
-      <ChipModalField type='custom' flush title='Account identifier'>
+      <SettingRow label='Account identifier' htmlFor='drain-snowflake-account-identifier'>
         <ChipInput
+          id='drain-snowflake-account-identifier'
           value={state.account}
           onChange={(e) => setState({ ...state, account: e.target.value })}
           placeholder='orgname-accountname'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='User'>
+      </SettingRow>
+      <SettingRow label='User' htmlFor='drain-snowflake-user'>
         <ChipInput
+          id='drain-snowflake-user'
           value={state.user}
           onChange={(e) => setState({ ...state, user: e.target.value })}
           placeholder='SIM_DRAIN_USER'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Warehouse'>
+      </SettingRow>
+      <SettingRow label='Warehouse' htmlFor='drain-snowflake-warehouse'>
         <ChipInput
+          id='drain-snowflake-warehouse'
           value={state.warehouse}
           onChange={(e) => setState({ ...state, warehouse: e.target.value })}
           placeholder='COMPUTE_WH'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Database'>
+      </SettingRow>
+      <SettingRow label='Database' htmlFor='drain-snowflake-database'>
         <ChipInput
+          id='drain-snowflake-database'
           value={state.database}
           onChange={(e) => setState({ ...state, database: e.target.value })}
           placeholder='SIM'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Schema'>
+      </SettingRow>
+      <SettingRow label='Schema' htmlFor='drain-snowflake-schema'>
         <ChipInput
+          id='drain-snowflake-schema'
           value={state.schema}
           onChange={(e) => setState({ ...state, schema: e.target.value })}
           placeholder='PUBLIC'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Table'>
+      </SettingRow>
+      <SettingRow label='Table' htmlFor='drain-snowflake-table'>
         <ChipInput
+          id='drain-snowflake-table'
           value={state.table}
           onChange={(e) => setState({ ...state, table: e.target.value })}
           placeholder='WORKFLOW_LOGS'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Column (optional, defaults to "DATA")'>
+      </SettingRow>
+      <SettingRow
+        label='Column (optional, defaults to "DATA")'
+        htmlFor='drain-snowflake-column-optional-defaults-to-data'
+      >
         <ChipInput
+          id='drain-snowflake-column-optional-defaults-to-data'
           value={state.column}
           onChange={(e) => setState({ ...state, column: e.target.value })}
           placeholder='DATA'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Role (optional)'>
+      </SettingRow>
+      <SettingRow label='Role (optional)' htmlFor='drain-snowflake-role-optional'>
         <ChipInput
+          id='drain-snowflake-role-optional'
           value={state.role}
           onChange={(e) => setState({ ...state, role: e.target.value })}
           placeholder='SIM_DRAIN_ROLE'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Private key (PEM, PKCS8)'>
+      </SettingRow>
+      <SettingRow label='Private key (PEM, PKCS8)' htmlFor='drain-snowflake-private-key-pem-pkcs8'>
         <ChipTextarea
+          id='drain-snowflake-private-key-pem-pkcs8'
           value={state.privateKey}
           onChange={(e) => setState({ ...state, privateKey: e.target.value })}
           placeholder='-----BEGIN PRIVATE KEY-----'
           rows={6}
         />
-      </ChipModalField>
+      </SettingRow>
     </>
   ),
   isComplete: (s) =>
@@ -477,34 +528,41 @@ const webhookFormSpec: DestinationFormSpec<WebhookState> = {
   initialState: { url: '', signatureHeader: '', signingSecret: '', bearerToken: '' },
   FormFields: ({ state, setState }) => (
     <>
-      <ChipModalField type='custom' flush title='URL'>
+      <SettingRow label='URL' htmlFor='drain-webhook-url'>
         <ChipInput
+          id='drain-webhook-url'
           value={state.url}
           onChange={(e) => setState({ ...state, url: e.target.value })}
           placeholder='https://example.com/sim-drain'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Signature header (optional)'>
+      </SettingRow>
+      <SettingRow
+        label='Signature header (optional)'
+        htmlFor='drain-webhook-signature-header-optional'
+      >
         <ChipInput
+          id='drain-webhook-signature-header-optional'
           value={state.signatureHeader}
           onChange={(e) => setState({ ...state, signatureHeader: e.target.value })}
           placeholder='X-Sim-Signature'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Signing secret'>
+      </SettingRow>
+      <SettingRow label='Signing secret' htmlFor='drain-webhook-signing-secret'>
         <SecretInput
+          id='drain-webhook-signing-secret'
           value={state.signingSecret}
           onChange={(v) => setState({ ...state, signingSecret: v })}
           placeholder='At least 32 characters'
         />
-      </ChipModalField>
-      <ChipModalField type='custom' flush title='Bearer token (optional)'>
+      </SettingRow>
+      <SettingRow label='Bearer token (optional)' htmlFor='drain-webhook-bearer-token-optional'>
         <SecretInput
+          id='drain-webhook-bearer-token-optional'
           value={state.bearerToken}
           onChange={(v) => setState({ ...state, bearerToken: v })}
           placeholder='Paste your bearer token'
         />
-      </ChipModalField>
+      </SettingRow>
     </>
   ),
   isComplete: (s) => s.url.length > 0 && s.signingSecret.length >= 32,
diff --git a/apps/sim/ee/data-drains/hooks/data-drains.ts b/apps/sim/ee/data-drains/hooks/data-drains.ts
index 5526a57aaac..8a12af69ca0 100644
--- a/apps/sim/ee/data-drains/hooks/data-drains.ts
+++ b/apps/sim/ee/data-drains/hooks/data-drains.ts
@@ -88,6 +88,12 @@ export function useCreateDataDrain() {
       logger.info('Created data drain', { drainId: drain.id, organizationId })
       return drain
     },
+    // Seed the list so the caller can navigate straight to the new drain's detail
+    // without that handoff depending on the invalidation refetch succeeding.
+    onSuccess: (drain, variables) =>
+      queryClient.setQueryData<DataDrain[]>(dataDrainKeys.list(variables.organizationId), (prev) =>
+        prev?.some((d) => d.id === drain.id) ? prev : [...(prev ?? []), drain]
+      ),
     onSettled: (_drain, _error, variables) =>
       queryClient.invalidateQueries({ queryKey: dataDrainKeys.list(variables.organizationId) }),
   })
diff --git a/apps/sim/ee/data-drains/labels.ts b/apps/sim/ee/data-drains/labels.ts
new file mode 100644
index 00000000000..0ab0c7d4c87
--- /dev/null
+++ b/apps/sim/ee/data-drains/labels.ts
@@ -0,0 +1,31 @@
+import { CADENCE_TYPES, DESTINATION_TYPES, SOURCE_TYPES } from '@/lib/data-drains/types'
+
+export const SOURCE_LABELS: Record<(typeof SOURCE_TYPES)[number], string> = {
+  workflow_logs: 'Workflow logs',
+  job_logs: 'Job logs',
+  audit_logs: 'Audit logs',
+  copilot_chats: 'Chats',
+  copilot_runs: 'Chat runs',
+}
+
+export const DESTINATION_LABELS: Record<(typeof DESTINATION_TYPES)[number], string> = {
+  s3: 'Amazon S3',
+  gcs: 'Google Cloud Storage',
+  azure_blob: 'Azure Blob Storage',
+  datadog: 'Datadog',
+  bigquery: 'Google BigQuery',
+  snowflake: 'Snowflake',
+  webhook: 'HTTPS webhook',
+}
+
+export const CADENCE_LABELS: Record<(typeof CADENCE_TYPES)[number], string> = {
+  hourly: 'Every hour',
+  daily: 'Every day',
+}
+
+export const SOURCE_OPTIONS = SOURCE_TYPES.map((t) => ({ value: t, label: SOURCE_LABELS[t] }))
+export const CADENCE_OPTIONS = CADENCE_TYPES.map((t) => ({ value: t, label: CADENCE_LABELS[t] }))
+export const DESTINATION_OPTIONS = DESTINATION_TYPES.map((t) => ({
+  value: t,
+  label: DESTINATION_LABELS[t],
+}))