diff --git a/packages/ui/src/features/folder-picker/GitHubRepoPicker.tsx b/packages/ui/src/features/folder-picker/GitHubRepoPicker.tsx
index 65e477ba25..05f5f8d172 100644
--- a/packages/ui/src/features/folder-picker/GitHubRepoPicker.tsx
+++ b/packages/ui/src/features/folder-picker/GitHubRepoPicker.tsx
@@ -43,6 +43,7 @@ export function GitHubRepoPicker({
   repositories,
   isLoading,
   placeholder = "Select repository...",
+  size = "1",
   disabled = false,
   anchor,
   showSearchInput = true,
@@ -55,6 +56,8 @@ export function GitHubRepoPicker({
   hasMore: controlledHasMore,
   onLoadMore,
 }: GitHubRepoPickerProps) {
+  const buttonSize = size === "2" ? "lg" : "sm";
+  const buttonTextClass = size === "2" ? "text-[13px]" : "";
   const triggerRef = useRef<HTMLButtonElement>(null);
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
   const [uncontrolledSearchQuery, setUncontrolledSearchQuery] = useState("");
@@ -91,7 +94,12 @@ export function GitHubRepoPicker({
 
   if (isLoading && !showInlineLoadingState) {
     return (
-      <Button variant="outline" disabled size="sm">
+      <Button
+        variant="outline"
+        disabled
+        size={buttonSize}
+        className={buttonTextClass}
+      >
         <GithubLogo size={16} weight="regular" className="shrink-0" />
         Loading repos...
       </Button>
@@ -107,7 +115,12 @@ export function GitHubRepoPicker({
     !hasActiveRemoteSearch
   ) {
     return (
-      <Button variant="outline" disabled size="sm">
+      <Button
+        variant="outline"
+        disabled
+        size={buttonSize}
+        className={buttonTextClass}
+      >
         <GithubLogo size={16} weight="regular" className="shrink-0" />
         No GitHub repos
       </Button>
@@ -121,10 +134,10 @@ export function GitHubRepoPicker({
           <Button
             type="button"
             variant="outline"
-            size="sm"
+            size={buttonSize}
             disabled
             aria-label="Repository"
-            className="pointer-events-none min-w-0 max-w-full cursor-default justify-start disabled:opacity-100"
+            className={`pointer-events-none min-w-0 max-w-full cursor-default justify-start disabled:opacity-100 ${buttonTextClass}`}
           >
             <GithubLogo size={14} weight="regular" className="shrink-0" />
             <span className="min-w-0 truncate">{onlyRepo}</span>
@@ -165,9 +178,10 @@ export function GitHubRepoPicker({
           <Button
             ref={triggerRef}
             variant="outline"
-            size="sm"
+            size={buttonSize}
             disabled={disabled}
             aria-label="Repository"
+            className={buttonTextClass}
           >
             <GithubLogo size={14} weight="regular" className="shrink-0" />
             <span className="min-w-0 truncate">{value ?? placeholder}</span>
diff --git a/packages/ui/src/features/loops/components/LoopBehaviorFields.tsx b/packages/ui/src/features/loops/components/LoopBehaviorFields.tsx
index c27b18845f..514d325bf4 100644
--- a/packages/ui/src/features/loops/components/LoopBehaviorFields.tsx
+++ b/packages/ui/src/features/loops/components/LoopBehaviorFields.tsx
@@ -18,7 +18,7 @@ export function LoopBehaviorFields({
     <Flex
       direction="column"
       gap="2"
-      className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) p-3"
+      className="rounded-(--radius-2) border border-border bg-(--gray-1) p-3"
     >
       <Flex align="center" justify="between" gap="2">
         <Flex direction="column" gap="0">
diff --git a/packages/ui/src/features/loops/components/LoopContextFields.tsx b/packages/ui/src/features/loops/components/LoopContextFields.tsx
index b75e972f0b..58ee13e311 100644
--- a/packages/ui/src/features/loops/components/LoopContextFields.tsx
+++ b/packages/ui/src/features/loops/components/LoopContextFields.tsx
@@ -50,7 +50,7 @@ export function LoopContextFields({
   };
 
   const contextOptions = [
-    { value: NOT_ATTACHED_VALUE, label: "Not attached" },
+    { value: NOT_ATTACHED_VALUE, label: "Not attached to a channel" },
     ...channels.map((channel) => ({
       value: channel.id,
       label: `#${channel.name}`,
@@ -63,7 +63,8 @@ export function LoopContextFields({
         value={value?.folderId ?? NOT_ATTACHED_VALUE}
         options={contextOptions}
         disabled={disabled}
-        ariaLabel="Context"
+        size="lg"
+        ariaLabel="Context channel"
         onValueChange={selectContext}
       />
 
@@ -71,7 +72,7 @@ export function LoopContextFields({
         <Flex
           direction="column"
           gap="3"
-          className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) p-3"
+          className="rounded-(--radius-2) border border-border bg-(--gray-1) p-3"
         >
           <ToggleRow
             title="Show runs in the feed"
@@ -110,6 +111,7 @@ export function LoopContextFields({
                 label: dashboard.name,
               }))}
               disabled={disabled}
+              size="lg"
               ariaLabel="Canvas"
               onValueChange={(canvasId) =>
                 patchOutputs({ canvas_id: canvasId })
diff --git a/packages/ui/src/features/loops/components/LoopForm.tsx b/packages/ui/src/features/loops/components/LoopForm.tsx
index 72e7899ac7..7361bd3596 100644
--- a/packages/ui/src/features/loops/components/LoopForm.tsx
+++ b/packages/ui/src/features/loops/components/LoopForm.tsx
@@ -5,7 +5,10 @@ import {
   Check,
 } from "@phosphor-icons/react";
 import { type LoopSchemas, LoopsApiError } from "@posthog/api-client/loops";
+import { PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { SettingsOptionSelect } from "@posthog/ui/features/settings/SettingsOptionSelect";
+import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
 import { Button } from "@posthog/ui/primitives/Button";
 import { toast } from "@posthog/ui/primitives/toast";
@@ -83,6 +86,17 @@ export function LoopForm({ loop }: LoopFormProps) {
     if (!loop) useLoopDraftStore.getState().setPrefill(null);
   }, [loop]);
 
+  // Contexts are a channels surface; hide the attachment UI when channels are
+  // off, unless this loop is already attached so the link stays visible and
+  // detachable.
+  const bluebirdEnabled = useFeatureFlag(
+    PROJECT_BLUEBIRD_FLAG,
+    import.meta.env.DEV,
+  );
+  const channelsEnabled =
+    useSidebarStore((s) => s.channelsEnabled) && bluebirdEnabled;
+  const showContextField = channelsEnabled || !!values.contextTarget;
+
   const createLoop = useCreateLoop();
   const updateLoop = useUpdateLoop(loop?.id ?? "");
   const isSubmitting = isEdit ? updateLoop.isPending : createLoop.isPending;
@@ -157,13 +171,13 @@ export function LoopForm({ loop }: LoopFormProps) {
     <Box className="flex h-full items-center justify-center p-6">
       <Flex
         direction="column"
-        className="max-h-full w-full max-w-[600px] overflow-hidden rounded-(--radius-3) border border-border bg-(--color-panel-solid) shadow-xl"
+        className="max-h-full w-full max-w-[640px] overflow-hidden rounded-(--radius-3) border border-border bg-(--color-panel-solid) shadow-xl"
       >
-        <Box className="border-border border-b px-5 pt-5 pb-4">
+        <Box className="border-border border-b px-6 pt-5 pb-4">
           <Stepper current={step} complete={stepComplete} onSelect={setStep} />
         </Box>
 
-        <Box className="min-h-0 flex-1 overflow-y-auto px-5 py-5">
+        <Box className="min-h-0 flex-1 overflow-y-auto px-6 py-6">
           {step === 0 ? (
             <Step
               title="What should this loop do?"
@@ -203,7 +217,7 @@ export function LoopForm({ loop }: LoopFormProps) {
           {step === 1 ? (
             <Step
               title="When should it run?"
-              description="Add one or more triggers. Leave empty to run it only on demand."
+              description="A loop can have several triggers, and any one of them starts a run. With no triggers, you run it yourself from the loop's page."
             >
               <LoopTriggerEditor
                 triggers={values.triggers}
@@ -224,7 +238,7 @@ export function LoopForm({ loop }: LoopFormProps) {
                 className="max-w-[340px]"
                 hint={
                   values.contextTarget
-                    ? "Loops attached to a context post runs to its shared feed, so they're visible to everyone on the project."
+                    ? "Loops attached to a channel post runs to its shared feed, so they're visible to everyone on the project."
                     : undefined
                 }
               >
@@ -232,6 +246,7 @@ export function LoopForm({ loop }: LoopFormProps) {
                   value={values.visibility}
                   options={VISIBILITY_OPTIONS}
                   disabled={isSubmitting || !!values.contextTarget}
+                  size="lg"
                   ariaLabel="Visibility"
                   onValueChange={(value) =>
                     patch({
@@ -243,27 +258,31 @@ export function LoopForm({ loop }: LoopFormProps) {
 
               <Divider />
 
-              <Field
-                label="Context"
-                hint="Attach this loop to a context to file its runs in the feed and keep its context.md or a canvas up to date."
-              >
-                <LoopContextFields
-                  value={values.contextTarget}
-                  disabled={isSubmitting}
-                  onChange={(contextTarget) =>
-                    patch(
-                      contextTarget
-                        ? { contextTarget, visibility: "team" }
-                        : { contextTarget },
-                    )
-                  }
-                />
-              </Field>
+              {showContextField ? (
+                <>
+                  <Field
+                    label="Context"
+                    hint="A context is one of the channels in your sidebar. Attach this loop to a channel and its runs show up in that channel's feed; it can also keep the channel's context.md or a canvas up to date."
+                  >
+                    <LoopContextFields
+                      value={values.contextTarget}
+                      disabled={isSubmitting}
+                      onChange={(contextTarget) =>
+                        patch(
+                          contextTarget
+                            ? { contextTarget, visibility: "team" }
+                            : { contextTarget },
+                        )
+                      }
+                    />
+                  </Field>
 
-              <Divider />
+                  <Divider />
+                </>
+              ) : null}
 
               <Field
-                label="Repository"
+                label="Base repository"
                 hint={
                   values.repositories.length > 1
                     ? `${values.repositories.length - 1} more ${
@@ -271,7 +290,7 @@ export function LoopForm({ loop }: LoopFormProps) {
                           ? "repository stays"
                           : "repositories stay"
                       } attached to this loop.`
-                    : "Optional. Leave empty for a report-only loop that works purely through connectors."
+                    : "The repository runs check out and work in. Optional. Leave empty for a report-only loop that works purely through connectors."
                 }
               >
                 <LoopRepositoryPicker
@@ -352,7 +371,7 @@ export function LoopForm({ loop }: LoopFormProps) {
               title="Review"
               description="Check everything before you create the loop."
             >
-              <ReviewList values={values} />
+              <ReviewList values={values} showContext={showContextField} />
             </Step>
           ) : null}
         </Box>
@@ -497,7 +516,13 @@ function Divider() {
   return <Box className="h-px bg-(--gray-4)" />;
 }
 
-function ReviewList({ values }: { values: LoopFormValues }) {
+function ReviewList({
+  values,
+  showContext,
+}: {
+  values: LoopFormValues;
+  showContext: boolean;
+}) {
   const reasoning = values.reasoningEffort ?? "auto";
   const channels = (["push", "email", "slack"] as const).filter(
     (channel) => values.notifications[channel]?.enabled,
@@ -524,12 +549,14 @@ function ReviewList({ values }: { values: LoopFormValues }) {
           values.model || "Default model"
         } · ${reasoning} reasoning`}
       />
+      {showContext ? (
+        <ReviewRow
+          label="Context"
+          value={describeContext(values.contextTarget)}
+        />
+      ) : null}
       <ReviewRow
-        label="Context"
-        value={describeContext(values.contextTarget)}
-      />
-      <ReviewRow
-        label="Repository"
+        label="Base repository"
         value={
           values.repositories.length > 0
             ? values.repositories.map((repo) => repo.full_name).join(", ")
@@ -580,7 +607,7 @@ function ReviewRow({
 }
 
 function describeContext(target: LoopContextTargetDraft | null): string {
-  if (!target) return "Not attached";
+  if (!target) return "Not attached to a channel";
   const outputs: string[] = [];
   if (target.outputs.post_to_feed) outputs.push("feed");
   if (target.outputs.update_context) outputs.push("context.md");
diff --git a/packages/ui/src/features/loops/components/LoopFormPrimitives.tsx b/packages/ui/src/features/loops/components/LoopFormPrimitives.tsx
index 2453b121ca..4ca6401d39 100644
--- a/packages/ui/src/features/loops/components/LoopFormPrimitives.tsx
+++ b/packages/ui/src/features/loops/components/LoopFormPrimitives.tsx
@@ -20,14 +20,14 @@ export function Field({
   children: ReactNode;
 }) {
   return (
-    <Flex direction="column" gap="1" className={className}>
-      <Text as="label" className="font-medium text-[12px] text-gray-11">
+    <Flex direction="column" gap="2" className={className}>
+      <Text as="label" className="font-medium text-[13px] text-gray-12">
         {label}
         {required ? <span className="ml-0.5 text-(--accent-9)">*</span> : null}
       </Text>
       {children}
       {hint ? (
-        <Text className="text-[11px] text-gray-10 leading-snug">{hint}</Text>
+        <Text className="text-[12px] text-gray-10 leading-snug">{hint}</Text>
       ) : null}
     </Flex>
   );
diff --git a/packages/ui/src/features/loops/components/LoopModelFields.tsx b/packages/ui/src/features/loops/components/LoopModelFields.tsx
index eb0dc322ac..359bf00562 100644
--- a/packages/ui/src/features/loops/components/LoopModelFields.tsx
+++ b/packages/ui/src/features/loops/components/LoopModelFields.tsx
@@ -100,6 +100,7 @@ export function LoopModelFields({
             onModelChange(value === DEFAULT_MODEL_VALUE ? "" : value)
           }
           disabled={disabled}
+          size="lg"
           ariaLabel="Model"
         />
       </Field>
@@ -113,6 +114,7 @@ export function LoopModelFields({
               onAdapterChange(value as LoopSchemas.LoopRuntimeAdapterEnum)
             }
             disabled={disabled}
+            size="lg"
             ariaLabel="Adapter"
           />
         </Field>
@@ -129,6 +131,7 @@ export function LoopModelFields({
               )
             }
             disabled={disabled}
+            size="lg"
             ariaLabel="Reasoning effort"
           />
         </Field>
diff --git a/packages/ui/src/features/loops/components/LoopNotificationsFields.tsx b/packages/ui/src/features/loops/components/LoopNotificationsFields.tsx
index 13e09c0088..ec20039d4c 100644
--- a/packages/ui/src/features/loops/components/LoopNotificationsFields.tsx
+++ b/packages/ui/src/features/loops/components/LoopNotificationsFields.tsx
@@ -46,16 +46,20 @@ export function LoopNotificationsFields({
 
   return (
     <Flex direction="column" gap="3">
+      <Text className="text-[12.5px] text-gray-10 leading-snug">
+        Each run and its full output live on this loop's page. Notifications
+        only send a short summary with a link when something happens.
+      </Text>
       <NotificationChannelRow
         title="Push"
-        description="Notify the loop owner's devices."
+        description="Sends a push notification to the loop owner's devices with PostHog installed."
         channel={notifications.push}
         disabled={disabled}
         onChange={(patch) => updateChannel("push", patch)}
       />
       <NotificationChannelRow
         title="Email"
-        description="Send a run summary to the loop owner's email."
+        description="Emails a run summary to the loop owner's account email."
         channel={notifications.email}
         disabled={disabled}
         onChange={(patch) => updateChannel("email", patch)}
@@ -88,7 +92,7 @@ function NotificationChannelRow({
     <Flex
       direction="column"
       gap="2"
-      className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) p-3"
+      className="rounded-(--radius-2) border border-border bg-(--gray-1) p-3"
     >
       <Flex align="center" justify="between" gap="2">
         <Flex direction="column" gap="0">
@@ -142,24 +146,27 @@ function EventFilterCheckboxes({
   };
 
   return (
-    <Flex gap="3" wrap="wrap">
-      {EVENT_OPTIONS.map((option) => (
-        <Text
-          key={option.value}
-          as="label"
-          className="flex items-center gap-1.5 text-[12px] text-gray-11"
-        >
-          <Checkbox
-            size="1"
-            checked={events.includes(option.value)}
-            disabled={disabled}
-            onCheckedChange={(checked) =>
-              toggle(option.value, checked === true)
-            }
-          />
-          {option.label}
-        </Text>
-      ))}
+    <Flex direction="column" gap="1.5">
+      <Text className="font-medium text-[12px] text-gray-11">Notify on</Text>
+      <Flex gap="3" wrap="wrap">
+        {EVENT_OPTIONS.map((option) => (
+          <Text
+            key={option.value}
+            as="label"
+            className="flex items-center gap-1.5 text-[12.5px] text-gray-12"
+          >
+            <Checkbox
+              size="1"
+              checked={events.includes(option.value)}
+              disabled={disabled}
+              onCheckedChange={(checked) =>
+                toggle(option.value, checked === true)
+              }
+            />
+            {option.label}
+          </Text>
+        ))}
+      </Flex>
     </Flex>
   );
 }
@@ -194,7 +201,7 @@ function SlackNotificationRow({
   return (
     <NotificationChannelRow
       title="Slack"
-      description="Post a run summary to a Slack channel."
+      description="Posts a run summary to the channel you pick, through this project's Slack connection."
       channel={channel}
       disabled={disabled}
       onChange={onChange}
diff --git a/packages/ui/src/features/loops/components/LoopRepositoryPicker.tsx b/packages/ui/src/features/loops/components/LoopRepositoryPicker.tsx
index a142f3dc49..b6c622f8ff 100644
--- a/packages/ui/src/features/loops/components/LoopRepositoryPicker.tsx
+++ b/packages/ui/src/features/loops/components/LoopRepositoryPicker.tsx
@@ -51,7 +51,7 @@ export function LoopRepositoryPicker({
       isRefreshing={isRefreshingRepos}
       onRefresh={() => void refreshRepositories()}
       placeholder="Select repository…"
-      size="1"
+      size="2"
       disabled={disabled || !hasGithubIntegration}
     />
   );
diff --git a/packages/ui/src/features/loops/components/LoopTriggerEditor.tsx b/packages/ui/src/features/loops/components/LoopTriggerEditor.tsx
index bac76e2c38..2a71707126 100644
--- a/packages/ui/src/features/loops/components/LoopTriggerEditor.tsx
+++ b/packages/ui/src/features/loops/components/LoopTriggerEditor.tsx
@@ -1,15 +1,33 @@
 import {
   CalendarBlank,
+  Clock,
   GithubLogo,
   Globe,
   Plus,
   Trash,
+  Warning,
 } from "@phosphor-icons/react";
 import type { LoopSchemas } from "@posthog/api-client/loops";
-import { Switch } from "@posthog/quill";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemMenuItem,
+  ItemTitle,
+  Switch,
+} from "@posthog/quill";
 import { CopyButton } from "@posthog/ui/features/agent-applications/components/CopyButton";
 import { SettingsOptionSelect } from "@posthog/ui/features/settings/SettingsOptionSelect";
-import { Button } from "@posthog/ui/primitives/Button";
 import { TimezonePicker } from "@posthog/ui/primitives/TimezonePicker";
 import { TimezoneTimestamp } from "@posthog/ui/primitives/TimezoneTimestamp";
 import {
@@ -17,6 +35,7 @@ import {
   systemTimezone,
 } from "@posthog/ui/primitives/timezone";
 import { Box, Checkbox, Flex, IconButton, Text } from "@radix-ui/themes";
+import type { ReactNode } from "react";
 import {
   compileCronSchedule,
   DEFAULT_SCHEDULE_TIME,
@@ -25,56 +44,44 @@ import {
 } from "../loopCron";
 import { nextScheduleRun } from "../loopDisplay";
 import {
-  defaultLoopScheduleTrigger,
-  emptyLoopApiTriggerConfig,
-  emptyLoopGithubTriggerConfig,
-  emptyLoopScheduleTriggerConfig,
+  defaultLoopTriggerOfType,
   isTriggerDraftValid,
   type LoopTriggerDraft,
 } from "../loopFormTypes";
 import { LoopRepositoryPicker } from "./LoopRepositoryPicker";
 
-const TRIGGER_TYPE_OPTIONS: {
-  value: LoopSchemas.LoopTriggerTypeEnum;
-  label: string;
-}[] = [
-  { value: "schedule", label: "Schedule" },
-  { value: "github", label: "GitHub event" },
-  { value: "api", label: "API" },
-];
-
-const GITHUB_EVENT_OPTIONS: {
-  value: LoopSchemas.LoopGithubTriggerEventEnum;
+const TRIGGER_TYPES: {
+  type: LoopSchemas.LoopTriggerTypeEnum;
   label: string;
+  subtitle: string;
+  menuDescription: string;
+  icon: typeof CalendarBlank;
 }[] = [
-  { value: "push", label: "Push" },
-  { value: "pull_request", label: "Pull request" },
-  { value: "issues", label: "Issues" },
-  { value: "issue_comment", label: "Issue comment" },
+  {
+    type: "schedule",
+    label: "Schedule",
+    subtitle: "Runs at times you set",
+    menuDescription: "Hourly, daily, weekly or once at a set time",
+    icon: CalendarBlank,
+  },
+  {
+    type: "github",
+    label: "GitHub event",
+    subtitle: "Runs on repository activity",
+    menuDescription: "When a repo gets a push, PR or issue activity",
+    icon: GithubLogo,
+  },
+  {
+    type: "api",
+    label: "API",
+    subtitle: "Runs when your code calls an endpoint",
+    menuDescription: "An authenticated POST from your own systems",
+    icon: Globe,
+  },
 ];
 
-function triggerTypeIcon(type: LoopSchemas.LoopTriggerTypeEnum) {
-  switch (type) {
-    case "schedule":
-      return <CalendarBlank size={14} className="text-gray-10" />;
-    case "github":
-      return <GithubLogo size={14} className="text-gray-10" />;
-    case "api":
-      return <Globe size={14} className="text-gray-10" />;
-  }
-}
-
-function configForType(
-  type: LoopSchemas.LoopTriggerTypeEnum,
-): LoopSchemas.LoopTriggerConfig {
-  switch (type) {
-    case "schedule":
-      return emptyLoopScheduleTriggerConfig();
-    case "github":
-      return emptyLoopGithubTriggerConfig();
-    case "api":
-      return emptyLoopApiTriggerConfig();
-  }
+function triggerTypeMeta(type: LoopSchemas.LoopTriggerTypeEnum) {
+  return TRIGGER_TYPES.find((t) => t.type === type) ?? TRIGGER_TYPES[0];
 }
 
 interface LoopTriggerEditorProps {
@@ -103,38 +110,96 @@ export function LoopTriggerEditor({
     onChange(triggers.filter((trigger) => trigger.key !== key));
   };
 
-  const addTrigger = () => {
-    onChange([...triggers, defaultLoopScheduleTrigger()]);
+  const addTrigger = (type: LoopSchemas.LoopTriggerTypeEnum) => {
+    onChange([...triggers, defaultLoopTriggerOfType(type)]);
   };
 
   return (
     <Flex direction="column" gap="3">
-      {triggers.map((trigger) => (
-        <TriggerCard
-          key={trigger.key}
-          trigger={trigger}
-          triggerEndpointPath={triggerEndpointPath}
-          disabled={disabled}
-          onChange={(patch) => updateTrigger(trigger.key, patch)}
-          onRemove={() => removeTrigger(trigger.key)}
-        />
-      ))}
-
-      <Button
-        variant="outline"
-        color="gray"
-        size="1"
-        className="self-start"
-        disabled={disabled}
-        onClick={addTrigger}
-      >
-        <Plus size={12} />
-        Add trigger
-      </Button>
+      {triggers.length === 0 ? (
+        <Empty className="py-8">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <CalendarBlank size={24} />
+            </EmptyMedia>
+            <EmptyTitle>No triggers</EmptyTitle>
+            <EmptyDescription>
+              This loop only runs when you start it from its page. Add a trigger
+              to run it automatically.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      ) : (
+        triggers.map((trigger) => (
+          <TriggerCard
+            key={trigger.key}
+            trigger={trigger}
+            triggerEndpointPath={triggerEndpointPath}
+            disabled={disabled}
+            onChange={(patch) => updateTrigger(trigger.key, patch)}
+            onRemove={() => removeTrigger(trigger.key)}
+          />
+        ))
+      )}
+
+      <AddTriggerMenu disabled={disabled} onAdd={addTrigger} />
     </Flex>
   );
 }
 
+function AddTriggerMenu({
+  disabled,
+  onAdd,
+}: {
+  disabled?: boolean;
+  onAdd: (type: LoopSchemas.LoopTriggerTypeEnum) => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="outline"
+            size="default"
+            disabled={disabled}
+            className="self-start text-[13px]"
+          >
+            <Plus size={13} />
+            Add trigger
+          </Button>
+        }
+      />
+      <DropdownMenuContent
+        align="start"
+        side="bottom"
+        sideOffset={6}
+        className="w-auto min-w-[280px]"
+      >
+        {TRIGGER_TYPES.map((option) => (
+          <DropdownMenuItem
+            key={option.type}
+            onClick={() => onAdd(option.type)}
+            render={
+              <ItemMenuItem size="xs" className="w-full">
+                <ItemMedia variant="icon" className="mt-2 ml-2">
+                  <option.icon size={16} />
+                </ItemMedia>
+                <ItemContent variant="menuItem">
+                  <ItemTitle>{option.label}</ItemTitle>
+                  <ItemDescription className="whitespace-nowrap leading-none">
+                    {option.menuDescription}
+                  </ItemDescription>
+                </ItemContent>
+              </ItemMenuItem>
+            }
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 function TriggerCard({
   trigger,
   triggerEndpointPath,
@@ -148,75 +213,106 @@ function TriggerCard({
   onChange: (patch: Partial<LoopTriggerDraft>) => void;
   onRemove: () => void;
 }) {
-  const isValid = isTriggerDraftValid(trigger);
+  const meta = triggerTypeMeta(trigger.type);
+  const Icon = meta.icon;
+  const invalidMessage = isTriggerDraftValid(trigger)
+    ? null
+    : trigger.type === "github"
+      ? "Pick a repository and at least one event to finish this trigger."
+      : "Set when this trigger fires.";
 
   return (
     <Flex
       direction="column"
-      gap="3"
-      className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) p-3"
+      className="overflow-hidden rounded-(--radius-3) border border-border bg-(--gray-1)"
     >
-      <Flex align="center" justify="between" gap="2">
-        <Flex align="center" gap="2" className="min-w-0">
-          {triggerTypeIcon(trigger.type)}
-          <Box className="min-w-[160px]">
-            <SettingsOptionSelect
-              value={trigger.type}
-              options={TRIGGER_TYPE_OPTIONS}
-              disabled={disabled}
-              ariaLabel="Trigger type"
-              onValueChange={(value) => {
-                const type = value as LoopSchemas.LoopTriggerTypeEnum;
-                onChange({ type, config: configForType(type) });
-              }}
-            />
-          </Box>
+      <Flex align="center" gap="3" className="px-4 py-3">
+        <Flex
+          align="center"
+          justify="center"
+          className="size-8 shrink-0 rounded-(--radius-2) bg-(--gray-3)"
+        >
+          <Icon size={16} className="text-gray-11" />
         </Flex>
-        <Flex align="center" gap="2">
-          <Switch
-            checked={trigger.enabled}
-            onCheckedChange={(checked) => onChange({ enabled: checked })}
-            disabled={disabled}
-            aria-label={trigger.enabled ? "Disable trigger" : "Enable trigger"}
-          />
-          <IconButton
-            variant="ghost"
-            color="gray"
-            size="1"
-            aria-label="Remove trigger"
-            disabled={disabled}
-            onClick={onRemove}
-          >
-            <Trash size={14} />
-          </IconButton>
+        <Flex direction="column" className="min-w-0 flex-1">
+          <Text className="font-medium text-[13px] text-gray-12">
+            {meta.label}
+          </Text>
+          <Text className="truncate text-[12px] text-gray-10">
+            {meta.subtitle}
+          </Text>
         </Flex>
+        <Switch
+          checked={trigger.enabled}
+          onCheckedChange={(checked) => onChange({ enabled: checked })}
+          disabled={disabled}
+          aria-label={trigger.enabled ? "Disable trigger" : "Enable trigger"}
+        />
+        <IconButton
+          variant="ghost"
+          color="gray"
+          size="1"
+          aria-label="Remove trigger"
+          disabled={disabled}
+          onClick={onRemove}
+        >
+          <Trash size={15} />
+        </IconButton>
       </Flex>
 
-      {!isValid ? (
-        <Text className="text-(--red-11) text-[11px]">
-          This trigger is missing required fields.
-        </Text>
-      ) : null}
+      <Box
+        className={`border-border border-t px-4 py-4 ${
+          trigger.enabled ? "" : "opacity-60"
+        }`}
+      >
+        {trigger.type === "schedule" ? (
+          <ScheduleTriggerFields
+            config={trigger.config as LoopSchemas.LoopScheduleTriggerConfig}
+            disabled={disabled}
+            onChange={(config) => onChange({ config })}
+          />
+        ) : null}
 
-      {trigger.type === "schedule" ? (
-        <ScheduleTriggerFields
-          config={trigger.config as LoopSchemas.LoopScheduleTriggerConfig}
-          disabled={disabled}
-          onChange={(config) => onChange({ config })}
-        />
-      ) : null}
+        {trigger.type === "github" ? (
+          <GithubTriggerFields
+            config={trigger.config as LoopSchemas.LoopGithubTriggerConfig}
+            disabled={disabled}
+            onChange={(config) => onChange({ config })}
+          />
+        ) : null}
 
-      {trigger.type === "github" ? (
-        <GithubTriggerFields
-          config={trigger.config as LoopSchemas.LoopGithubTriggerConfig}
-          disabled={disabled}
-          onChange={(config) => onChange({ config })}
-        />
+        {trigger.type === "api" ? (
+          <ApiTriggerFields triggerEndpointPath={triggerEndpointPath} />
+        ) : null}
+      </Box>
+
+      {invalidMessage ? (
+        <Flex
+          align="center"
+          gap="2"
+          className="border-border border-t px-4 py-2"
+        >
+          <Warning size={13} className="shrink-0 text-(--red-11)" />
+          <Text className="text-(--red-11) text-[12px]">{invalidMessage}</Text>
+        </Flex>
       ) : null}
+    </Flex>
+  );
+}
 
-      {trigger.type === "api" ? (
-        <ApiTriggerFields triggerEndpointPath={triggerEndpointPath} />
-      ) : null}
+function SubField({
+  label,
+  className,
+  children,
+}: {
+  label: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <Flex direction="column" gap="1" className={className}>
+      <Text className="font-medium text-[12px] text-gray-11">{label}</Text>
+      {children}
     </Flex>
   );
 }
@@ -303,93 +399,90 @@ function ScheduleTriggerFields({
     setRecurring(next, time, weekday);
   };
 
-  const timeInput = (
-    <input
-      type="time"
-      disabled={disabled}
-      value={time}
-      className="h-8 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-2 text-[12.5px] text-gray-12"
-      onChange={(e) => {
-        if (
-          !e.target.value ||
-          frequency === "once" ||
-          frequency === "hourly" ||
-          frequency === "custom"
-        )
-          return;
-        setRecurring(frequency, e.target.value, weekday);
-      }}
-    />
-  );
-
   return (
-    <Flex direction="column" gap="2">
-      <Flex align="center" gap="2" wrap="wrap">
-        <Box className="min-w-[150px]">
+    <Flex direction="column" gap="3">
+      <Flex gap="3" wrap="wrap">
+        <SubField label="Frequency" className="w-[150px]">
           <SettingsOptionSelect
             value={frequency}
             options={frequencyOptions}
             disabled={disabled}
+            size="lg"
             ariaLabel="Frequency"
             onValueChange={handleFrequencyChange}
           />
-        </Box>
-
-        {frequency === "custom" ? (
-          <Text className="rounded-(--radius-1) border border-border bg-(--gray-2) px-1.5 py-0.5 text-[12px] text-gray-12 [font-family:var(--font-mono)]">
-            {config.cron_expression}
-          </Text>
-        ) : null}
+        </SubField>
 
         {frequency === "daily" ||
         frequency === "weekdays" ||
-        frequency === "weekly"
-          ? timeInput
-          : null}
+        frequency === "weekly" ? (
+          <SubField label="Time">
+            <input
+              type="time"
+              disabled={disabled}
+              value={time}
+              className="h-8 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-2.5 text-[13px] text-gray-12"
+              onChange={(e) => {
+                if (!e.target.value) return;
+                setRecurring(frequency, e.target.value, weekday);
+              }}
+            />
+          </SubField>
+        ) : null}
 
         {frequency === "weekly" ? (
-          <Box className="min-w-[140px]">
+          <SubField label="Day" className="w-[150px]">
             <SettingsOptionSelect
               value={weekday}
               options={WEEKDAY_OPTIONS}
               disabled={disabled}
+              size="lg"
               ariaLabel="Day of week"
               onValueChange={(value) => setRecurring("weekly", time, value)}
             />
-          </Box>
+          </SubField>
         ) : null}
 
         {frequency === "once" ? (
-          <input
-            type="datetime-local"
-            disabled={disabled}
-            className="h-8 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-2 text-[12.5px] text-gray-12"
-            value={config.run_at ? toDatetimeLocal(config.run_at) : ""}
-            onChange={(e) =>
-              onChange({
-                run_at: e.target.value
-                  ? new Date(e.target.value).toISOString()
-                  : undefined,
-              })
-            }
-          />
+          <SubField label="Date and time">
+            <input
+              type="datetime-local"
+              disabled={disabled}
+              className="h-8 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-2.5 text-[13px] text-gray-12"
+              value={config.run_at ? toDatetimeLocal(config.run_at) : ""}
+              onChange={(e) =>
+                onChange({
+                  run_at: e.target.value
+                    ? new Date(e.target.value).toISOString()
+                    : undefined,
+                })
+              }
+            />
+          </SubField>
         ) : null}
       </Flex>
 
+      {frequency === "custom" ? (
+        <Text className="self-start rounded-(--radius-1) border border-border bg-(--gray-2) px-2 py-1 text-[12px] text-gray-12 [font-family:var(--font-mono)]">
+          {config.cron_expression}
+        </Text>
+      ) : null}
+
       {frequency !== "once" ? (
-        <Flex direction="column" gap="1">
-          <Text className="text-[11px] text-gray-9">Timezone</Text>
+        <SubField label="Timezone">
           <TimezonePicker
             value={timezone}
             disabled={disabled}
-            className="w-[240px] max-w-full"
+            size="lg"
+            className="w-[260px] max-w-full"
             onValueChange={(value) => onChange({ ...config, timezone: value })}
           />
-        </Flex>
+        </SubField>
       ) : null}
 
       {nextRun && nextRunLabel ? (
         <Flex align="center" gap="2" className="text-[12px]">
+          <Clock size={13} className="text-gray-10" />
           <Text className="text-gray-10">Next run</Text>
           <TimezoneTimestamp
             timestamp={nextRun}
@@ -410,6 +503,33 @@ function toDatetimeLocal(iso: string): string {
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
 }
 
+const GITHUB_EVENT_OPTIONS: {
+  value: LoopSchemas.LoopGithubTriggerEventEnum;
+  label: string;
+  description: string;
+}[] = [
+  {
+    value: "push",
+    label: "Push",
+    description: "Commits are pushed to the repository",
+  },
+  {
+    value: "pull_request",
+    label: "Pull request activity",
+    description: "A PR is opened, updated, merged or closed",
+  },
+  {
+    value: "issues",
+    label: "Issue activity",
+    description: "An issue is opened, edited or closed",
+  },
+  {
+    value: "issue_comment",
+    label: "Issue comment",
+    description: "A comment is added on an issue or PR",
+  },
+];
+
 function GithubTriggerFields({
   config,
   disabled,
@@ -430,9 +550,8 @@ function GithubTriggerFields({
   };
 
   return (
-    <Flex direction="column" gap="2">
-      <Flex direction="column" gap="1">
-        <Text className="text-[12px] text-gray-10">Repository</Text>
+    <Flex direction="column" gap="3">
+      <SubField label="Repository">
         <LoopRepositoryPicker
           value={
             config.repository
@@ -451,29 +570,34 @@ function GithubTriggerFields({
             })
           }
         />
-      </Flex>
+      </SubField>
 
-      <Flex direction="column" gap="1">
-        <Text className="text-[12px] text-gray-10">Events</Text>
-        <Flex direction="column" gap="1">
+      <SubField label="Run when">
+        <Flex direction="column" gap="2">
           {GITHUB_EVENT_OPTIONS.map((option) => (
             <Text
               key={option.value}
               as="label"
-              className="flex items-center gap-2 text-[12.5px] text-gray-12"
+              className="flex items-start gap-2.5"
             >
               <Checkbox
+                className="mt-0.5"
                 checked={config.events.includes(option.value)}
                 disabled={disabled}
                 onCheckedChange={(checked) =>
                   toggleEvent(option.value, checked === true)
                 }
               />
-              {option.label}
+              <span className="flex flex-col">
+                <span className="text-[13px] text-gray-12">{option.label}</span>
+                <span className="text-[12px] text-gray-10">
+                  {option.description}
+                </span>
+              </span>
             </Text>
           ))}
         </Flex>
-      </Flex>
+      </SubField>
     </Flex>
   );
 }
@@ -484,16 +608,21 @@ function ApiTriggerFields({
   triggerEndpointPath: string | null;
 }) {
   return (
-    <Flex direction="column" gap="2">
-      <Text className="text-[12.5px] text-gray-11 leading-snug">
+    <Flex direction="column" gap="3">
+      <Text className="text-[12.5px] text-gray-11 leading-relaxed">
         Fires on an authenticated POST from your own code. Authenticate with a
         project secret API key (<code>phs_...</code>) scoped to{" "}
         <code>loop:write</code>. The request body becomes the run's trigger
         context.
       </Text>
       {triggerEndpointPath ? (
-        <Flex align="center" gap="1">
-          <Text className="rounded-(--radius-1) border border-border bg-(--gray-2) px-1.5 py-0.5 text-[12px] text-gray-12 [font-family:var(--font-mono)]">
+        <Flex
+          align="center"
+          justify="between"
+          gap="2"
+          className="rounded-(--radius-2) border border-border bg-(--gray-2) px-3 py-2"
+        >
+          <Text className="min-w-0 truncate text-[12px] text-gray-12 [font-family:var(--font-mono)]">
             POST {triggerEndpointPath}
           </Text>
           <CopyButton text={triggerEndpointPath} />
diff --git a/packages/ui/src/features/loops/loopFormTypes.ts b/packages/ui/src/features/loops/loopFormTypes.ts
index 4825680804..84d2f08d34 100644
--- a/packages/ui/src/features/loops/loopFormTypes.ts
+++ b/packages/ui/src/features/loops/loopFormTypes.ts
@@ -108,6 +108,21 @@ export function defaultLoopScheduleTrigger(): LoopTriggerDraft {
   };
 }
 
+export function defaultLoopTriggerOfType(
+  type: LoopSchemas.LoopTriggerTypeEnum,
+): LoopTriggerDraft {
+  if (type === "schedule") return defaultLoopScheduleTrigger();
+  return {
+    key: nextDraftTriggerKey(),
+    type,
+    enabled: true,
+    config:
+      type === "github"
+        ? emptyLoopGithubTriggerConfig()
+        : emptyLoopApiTriggerConfig(),
+  };
+}
+
 export function emptyLoopFormValues(): LoopFormValues {
   return {
     name: "",
diff --git a/packages/ui/src/features/settings/SettingsOptionSelect.tsx b/packages/ui/src/features/settings/SettingsOptionSelect.tsx
index 2f8a16c007..5f8eec01f1 100644
--- a/packages/ui/src/features/settings/SettingsOptionSelect.tsx
+++ b/packages/ui/src/features/settings/SettingsOptionSelect.tsx
@@ -21,6 +21,7 @@ interface SettingsOptionSelectProps {
   ariaLabel: string;
   placeholder?: string;
   className?: string;
+  size?: "sm" | "default" | "lg";
 }
 
 export function SettingsOptionSelect({
@@ -31,6 +32,7 @@ export function SettingsOptionSelect({
   ariaLabel,
   placeholder = "Select…",
   className,
+  size = "sm",
 }: SettingsOptionSelectProps) {
   const selectedLabel =
     options.find((opt) => opt.value === value)?.label ?? placeholder;
@@ -42,10 +44,12 @@ export function SettingsOptionSelect({
           <Button
             type="button"
             variant="outline"
-            size="sm"
+            size={size}
             disabled={disabled}
             aria-label={ariaLabel}
-            className={`w-full justify-between ${className ?? ""}`}
+            className={`w-full justify-between ${
+              size === "sm" ? "" : "text-[13px]"
+            } ${className ?? ""}`}
           >
             <span className="min-w-0 truncate">{selectedLabel}</span>
             <CaretDown
diff --git a/packages/ui/src/primitives/TimezonePicker.tsx b/packages/ui/src/primitives/TimezonePicker.tsx
index 7da4b11a89..69cce4ee7d 100644
--- a/packages/ui/src/primitives/TimezonePicker.tsx
+++ b/packages/ui/src/primitives/TimezonePicker.tsx
@@ -22,6 +22,7 @@ interface TimezonePickerProps {
   onValueChange: (value: string) => void;
   disabled?: boolean;
   className?: string;
+  size?: "sm" | "default" | "lg";
 }
 
 export function TimezonePicker({
@@ -29,6 +30,7 @@ export function TimezonePicker({
   onValueChange,
   disabled,
   className,
+  size = "sm",
 }: TimezonePickerProps) {
   const options = timezoneOptions();
   const selectedOption =
@@ -61,10 +63,12 @@ export function TimezonePicker({
             <Button
               type="button"
               variant="outline"
-              size="sm"
+              size={size}
               disabled={disabled}
               aria-label="Schedule timezone"
-              className="w-full justify-between"
+              className={`w-full justify-between ${
+                size === "sm" ? "" : "text-[13px]"
+              }`}
             >
               <span className="min-w-0 truncate text-left">
                 {selectedOption?.label ?? value}