diff --git a/apps/apollo-vertex/.oxlintrc.json b/apps/apollo-vertex/.oxlintrc.json
index a2a35b09f..8c0bbc328 100644
--- a/apps/apollo-vertex/.oxlintrc.json
+++ b/apps/apollo-vertex/.oxlintrc.json
@@ -114,6 +114,12 @@
       "rules": {
         "react/only-export-components": "off"
       }
+    },
+    {
+      "files": ["templates/**/*.tsx"],
+      "rules": {
+        "eslint/max-lines": ["error", { "max": 500 }]
+      }
     }
   ]
 }
diff --git a/apps/apollo-vertex/app/templates/_meta.ts b/apps/apollo-vertex/app/templates/_meta.ts
index 84fe95d1b..d41075dcb 100644
--- a/apps/apollo-vertex/app/templates/_meta.ts
+++ b/apps/apollo-vertex/app/templates/_meta.ts
@@ -1,3 +1,4 @@
 export default {
   "list-page": "List page",
+  settings: "Settings",
 };
diff --git a/apps/apollo-vertex/app/templates/settings/page.mdx b/apps/apollo-vertex/app/templates/settings/page.mdx
new file mode 100644
index 000000000..241a1ac87
--- /dev/null
+++ b/apps/apollo-vertex/app/templates/settings/page.mdx
@@ -0,0 +1,115 @@
+import { SettingsTemplate } from '@/templates/settings/SettingsTemplate';
+import { PreviewFullScreen } from '@/app/_components/preview-full-screen';
+
+# Settings
+
+A traditional settings page composition: a single, vertically-stacked form
+constrained to a comfortable reading width, broken into titled sections.
+Built from `PageHeader`, `Field` (and friends), `Input`, `Textarea`,
+`Select`, `RadioGroup`, `Switch`, and `Button`. Intended to render inside
+an [`ApolloShell`](/patterns/shell).
+
+<PreviewFullScreen title="Settings page preview">
+    <SettingsTemplate />
+</PreviewFullScreen>
+
+## Composition
+
+From top to bottom the template stacks:
+
+- **[`Shell`](/patterns/shell)** (outer) — provides the chrome (sidebar,
+  header, auth, theme). Wrap the rest of the page inside `ApolloShell`.
+- **`PageHeader`** — page title.
+- **Sections** — four titled `<section>`s (Profile, Notifications, Regional,
+  Privacy & security) wrapped by a small in-file `Section` helper. Each
+  section starts with an `h2` + description header, then a `FieldGroup` of
+  `Field`s. Sections use `mb-8` for vertical rhythm.
+- **Field stack** — within each `Field`, content stacks `FieldLabel` →
+  `FieldDescription` → control (Input, Textarea, Select, RadioGroup). Toggle
+  rows use `orientation="horizontal"` so the label sits left and the
+  `Switch` sits right.
+- **Action footer** — right-aligned `Reset to defaults` (outline) and
+  `Save changes` (primary) `Button`s. `Save` is disabled until the draft
+  diverges from the saved state.
+
+## Grid
+
+The page uses the [foundation grid](/foundation/grid):
+
+- Outer container has `px-4 sm:px-6 lg:px-8` margins matching the default
+  `PageHeader`, and a `grid grid-cols-4 sm:grid-cols-8 lg:grid-cols-12
+  gap-4` row.
+- The form column spans `col-span-4 sm:col-span-8 lg:col-span-7` — full
+  width on mobile/tablet, ~58% width on desktop. This keeps line lengths
+  readable (~600–760px depending on viewport) instead of letting the form
+  stretch edge-to-edge on wide monitors.
+- Within Regional, Language and Timezone share a nested
+  `grid grid-cols-1 sm:grid-cols-2 gap-4` so they pair on one row from
+  tablet up.
+
+| Breakpoint | Form column |
+|---|---|
+| Mobile (`grid-cols-4`) | `col-span-4` (full width) |
+| Tablet (`sm:grid-cols-8`) | `sm:col-span-8` (full width) |
+| Desktop (`lg:grid-cols-12`) | `lg:col-span-7` (~58%) |
+
+Sections inside the form column are separated vertically with `mb-8` (32px)
+on each section.
+
+Source: [`templates/settings/WorkspaceSettings.tsx`](https://github.com/UiPath/apollo-ui/blob/main/apps/apollo-vertex/templates/settings/WorkspaceSettings.tsx)
+
+## Installation
+
+The composition itself is a pattern — copy the source from
+`templates/settings/WorkspaceSettings.tsx` into your app, wrap it in
+`ApolloShell`, and swap in your own state/persistence. The underlying
+components install from the registry:
+
+```bash
+npx shadcn@latest add @uipath/shell
+npx shadcn@latest add @uipath/page-header
+npx shadcn@latest add @uipath/field
+npx shadcn@latest add @uipath/input
+npx shadcn@latest add @uipath/textarea
+npx shadcn@latest add @uipath/select
+npx shadcn@latest add @uipath/radio-group
+npx shadcn@latest add @uipath/switch
+npx shadcn@latest add @uipath/button
+```
+
+## Customizing
+
+- **Form width** — `lg:col-span-7` matches the comfortable form line length
+  used across the Vertex apps. Bump to `lg:col-span-8` for slightly wider
+  controls or `lg:col-span-6` for tighter forms. Stay within the 12-column
+  grid so margins line up with the `PageHeader`.
+- **Persistence** — the template uses two `useState` slots (`draft` and
+  `saved`) and compares them field-by-field to power the `Save` button.
+  Replace `handleSave` and `handleReset` with calls to your own store,
+  server action, or settings API. Toast feedback can be added with
+  `Sonner` from the registry.
+- **Categorical fields** — `emailFrequency` and `visibility` are typed as
+  unions derived from their option arrays via `as const` plus a small type
+  guard at the `RadioGroup`'s `onValueChange`. Follow the same pattern when
+  adding more categorical settings so values stay type-safe end-to-end.
+- **Date format** — the `dateFormat` option values (`short`, `medium`,
+  `long`) map directly to `Intl.DateTimeFormat({ dateStyle })` so they
+  render without a date library. Swap in `date-fns` format strings or your
+  own enum if you need finer control.
+- **Sub-page navigation** — settings UIs often have multiple sub-sections
+  routed independently (e.g. `/settings/profile`,
+  `/settings/notifications`). Move each `<Section>` to its own route and
+  add a left-rail nav with vertical `Tabs` or a sidebar.
+- **Field orientation** — `Field` accepts `orientation="horizontal"`
+  (label left, control right) or `"vertical"` (label above control). The
+  template uses horizontal for `Switch` rows and vertical for everything
+  else.
+- **Pairing fields** — wrap a couple of `Field`s in a nested
+  `grid grid-cols-1 sm:grid-cols-2 gap-4` to lay them side-by-side from
+  tablet up (as Language + Timezone do here).
+- **Validation** — pair each `Field` with `FieldError` and pass an
+  `errors` array to surface validation messages, or wrap the page with
+  `react-hook-form` + `zod` for full form management.
+- **i18n** — wrap your app in `ApolloShell` (which initializes i18n via
+  `LocaleProvider`) or provide your own `I18nextProvider` so any
+  registry-component strings render correctly.
diff --git a/apps/apollo-vertex/templates/settings/SettingsTemplate.tsx b/apps/apollo-vertex/templates/settings/SettingsTemplate.tsx
new file mode 100644
index 000000000..ee4c39276
--- /dev/null
+++ b/apps/apollo-vertex/templates/settings/SettingsTemplate.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { WorkspaceSettings } from "./WorkspaceSettings";
+
+function SettingsTemplateContent() {
+  return (
+    <div className="h-full bg-background dark:bg-sidebar overflow-y-auto custom-scrollbar">
+      <WorkspaceSettings />
+    </div>
+  );
+}
+
+export const SettingsTemplate = dynamic(
+  () => Promise.resolve(SettingsTemplateContent),
+  { ssr: false },
+);
diff --git a/apps/apollo-vertex/templates/settings/WorkspaceSettings.tsx b/apps/apollo-vertex/templates/settings/WorkspaceSettings.tsx
new file mode 100644
index 000000000..06037bfe6
--- /dev/null
+++ b/apps/apollo-vertex/templates/settings/WorkspaceSettings.tsx
@@ -0,0 +1,464 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { ReactNode } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { FieldGroup } from "@/components/ui/field";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  PageHeader,
+  PageHeaderNav,
+  PageHeaderTitle,
+} from "@/components/ui/page-header";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+
+const EMAIL_FREQUENCIES = [
+  { value: "realtime", label: "Realtime — every event" },
+  { value: "daily", label: "Daily digest — once each morning" },
+  { value: "weekly", label: "Weekly summary — Mondays" },
+] as const;
+
+const VISIBILITIES = [
+  { value: "public", label: "Public — anyone with the link" },
+  { value: "internal", label: "Internal — your organization" },
+  { value: "private", label: "Private — invitation only" },
+] as const;
+
+const INDUSTRIES = [
+  { value: "healthcare", label: "Healthcare" },
+  { value: "financial-services", label: "Financial services" },
+  { value: "manufacturing", label: "Manufacturing" },
+  { value: "public-sector", label: "Public sector" },
+];
+
+const LANGUAGES = [
+  { value: "en-US", label: "English (United States)" },
+  { value: "de-DE", label: "Deutsch" },
+  { value: "fr-FR", label: "Français" },
+  { value: "ja-JP", label: "日本語" },
+];
+
+const TIMEZONES = [
+  { value: "America/Los_Angeles", label: "(GMT−08:00) Pacific Time" },
+  { value: "America/New_York", label: "(GMT−05:00) Eastern Time" },
+  { value: "Europe/London", label: "(GMT+00:00) London" },
+  { value: "Asia/Tokyo", label: "(GMT+09:00) Tokyo" },
+];
+
+const DATE_FORMATS = [
+  { value: "short", label: "4/24/26" },
+  { value: "medium", label: "Apr 24, 2026" },
+  { value: "long", label: "April 24, 2026" },
+];
+
+const settingsSchema = z.object({
+  workspaceName: z.string().min(1, "Workspace name is required"),
+  description: z.string(),
+  industry: z.string(),
+  emailFrequency: z.enum(["realtime", "daily", "weekly"]),
+  emailDigest: z.boolean(),
+  browserPush: z.boolean(),
+  language: z.string(),
+  timezone: z.string(),
+  dateFormat: z.string(),
+  visibility: z.enum(["public", "internal", "private"]),
+  require2fa: z.boolean(),
+});
+
+type SettingsValues = z.infer<typeof settingsSchema>;
+
+const DEFAULT_VALUES: SettingsValues = {
+  workspaceName: "Acme Health",
+  description: "Clinical operations workspace for the Acme Health network.",
+  industry: "healthcare",
+  emailFrequency: "daily",
+  emailDigest: true,
+  browserPush: false,
+  language: "en-US",
+  timezone: "America/New_York",
+  dateFormat: "medium",
+  visibility: "internal",
+  require2fa: true,
+};
+
+interface SectionProps {
+  title: string;
+  description: string;
+  children: ReactNode;
+}
+
+function Section({ title, description, children }: SectionProps) {
+  return (
+    <section className="mb-8 space-y-6">
+      <header className="space-y-1">
+        <h2 className="text-base font-semibold text-foreground">{title}</h2>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </header>
+      {children}
+    </section>
+  );
+}
+
+export function WorkspaceSettings() {
+  const form = useForm<SettingsValues>({
+    resolver: zodResolver(settingsSchema),
+    defaultValues: DEFAULT_VALUES,
+  });
+
+  return (
+    <div className="relative z-10">
+      <PageHeader>
+        <PageHeaderNav>
+          <PageHeaderTitle>Workspace settings</PageHeaderTitle>
+        </PageHeaderNav>
+      </PageHeader>
+
+      <Form {...form}>
+        <form
+          onSubmit={(e) =>
+            void form.handleSubmit((data) => form.reset(data))(e)
+          }
+          className="px-4 sm:px-6 lg:px-8 pb-8 grid grid-cols-4 sm:grid-cols-8 lg:grid-cols-12 gap-4"
+        >
+          <div className="col-span-4 sm:col-span-8 lg:col-span-7">
+            <Section
+              title="Profile"
+              description="Identifies the workspace across the platform and in invitations."
+            >
+              <FieldGroup>
+                <FormField
+                  control={form.control}
+                  name="workspaceName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Workspace name</FormLabel>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Description</FormLabel>
+                      <FormDescription>
+                        Shown to invited members on the workspace landing page.
+                      </FormDescription>
+                      <FormControl>
+                        <Textarea rows={3} {...field} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="industry"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Industry</FormLabel>
+                      <FormDescription>
+                        Used to recommend starter templates and connectors.
+                      </FormDescription>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select an industry" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {INDUSTRIES.map(({ value, label }) => (
+                            <SelectItem key={value} value={value}>
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormItem>
+                  )}
+                />
+              </FieldGroup>
+            </Section>
+
+            <Section
+              title="Notifications"
+              description="Control how members are alerted about workspace activity."
+            >
+              <FieldGroup>
+                <FormField
+                  control={form.control}
+                  name="emailFrequency"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email frequency</FormLabel>
+                      <FormControl>
+                        <RadioGroup
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          className="gap-3"
+                        >
+                          {EMAIL_FREQUENCIES.map(({ value, label }) => (
+                            <div
+                              key={value}
+                              className="flex items-center gap-2"
+                            >
+                              <RadioGroupItem
+                                value={value}
+                                id={`freq-${value}`}
+                              />
+                              <Label
+                                htmlFor={`freq-${value}`}
+                                className="font-normal"
+                              >
+                                {label}
+                              </Label>
+                            </div>
+                          ))}
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="emailDigest"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between gap-3">
+                      <div className="space-y-1">
+                        <FormLabel>
+                          Include unread mentions in the digest
+                        </FormLabel>
+                        <FormDescription>
+                          Adds a section listing direct mentions you have not
+                          read.
+                        </FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="browserPush"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between gap-3">
+                      <div className="space-y-1">
+                        <FormLabel>Browser push notifications</FormLabel>
+                        <FormDescription>
+                          Show desktop notifications when this tab is in the
+                          background.
+                        </FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </FieldGroup>
+            </Section>
+
+            <Section
+              title="Regional"
+              description="Defaults applied to dates, times, and translatable strings."
+            >
+              <FieldGroup>
+                <div className="grid sm:grid-cols-2 gap-4">
+                  <FormField
+                    control={form.control}
+                    name="language"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Language</FormLabel>
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        >
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {LANGUAGES.map(({ value, label }) => (
+                              <SelectItem key={value} value={value}>
+                                {label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="timezone"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Timezone</FormLabel>
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        >
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {TIMEZONES.map(({ value, label }) => (
+                              <SelectItem key={value} value={value}>
+                                {label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <FormField
+                  control={form.control}
+                  name="dateFormat"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Date format</FormLabel>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="max-w-xs">
+                            <SelectValue />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {DATE_FORMATS.map(({ value, label }) => (
+                            <SelectItem key={value} value={value}>
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormItem>
+                  )}
+                />
+              </FieldGroup>
+            </Section>
+
+            <Section
+              title="Privacy & security"
+              description="Who can find this workspace and how they sign in."
+            >
+              <FieldGroup>
+                <FormField
+                  control={form.control}
+                  name="visibility"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Workspace visibility</FormLabel>
+                      <FormControl>
+                        <RadioGroup
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          className="gap-3"
+                        >
+                          {VISIBILITIES.map(({ value, label }) => (
+                            <div
+                              key={value}
+                              className="flex items-center gap-2"
+                            >
+                              <RadioGroupItem
+                                value={value}
+                                id={`vis-${value}`}
+                              />
+                              <Label
+                                htmlFor={`vis-${value}`}
+                                className="font-normal"
+                              >
+                                {label}
+                              </Label>
+                            </div>
+                          ))}
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="require2fa"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between gap-3">
+                      <div className="space-y-1">
+                        <FormLabel>Require two-factor authentication</FormLabel>
+                        <FormDescription>
+                          Members without 2FA will be prompted to enroll on next
+                          sign-in.
+                        </FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </FieldGroup>
+            </Section>
+
+            <div className="flex items-center justify-end gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => form.reset(DEFAULT_VALUES)}
+              >
+                Reset to defaults
+              </Button>
+              <Button type="submit" disabled={!form.formState.isDirty}>
+                Save changes
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}