diff --git a/src/app/dashboard/[teamSlug]/secrets/error.tsx b/src/app/dashboard/[teamSlug]/secrets/error.tsx
new file mode 100644
index 000000000..6c4b5e338
--- /dev/null
+++ b/src/app/dashboard/[teamSlug]/secrets/error.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function SecretsPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}
diff --git a/src/app/dashboard/[teamSlug]/secrets/page.tsx b/src/app/dashboard/[teamSlug]/secrets/page.tsx
new file mode 100644
index 000000000..0bbe7a959
--- /dev/null
+++ b/src/app/dashboard/[teamSlug]/secrets/page.tsx
@@ -0,0 +1,16 @@
+import { Page } from '@/features/dashboard/layouts/page'
+import { SecretsPageContent } from '@/features/dashboard/settings/secrets/secrets-page-content'
+
+interface SecretsPageProps {
+  params: Promise<{
+    teamSlug: string
+  }>
+}
+
+export default async function SecretsPage(_props: SecretsPageProps) {
+  return (
+    <Page>
+      <SecretsPageContent />
+    </Page>
+  )
+}
diff --git a/src/configs/layout.ts b/src/configs/layout.ts
index 0f29ab80c..ce6231aa9 100644
--- a/src/configs/layout.ts
+++ b/src/configs/layout.ts
@@ -91,6 +91,10 @@ const DASHBOARD_LAYOUT_CONFIGS: Record<
   },
 
   // integrations
+  '/dashboard/*/secrets': () => ({
+    title: 'Secrets',
+    type: 'default',
+  }),
   '/dashboard/*/webhooks': () => ({
     title: 'Webhooks',
     type: 'default',
diff --git a/src/configs/sidebar.ts b/src/configs/sidebar.ts
index 7ca6f3ed0..ca76e3d86 100644
--- a/src/configs/sidebar.ts
+++ b/src/configs/sidebar.ts
@@ -9,6 +9,7 @@ import {
   SettingsIcon,
   TemplateIcon,
   UsageIcon,
+  VaultIcon,
   WebhookIcon,
 } from '@/ui/primitives/icons'
 import { INCLUDE_ARGUS, INCLUDE_BILLING } from './flags'
@@ -43,6 +44,13 @@ export const SIDEBAR_MAIN_LINKS: SidebarNavItem[] = [
   },
 
   // Integrations
+  {
+    label: 'Secrets',
+    group: 'integration',
+    href: (args) => PROTECTED_URLS.SECRETS(args.teamSlug!),
+    icon: VaultIcon,
+    activeMatch: `/dashboard/*/secrets`,
+  },
   ...(INCLUDE_ARGUS
     ? [
         {
diff --git a/src/configs/urls.ts b/src/configs/urls.ts
index 9412b2a97..ff0e68ca6 100644
--- a/src/configs/urls.ts
+++ b/src/configs/urls.ts
@@ -39,6 +39,7 @@ export const PROTECTED_URLS = {
     `/dashboard/${teamSlug}/sandboxes/${sandboxId}/filesystem`,
 
   WEBHOOKS: (teamSlug: string) => `/dashboard/${teamSlug}/webhooks`,
+  SECRETS: (teamSlug: string) => `/dashboard/${teamSlug}/secrets`,
 
   TEMPLATES: (teamSlug: string) => `/dashboard/${teamSlug}/templates/list`,
   TEMPLATES_LIST: (teamSlug: string) => `/dashboard/${teamSlug}/templates/list`,
diff --git a/src/features/dashboard/settings/secrets/components/host-field-array.tsx b/src/features/dashboard/settings/secrets/components/host-field-array.tsx
new file mode 100644
index 000000000..0c37fd8a6
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/components/host-field-array.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'
+import { Button } from '@/ui/primitives/button'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/ui/primitives/form'
+import { IconButton } from '@/ui/primitives/icon-button'
+import { AddIcon, LinkIcon, RemoveIcon, TrashIcon } from '@/ui/primitives/icons'
+import { Input } from '@/ui/primitives/input'
+import { MAX_SECRET_HOSTS } from '../constants'
+import type { SecretFormInput } from '../schema'
+
+export function HostFieldArray({ disabled }: { disabled?: boolean }) {
+  const { control } = useFormContext<SecretFormInput>()
+  const allowListMode = useWatch({ control, name: 'allowList.mode' })
+
+  // Field array is only meaningful when the user picked "specific hosts".
+  // Returning null on "all" keeps RHF from registering a stray field array.
+  if (allowListMode !== 'specific') return null
+
+  return <HostFieldArrayBody disabled={disabled} />
+}
+
+function HostFieldArrayBody({ disabled }: { disabled?: boolean }) {
+  const { control } = useFormContext<SecretFormInput>()
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'allowList.hosts',
+  })
+
+  const atMax = fields.length >= MAX_SECRET_HOSTS
+  const onlyOne = fields.length <= 1
+
+  return (
+    <div className="flex flex-col gap-2">
+      <ul className="flex flex-col gap-2">
+        {fields.map((field, index) => (
+          <li className="flex items-start gap-1.5" key={field.id}>
+            <FormField
+              control={control}
+              name={`allowList.hosts.${index}.value`}
+              render={({ field: hostField }) => (
+                <FormItem className="min-w-0 flex-1">
+                  <FormControl>
+                    <Input
+                      {...hostField}
+                      clearable
+                      onClear={() => {
+                        hostField.onChange('')
+                      }}
+                      autoComplete="off"
+                      className="min-w-0"
+                      disabled={disabled}
+                      placeholder="example.com"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {index > 0 && (
+              <IconButton
+                variant="secondary"
+                aria-label={`Remove host ${index + 1}`}
+                disabled={disabled || onlyOne}
+                onClick={() => remove(index)}
+                type="button"
+              >
+                <TrashIcon aria-hidden className="size-4" />
+              </IconButton>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <Button
+        variant="secondary"
+        className="w-fit"
+        disabled={disabled || atMax}
+        onClick={() => append({ value: '' })}
+        type="button"
+      >
+        <AddIcon aria-hidden className="size-4" />
+        Add more
+      </Button>
+    </div>
+  )
+}
diff --git a/src/features/dashboard/settings/secrets/components/secret-form.tsx b/src/features/dashboard/settings/secrets/components/secret-form.tsx
new file mode 100644
index 000000000..ebe9cd488
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/components/secret-form.tsx
@@ -0,0 +1,231 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import type { ReactNode } from 'react'
+import { useForm, useFormContext, useWatch } from 'react-hook-form'
+import { Button } from '@/ui/primitives/button'
+import { DialogFooter } from '@/ui/primitives/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/ui/primitives/form'
+import { Input } from '@/ui/primitives/input'
+import { Label } from '@/ui/primitives/label'
+import { Loader } from '@/ui/primitives/loader'
+import { RadioGroup, RadioGroupItem } from '@/ui/primitives/radio-group'
+import {
+  type SecretFormInput,
+  type SecretFormOutput,
+  SecretFormSchema,
+} from '../schema'
+import { HostFieldArray } from './host-field-array'
+import { SecretValueField } from './secret-value-field'
+
+const DEFAULT_VALUES: SecretFormInput = {
+  label: '',
+  value: '',
+  description: '',
+  allowList: { mode: 'all', hosts: [] },
+}
+
+// Edit mode never roundtrips the plaintext (the BE owns the only copy), so we
+// satisfy zod's value.min(1) with a placeholder and skip rendering the field.
+// The edit dialog's onSubmit ignores `values.value`.
+const EDIT_VALUE_PLACEHOLDER = '__edit_placeholder__'
+
+interface SecretFormProps {
+  defaultValues?: Partial<SecretFormInput>
+  onSubmit: (values: SecretFormOutput) => void | Promise<void>
+  submitLabel: string
+  submitIcon?: ReactNode
+  loadingLabel?: string
+  mode?: 'create' | 'edit'
+  /** Edit flow only — keeps submit disabled until something actually changed. */
+  requireDirty?: boolean
+}
+
+export function SecretForm({
+  defaultValues,
+  onSubmit,
+  submitLabel,
+  submitIcon,
+  loadingLabel = 'Saving…',
+  mode = 'create',
+  requireDirty = false,
+}: SecretFormProps) {
+  const isEdit = mode === 'edit'
+  const form = useForm<SecretFormInput>({
+    resolver: zodResolver(SecretFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      ...DEFAULT_VALUES,
+      ...defaultValues,
+      ...(isEdit && { value: EDIT_VALUE_PLACEHOLDER }),
+    },
+  })
+
+  const { formState } = form
+  const canSubmit =
+    formState.isValid &&
+    !formState.isSubmitting &&
+    (!requireDirty || formState.isDirty)
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex flex-1 flex-col justify-between gap-6 min-w-0 min-h-0"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <div className="flex flex-1 flex-col gap-4 min-w-0 min-h-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          <LabelField disabled={formState.isSubmitting} />
+          {!isEdit && <SecretValueField disabled={formState.isSubmitting} />}
+          <DescriptionField disabled={formState.isSubmitting} />
+          <AllowListSection disabled={formState.isSubmitting} />
+        </div>
+
+        <DialogFooter>
+          {formState.isSubmitting ? (
+            <div className="flex items-center justify-center py-2 gap-2 w-full">
+              <Loader size="sm" variant="slash" />
+              <span className="prose-body text-fg-secondary">
+                {loadingLabel}
+              </span>
+            </div>
+          ) : (
+            <Button
+              className="w-full"
+              disabled={!canSubmit}
+              type="submit"
+              variant="primary"
+            >
+              {submitIcon}
+              {submitLabel}
+            </Button>
+          )}
+        </DialogFooter>
+      </form>
+    </Form>
+  )
+}
+
+function LabelField({ disabled }: { disabled?: boolean }) {
+  const { control } = useFormContext<SecretFormInput>()
+  return (
+    <FormField
+      control={control}
+      name="label"
+      render={({ field }) => (
+        <FormItem className="min-w-0">
+          <FormLabel>label</FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              autoComplete="off"
+              className="min-w-0"
+              clearable
+              disabled={disabled}
+              onClear={() => field.onChange('')}
+              placeholder="e.g. Service API Key"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  )
+}
+
+function DescriptionField({ disabled }: { disabled?: boolean }) {
+  const { control } = useFormContext<SecretFormInput>()
+  return (
+    <FormField
+      control={control}
+      name="description"
+      render={({ field }) => (
+        <FormItem className="min-w-0">
+          <FormLabel>description (optional)</FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              autoComplete="off"
+              className="min-w-0"
+              clearable
+              disabled={disabled}
+              onClear={() => field.onChange('')}
+              placeholder="e.g. intented use, environment, etc."
+              value={field.value ?? ''}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  )
+}
+
+function AllowListSection({ disabled }: { disabled?: boolean }) {
+  const { control, setValue } = useFormContext<SecretFormInput>()
+  const mode = useWatch({ control, name: 'allowList.mode' })
+
+  const handleModeChange = (next: string) => {
+    if (next === 'all') {
+      setValue(
+        'allowList',
+        { mode: 'all', hosts: [] },
+        { shouldValidate: true, shouldDirty: true }
+      )
+    } else if (next === 'specific') {
+      setValue(
+        'allowList',
+        { mode: 'specific', hosts: [{ value: '' }] },
+        { shouldValidate: true, shouldDirty: true }
+      )
+    }
+  }
+
+  return (
+    <section className="flex flex-col gap-2">
+      <div className="flex flex-col gap-1">
+        <Label>allow list</Label>
+        <p className="text-fg-tertiary prose-body">
+          Define the websites and servers (hosts) that sandboxes may use this
+          secret with
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <RadioGroup
+          className="flex flex-col gap-2 px-0.5"
+          disabled={disabled}
+          onValueChange={handleModeChange}
+          value={mode}
+        >
+          <div className="flex items-center gap-2">
+            <RadioGroupItem id="allow-list-all" value="all" />
+            <Label
+              className="cursor-pointer select-none"
+              htmlFor="allow-list-all"
+            >
+              all hosts
+            </Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioGroupItem id="allow-list-specific" value="specific" />
+            <Label
+              className="cursor-pointer select-none"
+              htmlFor="allow-list-specific"
+            >
+              specific hosts
+            </Label>
+          </div>
+        </RadioGroup>
+
+        <HostFieldArray disabled={disabled} />
+      </div>
+    </section>
+  )
+}
diff --git a/src/features/dashboard/settings/secrets/components/secret-value-field.tsx b/src/features/dashboard/settings/secrets/components/secret-value-field.tsx
new file mode 100644
index 000000000..0b1b1388e
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/components/secret-value-field.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/ui/primitives/form'
+import { EyeIcon, EyeOffIcon } from '@/ui/primitives/icons'
+import { Input } from '@/ui/primitives/input'
+import type { SecretFormInput } from '../schema'
+
+export function SecretValueField({ disabled }: { disabled?: boolean }) {
+  const { control } = useFormContext<SecretFormInput>()
+  const [revealed, setRevealed] = useState(false)
+
+  return (
+    <FormField
+      control={control}
+      name="value"
+      render={({ field }) => (
+        <FormItem className="min-w-0">
+          <FormLabel>secret value</FormLabel>
+          <div className="relative">
+            <FormControl>
+              <Input
+                {...field}
+                autoComplete="off"
+                className="min-w-0 pr-9 font-mono"
+                disabled={disabled}
+                placeholder="••••••••••••"
+                type={revealed ? 'text' : 'password'}
+              />
+            </FormControl>
+            <button
+              aria-label={revealed ? 'Hide secret value' : 'Show secret value'}
+              aria-pressed={revealed}
+              className="text-fg-tertiary hover:text-fg absolute right-2.5 top-1/2 -translate-y-1/2"
+              disabled={disabled}
+              onClick={() => setRevealed((prev) => !prev)}
+              type="button"
+            >
+              {revealed ? (
+                <EyeOffIcon aria-hidden className="size-4" />
+              ) : (
+                <EyeIcon aria-hidden className="size-4" />
+              )}
+            </button>
+          </div>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  )
+}
diff --git a/src/features/dashboard/settings/secrets/constants.ts b/src/features/dashboard/settings/secrets/constants.ts
new file mode 100644
index 000000000..86ba0fda1
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/constants.ts
@@ -0,0 +1,8 @@
+export const MAX_SECRET_HOSTS = 20
+
+export const SECRETS_HELPER_COPY =
+  'Sandboxes can use these secrets without the actual values being exposed to them'
+
+export const SECRETS_SEARCH_PLACEHOLDER_EMPTY =
+  'Add a secret to start searching'
+export const SECRETS_SEARCH_PLACEHOLDER = 'Search by title, ID & allow list'
diff --git a/src/features/dashboard/settings/secrets/delete-secret-dialog.tsx b/src/features/dashboard/settings/secrets/delete-secret-dialog.tsx
new file mode 100644
index 000000000..125fc930a
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/delete-secret-dialog.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { useDashboard } from '@/features/dashboard/context'
+import { defaultSuccessToast, useToast } from '@/lib/hooks/use-toast'
+import { Button } from '@/ui/primitives/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/ui/primitives/dialog'
+import { RemoveIcon, TrashIcon } from '@/ui/primitives/icons'
+import { useSecretsStore } from './store'
+import type { Secret } from './types'
+
+interface DeleteSecretDialogProps {
+  secret: Secret
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export const DeleteSecretDialog = ({
+  secret,
+  open,
+  onOpenChange,
+}: DeleteSecretDialogProps) => {
+  const { team } = useDashboard()
+  const { toast } = useToast()
+  const removeSecret = useSecretsStore((s) => s.removeSecret)
+
+  const label = secret.label.trim() || 'Untitled'
+
+  const handleDelete = () => {
+    removeSecret(team.slug, secret.id)
+    toast(defaultSuccessToast('Secret has been deleted.'))
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        hideClose
+        className="gap-0 px-5 py-4 pr-8 sm:max-w-[530px]"
+      >
+        <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-2">
+          <DialogHeader className="min-w-0 flex-1 gap-2 text-left">
+            <DialogTitle>{`delete '${label}'?`}</DialogTitle>
+            <DialogDescription className="text-fg-secondary font-sans text-sm leading-5">
+              Sandboxes will no longer be able to use this secret.{' '}
+              <span className="text-accent-error-highlight font-medium">
+                This may cause dependent flows to fail.
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex shrink-0 items-center gap-2">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                variant="quaternary"
+                className="font-sans normal-case"
+              >
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button
+              type="button"
+              variant="error"
+              className="gap-1 font-sans normal-case"
+              onClick={handleDelete}
+            >
+              <TrashIcon aria-hidden className="size-4" />
+              Delete
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/features/dashboard/settings/secrets/edit-secret-dialog.tsx b/src/features/dashboard/settings/secrets/edit-secret-dialog.tsx
new file mode 100644
index 000000000..5f54782c6
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/edit-secret-dialog.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { useDashboard } from '@/features/dashboard/context'
+import { defaultSuccessToast, toast } from '@/lib/hooks/use-toast'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/ui/primitives/dialog'
+import { CheckIcon } from '@/ui/primitives/icons'
+import { SecretForm } from './components/secret-form'
+import {
+  flattenHosts,
+  type SecretFormInput,
+  type SecretFormOutput,
+} from './schema'
+import { useSecretsStore } from './store'
+import type { Secret } from './types'
+
+interface EditSecretDialogProps {
+  secret: Secret
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function EditSecretDialog({
+  secret,
+  open,
+  onOpenChange,
+}: EditSecretDialogProps) {
+  const { team } = useDashboard()
+  const updateSecret = useSecretsStore((s) => s.updateSecret)
+
+  const defaultValues: Partial<SecretFormInput> = {
+    label: secret.label,
+    description: secret.description ?? '',
+    allowList:
+      secret.allowList.mode === 'all'
+        ? { mode: 'all', hosts: [] }
+        : {
+            mode: 'specific',
+            hosts: secret.allowList.hosts.map((value) => ({ value })),
+          },
+  }
+
+  // TODO(secrets-be): swap for `trpc.secrets.update.mutateAsync(...)`. The
+  // plaintext value is intentionally never collected on edit (only the BE
+  // ever sees it on create).
+  const handleSubmit = (values: SecretFormOutput) => {
+    updateSecret(team.slug, secret.id, {
+      label: values.label,
+      description: values.description || undefined,
+      allowList:
+        values.allowList.mode === 'all'
+          ? { mode: 'all' }
+          : {
+              mode: 'specific',
+              hosts: flattenHosts(values.allowList.hosts),
+            },
+    })
+    toast(defaultSuccessToast('Secret updated'))
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex flex-col gap-4 px-6 pt-5 pb-6 max-h-[calc(100svh-2rem)] sm:h-[560px] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Edit secret</DialogTitle>
+        </DialogHeader>
+
+        <SecretForm
+          defaultValues={defaultValues}
+          loadingLabel="Saving…"
+          mode="edit"
+          onSubmit={handleSubmit}
+          requireDirty
+          submitIcon={<CheckIcon aria-hidden className="size-4" />}
+          submitLabel="Save changes"
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/features/dashboard/settings/secrets/index.ts b/src/features/dashboard/settings/secrets/index.ts
new file mode 100644
index 000000000..8245592d5
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/index.ts
@@ -0,0 +1,7 @@
+export { DeleteSecretDialog } from './delete-secret-dialog'
+export { EditSecretDialog } from './edit-secret-dialog'
+export { NewSecretDialog } from './new-secret-dialog'
+export { SecretsPageContent } from './secrets-page-content'
+export { SecretsTableRow } from './secrets-table-row'
+export { useSecretsStore, useTeamSecrets } from './store'
+export { SecretsTable } from './table'
diff --git a/src/features/dashboard/settings/secrets/new-secret-dialog.tsx b/src/features/dashboard/settings/secrets/new-secret-dialog.tsx
new file mode 100644
index 000000000..308a59321
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/new-secret-dialog.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { type ReactNode, useState } from 'react'
+import { useDashboard } from '@/features/dashboard/context'
+import { defaultSuccessToast, toast } from '@/lib/hooks/use-toast'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/ui/primitives/dialog'
+import { AddIcon } from '@/ui/primitives/icons'
+import { SecretForm } from './components/secret-form'
+import { flattenHosts, type SecretFormOutput } from './schema'
+import { useSecretsStore } from './store'
+
+interface NewSecretDialogProps {
+  children: ReactNode
+}
+
+export function NewSecretDialog({ children }: NewSecretDialogProps) {
+  const { team, user } = useDashboard()
+  const addSecret = useSecretsStore((s) => s.addSecret)
+  const [open, setOpen] = useState(false)
+
+  // TODO(secrets-be): swap for `trpc.secrets.create.mutateAsync(...)` once the
+  // backend ships. The secret's plaintext `value` intentionally never enters
+  // the store — only the BE should ever hold it.
+  const handleSubmit = (values: SecretFormOutput) => {
+    addSecret(team.slug, {
+      label: values.label,
+      description: values.description || undefined,
+      allowList:
+        values.allowList.mode === 'all'
+          ? { mode: 'all' }
+          : {
+              mode: 'specific',
+              hosts: flattenHosts(values.allowList.hosts),
+            },
+      createdBy: { email: user.email, avatarUrl: user.avatarUrl },
+    })
+    toast(defaultSuccessToast('Secret added'))
+    setOpen(false)
+  }
+
+  return (
+    <Dialog onOpenChange={setOpen} open={open}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="flex flex-col gap-4 px-6 pt-5 pb-6 max-h-[calc(100svh-2rem)] sm:h-[620px] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Add new secret</DialogTitle>
+        </DialogHeader>
+
+        <SecretForm
+          loadingLabel="Adding secret…"
+          onSubmit={handleSubmit}
+          submitIcon={<AddIcon aria-hidden className="size-4" />}
+          submitLabel="Add"
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/features/dashboard/settings/secrets/schema.ts b/src/features/dashboard/settings/secrets/schema.ts
new file mode 100644
index 000000000..1deb75599
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/schema.ts
@@ -0,0 +1,68 @@
+import { z } from 'zod'
+import { MAX_SECRET_HOSTS } from './constants'
+
+const HOST_REGEX = /^(?!-)[A-Za-z0-9-]{1,63}(?<!-)(\.[A-Za-z0-9-]{1,63})*$/
+
+const HostValueSchema = z
+  .string()
+  .trim()
+  .min(1, 'Host is required')
+  .max(253, 'Host is too long')
+  .regex(HOST_REGEX, 'Enter a valid host (e.g. api.openai.com)')
+
+// Hosts are wrapped in `{ value }` objects because RHF's `useFieldArray`
+// only accepts paths whose value is an array of objects — arrays of
+// primitives resolve to `never` in `FieldArrayPath`. `flattenHosts` below
+// unwraps them before handing off to the backend.
+export const HostSchema = z.object({ value: HostValueSchema })
+
+// allowList stays a flat object (not a discriminatedUnion) so RHF can walk
+// `allowList.hosts` cleanly; the 'specific' non-empty requirement lives in
+// the `.superRefine` below.
+const SecretFormShape = z.object({
+  label: z
+    .string()
+    .trim()
+    .min(1, 'Label is required')
+    .max(64, 'Label is too long'),
+  value: z.string().min(1, 'Secret value is required'),
+  description: z.string().trim().max(120, 'Description is too long'),
+  allowList: z.object({
+    mode: z.enum(['all', 'specific']),
+    hosts: z
+      .array(HostSchema)
+      .max(MAX_SECRET_HOSTS, `Limit of ${MAX_SECRET_HOSTS} hosts reached`),
+  }),
+})
+
+export const SecretFormSchema = SecretFormShape.superRefine((data, ctx) => {
+  if (data.allowList.mode === 'specific' && data.allowList.hosts.length === 0) {
+    ctx.addIssue({
+      code: 'custom',
+      path: ['allowList', 'hosts'],
+      message: 'Add at least one host',
+    })
+  }
+})
+
+// Hand-written rather than `z.input<typeof SecretFormShape>`: `z.input` on a
+// zod object isn't always eagerly expanded for RHF's deeply-recursive
+// `FieldArrayPath` walker, and we want this type to be obviously a plain
+// object shape. `type` (not `interface`) so it satisfies RHF's
+// `FieldValues = Record<string, any>` constraint.
+export type SecretFormInput = {
+  label: string
+  value: string
+  description: string
+  allowList: {
+    mode: 'all' | 'specific'
+    hosts: { value: string }[]
+  }
+}
+
+export type SecretFormOutput = SecretFormInput
+
+/** Unwrap the `{ value }`-wrapped hosts back into plain strings for the BE. */
+export function flattenHosts(hosts: { value: string }[]): string[] {
+  return hosts.map((h) => h.value)
+}
diff --git a/src/features/dashboard/settings/secrets/secrets-page-content.tsx b/src/features/dashboard/settings/secrets/secrets-page-content.tsx
new file mode 100644
index 000000000..31f7cb8b8
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/secrets-page-content.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { useDashboard } from '@/features/dashboard/context'
+import { cn } from '@/lib/utils'
+import { pluralize } from '@/lib/utils/formatting'
+import { CatchErrorBoundary } from '@/ui/error'
+import { Button } from '@/ui/primitives/button'
+import { AddIcon, SearchIcon } from '@/ui/primitives/icons'
+import { Input } from '@/ui/primitives/input'
+import {
+  SECRETS_HELPER_COPY,
+  SECRETS_SEARCH_PLACEHOLDER,
+  SECRETS_SEARCH_PLACEHOLDER_EMPTY,
+} from './constants'
+import { NewSecretDialog } from './new-secret-dialog'
+import { useTeamSecrets } from './store'
+import { SecretsTable } from './table'
+
+interface SecretsPageContentProps {
+  className?: string
+}
+
+export const SecretsPageContent = ({ className }: SecretsPageContentProps) => {
+  const { team } = useDashboard()
+  const [query, setQuery] = useState('')
+
+  const secrets = useTeamSecrets(team.slug)
+  const normalizedQuery = query.trim().toLowerCase()
+  const filteredSecrets = useMemo(() => {
+    if (!normalizedQuery) return secrets
+    return secrets.filter(({ label, allowList }) => {
+      const haystack = [
+        label,
+        ...(allowList.mode === 'specific' ? allowList.hosts : []),
+      ]
+      return haystack.some((value) =>
+        value.toLowerCase().includes(normalizedQuery)
+      )
+    })
+  }, [normalizedQuery, secrets])
+
+  const totalCount = secrets.length
+  const hasActiveSearch = normalizedQuery.length > 0
+  const searchPlaceholder =
+    totalCount === 0
+      ? SECRETS_SEARCH_PLACEHOLDER_EMPTY
+      : SECRETS_SEARCH_PLACEHOLDER
+
+  const totalLabel =
+    totalCount === 0
+      ? null
+      : hasActiveSearch
+        ? `Showing ${filteredSecrets.length} of ${totalCount} ${pluralize(totalCount, 'secret')}`
+        : `${totalCount} ${pluralize(totalCount, 'secret')} in total`
+
+  return (
+    <div className={cn('flex w-full flex-col gap-6', className)}>
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="relative w-full md:w-[280px] md:max-w-none md:shrink-0">
+          <SearchIcon
+            aria-hidden
+            className="text-fg-tertiary pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2"
+          />
+          <Input
+            aria-label={searchPlaceholder}
+            className="h-9 border-stroke pl-9 font-sans"
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={searchPlaceholder}
+            value={query}
+          />
+        </div>
+
+        <NewSecretDialog>
+          <Button
+            className="w-full font-sans normal-case prose-body-highlight md:w-auto md:self-start"
+            type="button"
+            variant="primary"
+          >
+            <AddIcon aria-hidden className="size-4" />
+            Add a secret
+          </Button>
+        </NewSecretDialog>
+      </div>
+
+      <CatchErrorBoundary classNames={{ wrapper: 'w-full' }}>
+        <div className="text-fg-tertiary flex flex-col gap-1 text-sm lg:flex-row lg:items-start lg:justify-between">
+          <p className="max-w-[520px] leading-[17px] tracking-[-0.16px]">
+            {SECRETS_HELPER_COPY}
+          </p>
+          {totalLabel ? (
+            <p className="shrink-0 lg:text-right">{totalLabel}</p>
+          ) : null}
+        </div>
+
+        <div className="bg-bg w-full overflow-x-auto">
+          <SecretsTable
+            secrets={filteredSecrets}
+            totalSecretCount={totalCount}
+          />
+        </div>
+      </CatchErrorBoundary>
+    </div>
+  )
+}
diff --git a/src/features/dashboard/settings/secrets/secrets-table-row.tsx b/src/features/dashboard/settings/secrets/secrets-table-row.tsx
new file mode 100644
index 000000000..b8430bade
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/secrets-table-row.tsx
@@ -0,0 +1,175 @@
+'use client'
+
+import { usePostHog } from 'posthog-js/react'
+import { useState } from 'react'
+import { IdBadge, UserAvatar } from '@/features/dashboard/shared'
+import { defaultSuccessToast, useToast } from '@/lib/hooks/use-toast'
+import { cn } from '@/lib/utils'
+import { formatDate } from '@/lib/utils/formatting'
+import { Badge } from '@/ui/primitives/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/ui/primitives/dropdown-menu'
+import { IconButton } from '@/ui/primitives/icon-button'
+import { EditIcon, IndicatorDotsIcon, TrashIcon } from '@/ui/primitives/icons'
+import { TableCell, TableRow } from '@/ui/primitives/table'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/ui/primitives/tooltip'
+import { DeleteSecretDialog } from './delete-secret-dialog'
+import { EditSecretDialog } from './edit-secret-dialog'
+import type { Secret } from './types'
+
+const tableCellClassName = 'py-3 text-left [tr:first-child>&]:pt-1.5'
+const actionIconClassName = 'size-4 text-fg-tertiary'
+
+interface SecretsTableRowProps {
+  secret: Secret
+}
+
+export const SecretsTableRow = ({ secret }: SecretsTableRowProps) => {
+  const posthog = usePostHog()
+  const { toast } = useToast()
+
+  const addedDate = formatDate(new Date(secret.createdAt), 'MMM d, yyyy') ?? '—'
+  const createdByEmail = secret.createdBy?.email?.trim() || 'Unknown user'
+
+  const handleIdCopied = () => {
+    posthog.capture('copied secret id')
+    toast(defaultSuccessToast('ID copied to clipboard'))
+  }
+
+  return (
+    <TableRow>
+      <TableCell className={tableCellClassName}>
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="border-stroke flex size-8 shrink-0 items-center justify-center border ">
+            <span className="font-medium text-fg-tertiary leading-none mt-0.5">
+              ***
+            </span>
+          </div>
+          <span
+            className="text-fg min-w-0 truncate text-sm font-medium"
+            title={secret.label}
+          >
+            {secret.label}
+          </span>
+        </div>
+      </TableCell>
+
+      <TableCell className={tableCellClassName}>
+        <IdBadge
+          id={secret.id}
+          copyAriaLabel="Copy secret ID"
+          onCopied={handleIdCopied}
+        />
+      </TableCell>
+
+      <TableCell className={cn(tableCellClassName, 'text-sm text-fg-tertiary')}>
+        <AllowedForCell secret={secret} />
+      </TableCell>
+
+      <TableCell className={cn(tableCellClassName, 'text-sm text-fg-tertiary')}>
+        <div className="flex items-center gap-3">
+          <span className="block w-[92px] shrink-0 whitespace-nowrap">
+            {addedDate}
+          </span>
+          <div className="flex items-center gap-3">
+            {secret.createdBy ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="shrink-0 cursor-default">
+                    <UserAvatar
+                      label={createdByEmail}
+                      url={secret.createdBy.avatarUrl}
+                    />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="top">{createdByEmail}</TooltipContent>
+              </Tooltip>
+            ) : (
+              <span aria-hidden className="size-5 shrink-0" />
+            )}
+            <SecretRowActions secret={secret} />
+          </div>
+        </div>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+function SecretRowActions({ secret }: { secret: Secret }) {
+  const [editOpen, setEditOpen] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton aria-label={`Open actions for ${secret.label}`}>
+            <IndicatorDotsIcon className="-rotate-90" />
+          </IconButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuItem inset onSelect={() => setEditOpen(true)}>
+              <EditIcon className={actionIconClassName} /> Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem inset onSelect={() => setDeleteOpen(true)}>
+              <TrashIcon className={actionIconClassName} />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <EditSecretDialog
+        secret={secret}
+        open={editOpen}
+        onOpenChange={setEditOpen}
+      />
+      <DeleteSecretDialog
+        secret={secret}
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+      />
+    </>
+  )
+}
+
+function AllowedForCell({ secret }: { secret: Secret }) {
+  if (secret.allowList.mode === 'all') {
+    return <Badge size="md">All hosts</Badge>
+  }
+
+  const { hosts } = secret.allowList
+  const [first, ...rest] = hosts
+  const label = rest.length === 0 ? first : `${first} +${rest.length}`
+
+  const badge = <Badge size="md">{label}</Badge>
+
+  if (rest.length === 0) return badge
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{badge}</TooltipTrigger>
+      <TooltipContent
+        side="bottom"
+        sideOffset={6}
+        className="px-4 py-3 text-xs uppercase"
+      >
+        <ul className="flex flex-col gap-1">
+          {hosts.map((host) => (
+            <li key={host}>{host}</li>
+          ))}
+        </ul>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/src/features/dashboard/settings/secrets/store.ts b/src/features/dashboard/settings/secrets/store.ts
new file mode 100644
index 000000000..c6e5d0bb6
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/store.ts
@@ -0,0 +1,71 @@
+'use client'
+
+import { nanoid } from 'nanoid'
+import { create } from 'zustand'
+import type { Secret } from './types'
+
+// In-memory mock until the secrets backend ships. Keyed by team slug so
+// switching teams doesn't bleed entries across — mirrors how the keys
+// feature scopes by `team.slug`.
+
+interface SecretsStoreState {
+  byTeam: Record<string, Secret[]>
+}
+
+interface SecretsStoreActions {
+  addSecret: (
+    teamSlug: string,
+    input: Omit<Secret, 'id' | 'createdAt'>
+  ) => Secret
+  updateSecret: (
+    teamSlug: string,
+    id: string,
+    patch: Pick<Secret, 'label' | 'description' | 'allowList'>
+  ) => void
+  removeSecret: (teamSlug: string, id: string) => void
+}
+
+type Store = SecretsStoreState & SecretsStoreActions
+
+// Stable reference for empty-team lookups. Returning a fresh `[]` from the
+// selector would trip Zustand's Object.is check on every render and loop.
+const EMPTY_SECRETS: Secret[] = []
+
+export const useSecretsStore = create<Store>()((set) => ({
+  byTeam: {},
+  addSecret: (teamSlug, input) => {
+    const created: Secret = {
+      ...input,
+      id: `sec_${nanoid(16)}`,
+      createdAt: new Date().toISOString(),
+    }
+    set((state) => ({
+      byTeam: {
+        ...state.byTeam,
+        [teamSlug]: [created, ...(state.byTeam[teamSlug] ?? [])],
+      },
+    }))
+    return created
+  },
+  updateSecret: (teamSlug, id, patch) => {
+    set((state) => ({
+      byTeam: {
+        ...state.byTeam,
+        [teamSlug]: (state.byTeam[teamSlug] ?? []).map((s) =>
+          s.id === id ? { ...s, ...patch } : s
+        ),
+      },
+    }))
+  },
+  removeSecret: (teamSlug, id) => {
+    set((state) => ({
+      byTeam: {
+        ...state.byTeam,
+        [teamSlug]: (state.byTeam[teamSlug] ?? []).filter((s) => s.id !== id),
+      },
+    }))
+  },
+}))
+
+export const useTeamSecrets = (teamSlug: string): Secret[] =>
+  useSecretsStore((s) => s.byTeam[teamSlug] ?? EMPTY_SECRETS)
diff --git a/src/features/dashboard/settings/secrets/table.tsx b/src/features/dashboard/settings/secrets/table.tsx
new file mode 100644
index 000000000..51538e468
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/table.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import type { FC, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { SearchIcon, VaultIcon } from '@/ui/primitives/icons'
+import {
+  Table,
+  TableBody,
+  TableEmptyState,
+  TableHead,
+  TableHeader,
+  TableLoadingState,
+  TableRow,
+} from '@/ui/primitives/table'
+import { SecretsTableRow } from './secrets-table-row'
+import type { Secret } from './types'
+
+const SecretsTableHead = ({ children }: { children: ReactNode }) => (
+  <TableHead className="h-auto pt-0 pb-2 align-top text-fg-tertiary font-sans! normal-case!">
+    {children}
+  </TableHead>
+)
+
+interface SecretsTableProps {
+  secrets: Secret[]
+  totalSecretCount: number
+  isLoading?: boolean
+  className?: string
+}
+
+export const SecretsTable: FC<SecretsTableProps> = ({
+  secrets,
+  totalSecretCount,
+  isLoading = false,
+  className,
+}) => {
+  const hasNoSecrets = totalSecretCount === 0
+
+  return (
+    <Table className={cn('w-full table-fixed', className)}>
+      <colgroup>
+        <col className="min-w-[220px]" />
+        <col className="w-[135px]" />
+        <col className="w-[153px]" />
+        <col className="w-[168px]" />
+      </colgroup>
+      <TableHeader className="border-b-0">
+        <TableRow className="hover:bg-transparent">
+          <SecretsTableHead>LABEL</SecretsTableHead>
+          <SecretsTableHead>ID</SecretsTableHead>
+          <SecretsTableHead>ALLOWED FOR</SecretsTableHead>
+          <SecretsTableHead>ADDED</SecretsTableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody
+        className={cn(
+          secrets.length > 0 && [
+            '[&_tr]:border-stroke',
+            '[&_tr:last-child]:border-b [&_tr:last-child]:border-stroke',
+          ]
+        )}
+      >
+        {isLoading ? (
+          <TableLoadingState colSpan={4} label="Loading secrets" />
+        ) : secrets.length === 0 ? (
+          <TableEmptyState colSpan={4}>
+            <SearchIcon aria-hidden className={cn('size-4 shrink-0')} />
+            {hasNoSecrets ? 'No secrets added yet' : 'No matching results'}
+          </TableEmptyState>
+        ) : (
+          secrets.map((secret) => (
+            <SecretsTableRow key={secret.id} secret={secret} />
+          ))
+        )}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/src/features/dashboard/settings/secrets/types.ts b/src/features/dashboard/settings/secrets/types.ts
new file mode 100644
index 000000000..1a6af3512
--- /dev/null
+++ b/src/features/dashboard/settings/secrets/types.ts
@@ -0,0 +1,16 @@
+// Backend contract for secrets isn't merged yet. This type is a forward-looking
+// placeholder shaped after the Figma table columns; swap for the generated
+// `components['schemas']['SecretDetail']` once the API ships.
+export interface SecretAuthor {
+  email: string | null
+  avatarUrl: string | null
+}
+
+export interface Secret {
+  id: string
+  label: string
+  description?: string
+  allowList: { mode: 'all' } | { mode: 'specific'; hosts: string[] }
+  createdAt: string
+  createdBy?: SecretAuthor
+}
diff --git a/src/ui/primitives/icons.tsx b/src/ui/primitives/icons.tsx
index 126e7797a..98c95a35a 100644
--- a/src/ui/primitives/icons.tsx
+++ b/src/ui/primitives/icons.tsx
@@ -2109,3 +2109,42 @@ export const WebhookIcon = ({ className, ...props }: IconProps) => (
     </defs>
   </svg>
 )
+
+export const VaultIcon = ({ className, ...props }: IconProps) => (
+  <svg
+    className={cn(DEFAULT_CLASS_NAMES, className)}
+    fill="none"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.6673 3.33325H3.33398V16.6666H16.6673V3.33325Z"
+      stroke="currentColor"
+      strokeWidth="1.66667"
+    />
+    <path
+      d="M2.5 6.66675H4.16667"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeWidth="1.66667"
+    />
+    <path
+      d="M2.5 13.3333H4.16667"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeWidth="1.66667"
+    />
+    <path
+      d="M10.2083 12.0834C11.3589 12.0834 12.2917 11.1507 12.2917 10.0001C12.2917 8.84949 11.3589 7.91675 10.2083 7.91675C9.05774 7.91675 8.125 8.84949 8.125 10.0001C8.125 11.1507 9.05774 12.0834 10.2083 12.0834Z"
+      stroke="currentColor"
+      strokeWidth="1.66667"
+    />
+    <path
+      d="M8.54102 8.33325L7.29102 7.08325M11.8743 8.33325L13.1243 7.08325M11.8743 11.6666L13.1243 12.9166M8.54102 11.6666L7.29102 12.9166"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeWidth="1.66667"
+    />
+  </svg>
+)