From 16572b8f498692a8b356ecbccb3f8589a52c6848 Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Sun, 7 Dec 2025 16:25:34 +0100
Subject: [PATCH] Remove emojis and improve descriptions

---
 apps/web/src/components/WorkflowBuilder.tsx   |  34 +-
 .../web/src/components/WorkflowVisualizer.tsx |  23 +-
 apps/web/src/pages/campaigns/[id].tsx         |  54 +-
 apps/web/src/pages/campaigns/create.tsx       | 501 +++++++++---------
 apps/web/src/pages/workflows/[id].tsx         |  18 +-
 5 files changed, 350 insertions(+), 280 deletions(-)

diff --git a/apps/web/src/components/WorkflowBuilder.tsx b/apps/web/src/components/WorkflowBuilder.tsx
index 7534fcb..1d0bf50 100644
--- a/apps/web/src/components/WorkflowBuilder.tsx
+++ b/apps/web/src/components/WorkflowBuilder.tsx
@@ -16,7 +16,21 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import type {WorkflowStep} from '@plunk/db';
-import {Clock, GitBranch, LogOut, Mail, Plus, Settings, Trash2, UserCog, Webhook} from 'lucide-react';
+import {
+  Clock,
+  GitBranch,
+  Hourglass,
+  Lightbulb,
+  Link,
+  LogOut,
+  Mail,
+  Plus,
+  Settings,
+  Timer,
+  Trash2,
+  UserCog,
+  Webhook
+} from 'lucide-react';
 import {useCallback, useEffect, useMemo, useState} from 'react';
 import dagre from 'dagre';
 import {network} from '../lib/network';
@@ -245,7 +259,7 @@ function CustomNode({
         {data.template && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="font-medium">📧</span>
+              <Mail className="h-3 w-3" />
               <span className="truncate">{data.template.name}</span>
             </div>
           </div>
@@ -253,7 +267,7 @@ function CustomNode({
         {data.type === 'DELAY' && data.config?.amount && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="font-medium">⏱️</span>
+              <Timer className="h-3 w-3" />
               <span>
                 Wait {data.config.amount} {data.config.unit}
               </span>
@@ -264,7 +278,7 @@ function CustomNode({
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="text-xs text-neutral-600">
               <div className="flex items-center gap-1 mb-1">
-                <span className="font-medium">🔀</span>
+                <GitBranch className="h-3 w-3" />
                 <span className="font-mono text-[10px] truncate">
                   {/* Handle both legacy format {field, type} and new format (string) */}
                   {typeof data.config.field === 'object' && data.config.field !== null && 'field' in data.config.field
@@ -281,7 +295,7 @@ function CustomNode({
         {data.type === 'WAIT_FOR_EVENT' && data.config?.eventName && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="font-medium">⏳</span>
+              <Hourglass className="h-3 w-3" />
               <span className="truncate">{data.config.eventName}</span>
             </div>
           </div>
@@ -289,7 +303,7 @@ function CustomNode({
         {data.type === 'WEBHOOK' && data.config?.url && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="font-medium">🔗</span>
+              <Link className="h-3 w-3" />
               <span className="truncate text-[10px]">
                 {data.config.method || 'POST'} {data.config.url}
               </span>
@@ -453,7 +467,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
             target: transition.toStepId,
             type: 'smoothstep',
             animated: step.type === 'DELAY' || step.type === 'WAIT_FOR_EVENT',
-            label: isConditional ? (branch === 'yes' ? '✓ Yes' : '✗ No') : undefined,
+            label: isConditional ? (branch === 'yes' ? 'Yes' : 'No') : undefined,
             labelStyle: {
               fill: branch === 'yes' ? '#16a34a' : branch === 'no' ? '#dc2626' : '#64748b',
               fontWeight: 600,
@@ -498,7 +512,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
             target: `${step.id}-add-yes`,
             type: 'smoothstep',
             animated: false,
-            label: '✓ Yes',
+            label: 'Yes',
             labelStyle: {fill: '#16a34a', fontWeight: 600, fontSize: 12},
             labelBgStyle: {fill: '#fff', fillOpacity: 0.95},
             labelBgPadding: [8, 4] as [number, number],
@@ -515,7 +529,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
             target: `${step.id}-add-no`,
             type: 'smoothstep',
             animated: false,
-            label: '✗ No',
+            label: 'No',
             labelStyle: {fill: '#dc2626', fontWeight: 600, fontSize: 12},
             labelBgStyle: {fill: '#fff', fillOpacity: 0.95},
             labelBgPadding: [8, 4] as [number, number],
@@ -775,7 +789,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
               className="bg-blue-50 border border-blue-200 px-4 py-2.5 rounded-lg shadow-lg"
             >
               <div className="flex items-center gap-2 text-sm text-blue-900">
-                <span>💡</span>
+                <Lightbulb className="h-4 w-4" />
                 <span>Click the + buttons to add and connect steps!</span>
               </div>
             </Panel>
diff --git a/apps/web/src/components/WorkflowVisualizer.tsx b/apps/web/src/components/WorkflowVisualizer.tsx
index 2ab599d..2358df5 100644
--- a/apps/web/src/components/WorkflowVisualizer.tsx
+++ b/apps/web/src/components/WorkflowVisualizer.tsx
@@ -14,7 +14,7 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import type {WorkflowStep} from '@plunk/db';
-import {Clock, GitBranch, LogOut, Mail, UserCog, Webhook} from 'lucide-react';
+import {AlertTriangle, Clock, GitBranch, Hourglass, Link, LogOut, Mail, Timer, UserCog, Webhook} from 'lucide-react';
 import {useEffect, useMemo} from 'react';
 import dagre from 'dagre';
 
@@ -176,7 +176,7 @@ function CustomNode({
         {data.template && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="font-medium">📧</span>
+              <Mail className="h-3 w-3" />
               <span className="truncate">{data.template.name}</span>
             </div>
           </div>
@@ -184,7 +184,7 @@ function CustomNode({
         {data.type === 'DELAY' && data.config?.amount && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="font-medium">⏱️</span>
+              <Timer className="h-3 w-3" />
               <span>
                 Wait {data.config.amount} {data.config.unit}
               </span>
@@ -193,15 +193,16 @@ function CustomNode({
         )}
         {data.type === 'CONDITION' && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
-            <div className="text-xs text-neutral-600">
-              <span className="font-medium">🔀</span> If/Else Branch
+            <div className="flex items-center gap-1 text-xs text-neutral-600">
+              <GitBranch className="h-3 w-3" />
+              <span>If/Else Branch</span>
             </div>
           </div>
         )}
         {data.type === 'WAIT_FOR_EVENT' && data.config?.eventName && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="font-medium">⏳</span>
+              <Hourglass className="h-3 w-3" />
               <span className="truncate">{data.config.eventName}</span>
             </div>
           </div>
@@ -209,7 +210,7 @@ function CustomNode({
         {data.type === 'WEBHOOK' && data.config?.url && (
           <div className="mt-3 pt-3 border-t border-neutral-100">
             <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="font-medium">🔗</span>
+              <Link className="h-3 w-3" />
               <span className="truncate">{data.config.method || 'POST'}</span>
             </div>
           </div>
@@ -333,7 +334,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
             target: transition.toStepId,
             type: 'smoothstep',
             animated: false,
-            label: isConditional ? (branch === 'yes' ? '✓ Yes' : '✗ No') : undefined,
+            label: isConditional ? (branch === 'yes' ? 'Yes' : 'No') : undefined,
             labelStyle: {
               fill: branch === 'yes' ? '#16a34a' : branch === 'no' ? '#dc2626' : '#64748b',
               fontWeight: 600,
@@ -376,7 +377,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
             target: `${step.id}-yes-end`,
             type: 'smoothstep',
             animated: false,
-            label: '✓ Yes',
+            label: 'Yes',
             labelStyle: {
               fill: '#16a34a',
               fontWeight: 600,
@@ -409,7 +410,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
             target: `${step.id}-no-end`,
             type: 'smoothstep',
             animated: false,
-            label: '✗ No',
+            label: 'No',
             labelStyle: {
               fill: '#dc2626',
               fontWeight: 600,
@@ -518,7 +519,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
             className="bg-amber-50 border border-amber-200 px-4 py-2.5 rounded-lg shadow-lg"
           >
             <div className="flex items-center gap-2 text-sm text-amber-900">
-              <span>⚠️</span>
+              <AlertTriangle className="h-4 w-4" />
               <span>No transitions found. Connect your steps to see the flow.</span>
             </div>
           </Panel>
diff --git a/apps/web/src/pages/campaigns/[id].tsx b/apps/web/src/pages/campaigns/[id].tsx
index 5729cad..172c71a 100644
--- a/apps/web/src/pages/campaigns/[id].tsx
+++ b/apps/web/src/pages/campaigns/[id].tsx
@@ -23,6 +23,7 @@ import {
   Select,
   SelectContent,
   SelectItem,
+  SelectItemWithDescription,
   SelectTrigger,
   SelectValue,
   StickySaveBar
@@ -343,20 +344,36 @@ export default function CampaignDetailsPage() {
                   <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
                   <Badge variant="secondary">Draft</Badge>
                 </div>
-                <p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your campaign before sending</p>
+                <p className="text-neutral-500 mt-1 text-sm sm:text-base">
+                  Make changes to your campaign before sending
+                </p>
               </div>
             </div>
             <div className="flex flex-col sm:flex-row sm:items-center gap-3">
               <div className="flex-1">
-                {!hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>}
-                {hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>}
+                {!hasChanges && !isSubmitting && (
+                  <span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>
+                )}
+                {hasChanges && !isSubmitting && (
+                  <span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>
+                )}
               </div>
               <div className="flex gap-2">
-                <Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none">
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => setShowDeleteDialog(true)}
+                  className="flex-1 sm:flex-none"
+                >
                   <Trash2 className="h-4 w-4" />
                   <span className="hidden sm:inline">Delete</span>
                 </Button>
-                <Button type="submit" disabled={!hasChanges || isSubmitting} variant="outline" className="flex-1 sm:flex-none">
+                <Button
+                  type="submit"
+                  disabled={!hasChanges || isSubmitting}
+                  variant="outline"
+                  className="flex-1 sm:flex-none"
+                >
                   <Save className="h-4 w-4" />
                   <span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save'}</span>
                   <span className="sm:hidden">Save</span>
@@ -470,9 +487,21 @@ export default function CampaignDetailsPage() {
                       <SelectValue placeholder="Select audience type" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value={CampaignAudienceType.ALL}>All Subscribed Contacts</SelectItem>
-                      <SelectItem value={CampaignAudienceType.SEGMENT}>Segment</SelectItem>
-                      <SelectItem value={CampaignAudienceType.FILTERED}>Filtered</SelectItem>
+                      <SelectItemWithDescription
+                        value={CampaignAudienceType.ALL}
+                        title="All Subscribed Contacts"
+                        description="Send to everyone who hasn't unsubscribed"
+                      />
+                      <SelectItemWithDescription
+                        value={CampaignAudienceType.SEGMENT}
+                        title="Segment"
+                        description="Target a defined group of contacts"
+                      />
+                      <SelectItemWithDescription
+                        value={CampaignAudienceType.FILTERED}
+                        title="Filtered"
+                        description="Use advanced filter conditions"
+                      />
                     </SelectContent>
                   </Select>
                 </div>
@@ -499,9 +528,12 @@ export default function CampaignDetailsPage() {
                         {segments &&
                           segments.length > 0 &&
                           segments.map(segment => (
-                            <SelectItem key={segment.id} value={segment.id}>
-                              {segment.name} ({segment.memberCount.toLocaleString()} contacts)
-                            </SelectItem>
+                            <SelectItemWithDescription
+                              key={segment.id}
+                              value={segment.id}
+                              title={segment.name}
+                              description={`${segment.memberCount.toLocaleString()} contacts`}
+                            />
                           ))}
                       </SelectContent>
                     </Select>
diff --git a/apps/web/src/pages/campaigns/create.tsx b/apps/web/src/pages/campaigns/create.tsx
index e0a1592..edcac9c 100644
--- a/apps/web/src/pages/campaigns/create.tsx
+++ b/apps/web/src/pages/campaigns/create.tsx
@@ -9,9 +9,9 @@ import {
   Label,
   Select,
   SelectContent,
-  SelectItem,
+  SelectItemWithDescription,
   SelectTrigger,
-  SelectValue,
+  SelectValue
 } from '@plunk/ui';
 import type {Segment} from '@plunk/db';
 import {CampaignAudienceType} from '@plunk/db';
@@ -93,269 +93,286 @@ export default function CreateCampaignPage() {
   return (
     <>
       <NextSeo title="Create Campaign" />
-    <DashboardLayout>
-      <div className="space-y-6">
-        {/* Header */}
-        <div className="flex items-center gap-3 sm:gap-4">
-          <Link href="/campaigns">
-            <Button variant="ghost" size="sm">
-              <ArrowLeft className="h-4 w-4" />
-            </Button>
-          </Link>
-          <div className="flex-1 min-w-0">
-            <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Campaign</h1>
-            <p className="text-neutral-500 mt-1 text-sm sm:text-base">Create a new email campaign to send to your contacts</p>
+      <DashboardLayout>
+        <div className="space-y-6">
+          {/* Header */}
+          <div className="flex items-center gap-3 sm:gap-4">
+            <Link href="/campaigns">
+              <Button variant="ghost" size="sm">
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+            </Link>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Campaign</h1>
+              <p className="text-neutral-500 mt-1 text-sm sm:text-base">
+                Create a new email campaign to send to your contacts
+              </p>
+            </div>
           </div>
-        </div>
 
-        {/* Form */}
-        <form onSubmit={handleSubmit}>
-          <div className="grid gap-6 lg:grid-cols-3">
-            {/* Left Column - Settings (2/3 width) */}
-            <div className="lg:col-span-2 space-y-6">
-              {/* Basic Information */}
-              <Card>
-                <CardHeader>
-                  <StepHeader stepNumber={1} title="Basic Information" description="Name and describe your campaign" />
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="name">
-                      Campaign Name <span className="text-red-500">*</span>
-                    </Label>
-                    <Input
-                      id="name"
-                      placeholder="e.g., Spring Sale Announcement"
-                      value={name}
-                      onChange={e => setName(e.target.value)}
-                      required
+          {/* Form */}
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-6 lg:grid-cols-3">
+              {/* Left Column - Settings (2/3 width) */}
+              <div className="lg:col-span-2 space-y-6">
+                {/* Basic Information */}
+                <Card>
+                  <CardHeader>
+                    <StepHeader
+                      stepNumber={1}
+                      title="Basic Information"
+                      description="Name and describe your campaign"
                     />
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="description">Description (Optional)</Label>
-                    <textarea
-                      id="description"
-                      placeholder="Internal notes about this campaign"
-                      value={description}
-                      onChange={e => setDescription(e.target.value)}
-                      rows={2}
-                      className="w-full px-3 py-2 border border-neutral-200 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary"
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Email Settings */}
-              <Card>
-                <CardHeader>
-                  <StepHeader
-                    stepNumber={2}
-                    title="Email Settings"
-                    description="Configure sender information and subject"
-                  />
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <EmailSettings
-                    from={from}
-                    fromName={fromName}
-                    replyTo={replyTo}
-                    onFromChange={setFrom}
-                    onFromNameChange={setFromName}
-                    onReplyToChange={setReplyTo}
-                    fromNamePlaceholder={activeProject?.name || 'Your Company'}
-                  />
-
-                  <div className="space-y-2">
-                    <Label htmlFor="subject">
-                      Email Subject <span className="text-red-500">*</span>
-                    </Label>
-                    <Input
-                      id="subject"
-                      placeholder="e.g., Introducing our Spring Sale!"
-                      value={subject}
-                      onChange={e => setSubject(e.target.value)}
-                      required
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Email Content */}
-              <Card>
-                <CardHeader>
-                  <StepHeader stepNumber={3} title="Email Content" description="Design your email message" />
-                </CardHeader>
-                <CardContent>
-                  <div className="space-y-2">
-                    <Label htmlFor="body">
-                      Email Body <span className="text-red-500">*</span>
-                    </Label>
-                    <EmailEditor
-                      value={body}
-                      onChange={setBody}
-                      placeholder="<h1>Welcome!</h1><p>Your email content here...</p>"
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Audience Selection */}
-              <Card>
-                <CardHeader>
-                  <StepHeader stepNumber={4} title="Audience" description="Choose who will receive this campaign" />
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="audienceType">
-                      Audience Type <span className="text-red-500">*</span>
-                    </Label>
-                    <Select
-                      value={audienceType}
-                      onValueChange={value => setAudienceType(value as CampaignAudienceType)}
-                      required
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select audience type" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value={CampaignAudienceType.ALL}>All Subscribed Contacts</SelectItem>
-                        <SelectItem value={CampaignAudienceType.SEGMENT}>Specific Segment</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-
-                  {audienceType === CampaignAudienceType.SEGMENT && (
+                  </CardHeader>
+                  <CardContent className="space-y-4">
                     <div className="space-y-2">
-                      <Label htmlFor="segment">
-                        Select Segment <span className="text-red-500">*</span>
+                      <Label htmlFor="name">
+                        Campaign Name <span className="text-red-500">*</span>
                       </Label>
-                      <Select value={segmentId} onValueChange={setSegmentId} required>
+                      <Input
+                        id="name"
+                        placeholder="e.g., Spring Sale Announcement"
+                        value={name}
+                        onChange={e => setName(e.target.value)}
+                        required
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="description">Description (Optional)</Label>
+                      <textarea
+                        id="description"
+                        placeholder="Internal notes about this campaign"
+                        value={description}
+                        onChange={e => setDescription(e.target.value)}
+                        rows={2}
+                        className="w-full px-3 py-2 border border-neutral-200 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary"
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Email Settings */}
+                <Card>
+                  <CardHeader>
+                    <StepHeader
+                      stepNumber={2}
+                      title="Email Settings"
+                      description="Configure sender information and subject"
+                    />
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <EmailSettings
+                      from={from}
+                      fromName={fromName}
+                      replyTo={replyTo}
+                      onFromChange={setFrom}
+                      onFromNameChange={setFromName}
+                      onReplyToChange={setReplyTo}
+                      fromNamePlaceholder={activeProject?.name || 'Your Company'}
+                    />
+
+                    <div className="space-y-2">
+                      <Label htmlFor="subject">
+                        Email Subject <span className="text-red-500">*</span>
+                      </Label>
+                      <Input
+                        id="subject"
+                        placeholder="e.g., Introducing our Spring Sale!"
+                        value={subject}
+                        onChange={e => setSubject(e.target.value)}
+                        required
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Email Content */}
+                <Card>
+                  <CardHeader>
+                    <StepHeader stepNumber={3} title="Email Content" description="Design your email message" />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      <Label htmlFor="body">
+                        Email Body <span className="text-red-500">*</span>
+                      </Label>
+                      <EmailEditor
+                        value={body}
+                        onChange={setBody}
+                        placeholder="<h1>Welcome!</h1><p>Your email content here...</p>"
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Audience Selection */}
+                <Card>
+                  <CardHeader>
+                    <StepHeader stepNumber={4} title="Audience" description="Choose who will receive this campaign" />
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="audienceType">
+                        Audience Type <span className="text-red-500">*</span>
+                      </Label>
+                      <Select
+                        value={audienceType}
+                        onValueChange={value => setAudienceType(value as CampaignAudienceType)}
+                        required
+                      >
                         <SelectTrigger>
-                          <SelectValue placeholder="Choose a segment" />
+                          <SelectValue placeholder="Select audience type" />
                         </SelectTrigger>
                         <SelectContent>
-                          {segments?.map(segment => (
-                            <SelectItem key={segment.id} value={segment.id}>
-                              {segment.name} ({segment.memberCount.toLocaleString()} contacts)
-                            </SelectItem>
-                          ))}
+                          <SelectItemWithDescription
+                            value={CampaignAudienceType.ALL}
+                            title="All Subscribed Contacts"
+                            description="Send to everyone who hasn't unsubscribed"
+                          />
+                          <SelectItemWithDescription
+                            value={CampaignAudienceType.SEGMENT}
+                            title="Specific Segment"
+                            description="Target a defined group of contacts"
+                          />
                         </SelectContent>
                       </Select>
-                      {segments?.length === 0 && (
-                        <p className="text-sm text-neutral-500 mt-2">
-                          No segments found.{' '}
-                          <Link href="/segments/new" className="text-primary hover:underline">
-                            Create one first
-                          </Link>
-                        </p>
-                      )}
-                    </div>
-                  )}
-
-                  {audienceType === CampaignAudienceType.SEGMENT && estimatedRecipients > 0 && (
-                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
-                      <Users className="h-5 w-5 text-blue-600 mt-0.5" />
-                      <div>
-                        <p className="text-sm font-medium text-blue-900">
-                          {estimatedRecipients.toLocaleString()} recipients
-                        </p>
-                        <p className="text-xs text-blue-700 mt-1">
-                          This campaign will be sent to all contacts in the selected segment
-                        </p>
-                      </div>
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            </div>
-
-            {/* Right Column - Summary & Actions (1/3 width) */}
-            <div className="space-y-6">
-              {/* Campaign Summary */}
-              <Card className="sticky top-6">
-                <CardHeader>
-                  <CardTitle className="text-lg">Campaign Summary</CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-3 text-sm">
-                    <div className="flex justify-between py-2 border-b border-neutral-100">
-                      <span className="text-neutral-500">Status</span>
-                      <span className="font-medium">Draft</span>
                     </div>
 
-                    {name && (
-                      <div className="flex justify-between py-2 border-b border-neutral-100">
-                        <span className="text-neutral-500">Name</span>
-                        <span className="font-medium text-right truncate ml-2" title={name}>
-                          {name}
-                        </span>
+                    {audienceType === CampaignAudienceType.SEGMENT && (
+                      <div className="space-y-2">
+                        <Label htmlFor="segment">
+                          Select Segment <span className="text-red-500">*</span>
+                        </Label>
+                        <Select value={segmentId} onValueChange={setSegmentId} required>
+                          <SelectTrigger>
+                            <SelectValue placeholder="Choose a segment" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {segments?.map(segment => (
+                              <SelectItemWithDescription
+                                key={segment.id}
+                                value={segment.id}
+                                title={segment.name}
+                                description={`${segment.memberCount.toLocaleString()} contacts`}
+                              />
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {segments?.length === 0 && (
+                          <p className="text-sm text-neutral-500 mt-2">
+                            No segments found.{' '}
+                            <Link href="/segments/new" className="text-primary hover:underline">
+                              Create one first
+                            </Link>
+                          </p>
+                        )}
                       </div>
                     )}
 
-                    {subject && (
-                      <div className="py-2 border-b border-neutral-100">
-                        <span className="text-neutral-500 block mb-1">Subject</span>
-                        <span className="font-medium text-sm">{subject}</span>
-                      </div>
-                    )}
-
-                    {from && (
-                      <div className="flex justify-between py-2 border-b border-neutral-100">
-                        <span className="text-neutral-500">From</span>
-                        <span className="font-medium text-right truncate ml-2" title={from}>
-                          {from}
-                        </span>
-                      </div>
-                    )}
-
-                    <div className="flex justify-between py-2 border-b border-neutral-100">
-                      <span className="text-neutral-500">Audience</span>
-                      <span className="font-medium">
-                        {audienceType === CampaignAudienceType.ALL ? 'All Contacts' : 'Segment'}
-                      </span>
-                    </div>
-
                     {audienceType === CampaignAudienceType.SEGMENT && estimatedRecipients > 0 && (
-                      <div className="flex justify-between py-2">
-                        <span className="text-neutral-500">Recipients</span>
-                        <span className="font-medium">{estimatedRecipients.toLocaleString()}</span>
+                      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
+                        <Users className="h-5 w-5 text-blue-600 mt-0.5" />
+                        <div>
+                          <p className="text-sm font-medium text-blue-900">
+                            {estimatedRecipients.toLocaleString()} recipients
+                          </p>
+                          <p className="text-xs text-blue-700 mt-1">
+                            This campaign will be sent to all contacts in the selected segment
+                          </p>
+                        </div>
                       </div>
                     )}
-                  </div>
+                  </CardContent>
+                </Card>
+              </div>
 
-                  {/* Info Note */}
-                  <div className="bg-neutral-50 border border-neutral-200 rounded-lg p-3 mt-4">
-                    <p className="text-xs text-neutral-600 leading-relaxed">
-                      After creating this campaign, you&apos;ll be able to review it and choose when to send it.
-                    </p>
-                  </div>
+              {/* Right Column - Summary & Actions (1/3 width) */}
+              <div className="space-y-6">
+                {/* Campaign Summary */}
+                <Card className="sticky top-6">
+                  <CardHeader>
+                    <CardTitle className="text-lg">Campaign Summary</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="space-y-3 text-sm">
+                      <div className="flex justify-between py-2 border-b border-neutral-100">
+                        <span className="text-neutral-500">Status</span>
+                        <span className="font-medium">Draft</span>
+                      </div>
 
-                  {/* Actions */}
-                  <div className="flex flex-col gap-2 pt-4">
-                    <Button type="submit" disabled={saving} className="w-full">
-                      {saving ? (
-                        <>Creating...</>
-                      ) : (
-                        <>
-                          <Save className="h-4 w-4" />
-                          Create Campaign
-                        </>
+                      {name && (
+                        <div className="flex justify-between py-2 border-b border-neutral-100">
+                          <span className="text-neutral-500">Name</span>
+                          <span className="font-medium text-right truncate ml-2" title={name}>
+                            {name}
+                          </span>
+                        </div>
                       )}
-                    </Button>
-                    <Link href="/campaigns" className="w-full">
-                      <Button type="button" variant="outline" className="w-full">
-                        Cancel
+
+                      {subject && (
+                        <div className="py-2 border-b border-neutral-100">
+                          <span className="text-neutral-500 block mb-1">Subject</span>
+                          <span className="font-medium text-sm">{subject}</span>
+                        </div>
+                      )}
+
+                      {from && (
+                        <div className="flex justify-between py-2 border-b border-neutral-100">
+                          <span className="text-neutral-500">From</span>
+                          <span className="font-medium text-right truncate ml-2" title={from}>
+                            {from}
+                          </span>
+                        </div>
+                      )}
+
+                      <div className="flex justify-between py-2 border-b border-neutral-100">
+                        <span className="text-neutral-500">Audience</span>
+                        <span className="font-medium">
+                          {audienceType === CampaignAudienceType.ALL ? 'All Contacts' : 'Segment'}
+                        </span>
+                      </div>
+
+                      {audienceType === CampaignAudienceType.SEGMENT && estimatedRecipients > 0 && (
+                        <div className="flex justify-between py-2">
+                          <span className="text-neutral-500">Recipients</span>
+                          <span className="font-medium">{estimatedRecipients.toLocaleString()}</span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Info Note */}
+                    <div className="bg-neutral-50 border border-neutral-200 rounded-lg p-3 mt-4">
+                      <p className="text-xs text-neutral-600 leading-relaxed">
+                        After creating this campaign, you&apos;ll be able to review it and choose when to send it.
+                      </p>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex flex-col gap-2 pt-4">
+                      <Button type="submit" disabled={saving} className="w-full">
+                        {saving ? (
+                          <>Creating...</>
+                        ) : (
+                          <>
+                            <Save className="h-4 w-4" />
+                            Create Campaign
+                          </>
+                        )}
                       </Button>
-                    </Link>
-                  </div>
-                </CardContent>
-              </Card>
+                      <Link href="/campaigns" className="w-full">
+                        <Button type="button" variant="outline" className="w-full">
+                          Cancel
+                        </Button>
+                      </Link>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
             </div>
-          </div>
-        </form>
-      </div>
-    </DashboardLayout>
+          </form>
+        </div>
+      </DashboardLayout>
     </>
   );
 }
diff --git a/apps/web/src/pages/workflows/[id].tsx b/apps/web/src/pages/workflows/[id].tsx
index 78fd853..74159f3 100644
--- a/apps/web/src/pages/workflows/[id].tsx
+++ b/apps/web/src/pages/workflows/[id].tsx
@@ -1137,9 +1137,12 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
                 </SelectTrigger>
                 <SelectContent>
                   {templatesData?.templates.map(template => (
-                    <SelectItem key={template.id} value={template.id}>
-                      {template.name}
-                    </SelectItem>
+                    <SelectItemWithDescription
+                      key={template.id}
+                      value={template.id}
+                      title={template.name}
+                      description={`${template.type === 'TRANSACTIONAL' ? 'Transactional' : 'Marketing'} • Subject: ${template.subject}`}
+                    />
                   ))}
                 </SelectContent>
               </Select>
@@ -1752,9 +1755,12 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
                 </SelectTrigger>
                 <SelectContent>
                   {templatesData?.templates.map(template => (
-                    <SelectItem key={template.id} value={template.id}>
-                      {template.name}
-                    </SelectItem>
+                    <SelectItemWithDescription
+                      key={template.id}
+                      value={template.id}
+                      title={template.name}
+                      description={`${template.type === 'TRANSACTIONAL' ? 'Transactional' : 'Marketing'} • Subject: ${template.subject}`}
+                    />
                   ))}
                 </SelectContent>
               </Select>