diff --git a/apps/workshopper/AUTH.md b/apps/workshopper/AUTH.md
index ae99c4d..2ec7531 100644
--- a/apps/workshopper/AUTH.md
+++ b/apps/workshopper/AUTH.md
@@ -56,7 +56,9 @@ An agent or developer must replicate the exact SAML configuration we built for W
 * Copy the SAML configuration block (including `server.forward-headers-strategy: framework`) into their `application.yml`.
 * Create the `SecurityConfig.java` to enable `.saml2Login()` and explicitly permit access to `/saml2/service-provider-metadata/**`.
 * Modify their `application.yml` and `compose.prod.yaml` to mount the exact same central certificate folder (`/opt/hestia/secrets/saml:/app/certs:ro`) and read them via environment variables.
+* **CRITICAL:** Fix the Docker DNS collision in their frontend `nginx.conf`! Both currently proxy to `http://server`, which randomly resolves to the wrong backend on the shared `hestia-edge` network. Change this to their exact unique container names (e.g., `proxy_pass http://examlense-server:8081;` and `proxy_pass http://learninggoalhub-server:8080;`).
 * **CRITICAL:** Update their frontend `nginx.conf` file to proxy `location ~ ^/(v3/api-docs|swagger-ui|saml2|login/saml2/sso)` to the backend server. Otherwise, NGINX will block the SAML traffic!
+* **NOTE:** While editing `compose.prod.yaml`, it is highly recommended to proactively change `POSTGRES_HOST: postgres` to their unique database container names (`examlense-postgres` or `learninggoalhub-postgres`) to prevent future DNS collisions if the database ever joins the edge network.
 * Once deployed, verify that they each generate their own live metadata URLs (e.g., `https://hestia-test.aet.cit.tum.de/learninggoalhub/saml2/service-provider-metadata/tum`).
 
 **2. Host the Privacy Policy:**
diff --git a/apps/workshopper/compose.prod.yaml b/apps/workshopper/compose.prod.yaml
index 2ba801f..eb1187f 100644
--- a/apps/workshopper/compose.prod.yaml
+++ b/apps/workshopper/compose.prod.yaml
@@ -21,7 +21,7 @@ services:
     environment:
       SPRING_PROFILES_ACTIVE: prod
       SPRING_JPA_HIBERNATE_DDL_AUTO: update
-      POSTGRES_HOST: postgres
+      POSTGRES_HOST: workshopper-postgres
       POSTGRES_PORT: 5432
       POSTGRES_DB: ${POSTGRES_DB:-workshopper}
       POSTGRES_USER: ${POSTGRES_USER:-workshopper}
diff --git a/apps/workshopper/frontend/nginx.conf b/apps/workshopper/frontend/nginx.conf
index f20d649..5ea69fd 100644
--- a/apps/workshopper/frontend/nginx.conf
+++ b/apps/workshopper/frontend/nginx.conf
@@ -20,7 +20,7 @@ server {
     }
 
     location /api/ {
-        proxy_pass http://server:8081;
+        proxy_pass http://workshopper-server:8081;
         proxy_set_header Host              $host;
         proxy_set_header X-Real-IP         $remote_addr;
         proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
@@ -34,7 +34,7 @@ server {
     }
 
     location ~ ^/(v3/api-docs|swagger-ui|saml2|login/saml2/sso) {
-        proxy_pass http://server:8081;
+        proxy_pass http://workshopper-server:8081;
         proxy_set_header Host              $host;
         proxy_set_header X-Real-IP         $remote_addr;
         proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
diff --git a/apps/workshopper/frontend/src/components/SessionsDashboard.tsx b/apps/workshopper/frontend/src/components/SessionsDashboard.tsx
index 94d713c..4c03f6e 100644
--- a/apps/workshopper/frontend/src/components/SessionsDashboard.tsx
+++ b/apps/workshopper/frontend/src/components/SessionsDashboard.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { getSessionStatus } from "@/lib/utils";
 import { GraduationCap, BookOpen, Clock, Loader2, Target, Plus, Trash2, Settings, ArrowRight, Play, Archive, FileText, ChevronRight, X, Edit2, CheckCircle2, FileEdit, MoreVertical, Pencil, Presentation, ChevronDown, Sparkles } from "lucide-react";
 import hestiaLogoLight from "@/assets/logos/wordmark-light.svg";
 import hestiaLogoDark from "@/assets/logos/wordmark-dark.svg";
@@ -297,34 +298,22 @@ export default function SessionsDashboard({ onNewSession, onNewLecture, onNewSes
                   {(() => {
                     const isFinished = session.status === "complete" && session.currentStep === "finished";
                     const isReadyForPrep = session.status === "complete" && session.currentStep !== "finished";
-                    const isDraft = session.status !== "complete";
-                    // G-1: status text inside icon container so state is readable in grayscale
-                    const statusShort = isFinished ? "Done" : isReadyForPrep ? "Ready" : "Draft";
+                    const status = getSessionStatus(session);
                     return (
-                      <div className={`flex-shrink-0 w-10 h-10 rounded-xl flex flex-col items-center justify-center transition-colors gap-0 ${isFinished ? "bg-emerald-500/15 text-emerald-500"
-                        : isReadyForPrep ? "bg-blue-500/15 text-blue-500"
-                          : "bg-amber-500/15 text-amber-500"
-                        }`}>
-                        {isFinished ? <CheckCircle2 className="h-4 w-4" /> : isReadyForPrep ? <Sparkles className="h-4 w-4" /> : <FileEdit className="h-4 w-4" />}
-                        <span className="text-[8px] font-bold uppercase tracking-wide leading-none mt-0.5">{statusShort}</span>
+                      <div className={`flex-shrink-0 w-10 h-10 rounded-xl flex flex-col items-center justify-center transition-colors gap-0 ${status.iconClass}`}>
+                        {status.isFinished ? <CheckCircle2 className="h-4 w-4" /> : status.isReadyForPrep ? <Sparkles className="h-4 w-4" /> : <FileEdit className="h-4 w-4" />}
+                        <span className="text-[8px] font-bold uppercase tracking-wide leading-none mt-0.5">{status.statusShort}</span>
                       </div>
                     );
                   })()}
                   <div className="flex-1 min-w-0">
                     {(() => {
-                      const isFinished = session.status === "complete" && session.currentStep === "finished";
-                      const isReadyForPrep = session.status === "complete" && session.currentStep !== "finished";
-                      const statusLabel = isFinished ? "Completed" : isReadyForPrep ? "Ready for preparation" : "In progress";
-                      const statusClass = isFinished
-                        ? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400"
-                        : isReadyForPrep
-                          ? "bg-blue-500/15 text-blue-600 dark:text-blue-400"
-                          : "bg-amber-500/15 text-amber-600 dark:text-amber-400";
+                      const status = getSessionStatus(session);
                       return (
                         <div className="flex items-center gap-2 mb-0.5">
                           <span className="font-display font-semibold text-foreground truncate">{session.title || "Workshop Session"}</span>
-                          <span className={`flex-shrink-0 text-xs font-medium px-2 py-0.5 rounded-full font-body ${statusClass}`}>
-                            {statusLabel}
+                          <span className={`flex-shrink-0 text-xs font-medium px-2 py-0.5 rounded-full font-body ${status.statusClass}`}>
+                            {status.statusLabel}
                           </span>
                         </div>
                       );
diff --git a/apps/workshopper/frontend/src/components/WorkshopGeneratedTimetable.tsx b/apps/workshopper/frontend/src/components/WorkshopGeneratedTimetable.tsx
index 9f4e467..55d3a64 100644
--- a/apps/workshopper/frontend/src/components/WorkshopGeneratedTimetable.tsx
+++ b/apps/workshopper/frontend/src/components/WorkshopGeneratedTimetable.tsx
@@ -27,57 +27,14 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { toast } from "@/hooks/use-toast";
+import { SortableBlockRow } from "./timetable/SortableBlockRow";
+import { InlineEditText } from "./timetable/InlineEditText";
 
-// ── Phase styling ──────────────────────────────────────────────────
-const phaseEmojis: Record<string, string> = {
-  ARRIVE: "👋", ACTIVATE: "💡", INFORM: "🗣️", PROCESS: "🛠️",
-  BREAK: "☕", EVALUATE: "✅", SUMMARY: "🏁", LEARNING_CYCLE: "🎯",
-  CUSTOM: "✏️", BUFFER: "⏳",
-};
-
-const phaseRowColors: Record<string, string> = {
-  ARRIVE: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary",
-  ACTIVATE: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-accent",
-  INFORM: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary/80",
-  PROCESS: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-accent/80",
-  BREAK: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-muted-foreground",
-  EVALUATE: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary/60",
-  SUMMARY: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-accent/60",
-  LEARNING_CYCLE: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary",
-  CUSTOM: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-border",
-  BUFFER: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-muted",
-};
-
-const getStepEmoji = (text: string) => {
-  const t = text.toLowerCase();
-  if (t.includes("lecture") || t.includes("presentation") || t.includes("explain") || t.includes("concept")) return "🧑‍🏫";
-  if (t.includes("prompt") || t.includes("question") || t.includes("q&a") || t.includes("quiz")) return "❓";
-  if (t.includes("activity") || t.includes("exercise") || t.includes("practice")) return "🛠️";
-  if (t.includes("discuss") || t.includes("debate") || t.includes("share")) return "💬";
-  if (t.includes("brainstorm") || t.includes("ideate")) return "💡";
-  if (t.includes("review") || t.includes("feedback") || t.includes("evaluate")) return "✅";
-  if (t.includes("welcome") || t.includes("intro")) return "👋";
-  if (t.includes("wrap") || t.includes("summary") || t.includes("conclusion")) return "🏁";
-  if (t.includes("break") || t.includes("pause")) return "☕";
-  if (t.includes("read") || t.includes("case study")) return "📖";
-  if (t.includes("video") || t.includes("watch")) return "🎥";
-  if (t.includes("role play") || t.includes("simulate")) return "🎭";
-  if (t.includes("icebreaker") || t.includes("game")) return "🎲";
-  return "✨";
-};
-
-const getStepColorClass = (text: string) => {
-  return "bg-card border-border/60";
-};
-
-const DEFAULT_ACTIVITIES = [
-  "Group Discussion", "Case Study", "Role Play",
-  "Hands-on Practice", "Quiz / Polls", "Q&A Session",
-  "Peer Review", "Brainstorming", "Think-Pair-Share",
-];
+import { phaseEmojis, phaseRowColors, getStepEmoji, getStepColorClass, DEFAULT_ACTIVITIES } from "@/lib/constants";
+import { parseStepDuration } from "@/lib/utils";
 
 // ── Editing state ──────────────────────────────────────────────────
-type EditTarget =
+export type EditTarget =
   | { type: "sessionTitle" }
   | { type: "title"; blockId: string }
   | { type: "step"; blockId: string; sectionIdx: number; stepIdx: number }
@@ -87,7 +44,7 @@ type EditTarget =
   | null;
 
 // ── Internal block with stable dnd ID ─────────────────────────────
-interface DndActivityBlock extends ActivityBlock {
+export interface DndActivityBlock extends ActivityBlock {
   dndId: string;
   lgIndex?: number;
 }
@@ -102,295 +59,9 @@ interface Props {
   onSaveSession?: (session: WorkshopSession) => void;
 }
 
-// ── Inline editable text ───────────────────────────────────────────
-function InlineEditText({
-  value, editing, onStartEdit, onSave, multiline = false, className = "", inputClassName = "text-sm px-2 py-0.5", boxStyle = false
-}: {
-  value: string;
-  editing: boolean;
-  onStartEdit: () => void;
-  onSave: (v: string) => void;
-  multiline?: boolean;
-  className?: string;
-  inputClassName?: string;
-  boxStyle?: boolean;
-}) {
-  const [draft, setDraft] = useState(value);
-  const ref = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (editing) {
-      setDraft(value);
-      setTimeout(() => ref.current?.focus(), 30);
-    }
-  }, [editing, value]);
-
-  const commit = () => onSave(draft);
-
-  if (editing) {
-    if (multiline) {
-      return (
-        <textarea
-          ref={ref as React.Ref<HTMLTextAreaElement>}
-          value={draft}
-          onChange={e => setDraft(e.target.value)}
-          onBlur={commit}
-          onKeyDown={e => { if (e.key === "Escape") onSave(value); }}
-          rows={3}
-          className={`w-full text-sm bg-background border border-primary/60 rounded-md p-2 resize-none focus:outline-none focus:ring-1 focus:ring-primary shadow-sm ${className}`}
-        />
-      );
-    }
-    return (
-      <input
-        ref={ref as React.Ref<HTMLInputElement>}
-        value={draft}
-        onChange={e => setDraft(e.target.value)}
-        onBlur={commit}
-        onKeyDown={e => { if (e.key === "Enter") commit(); if (e.key === "Escape") onSave(value); }}
-        className={`font-body font-semibold bg-background border border-primary/60 rounded-md focus:outline-none focus:ring-1 focus:ring-primary ${inputClassName} ${className}`}
-      />
-    );
-  }
-
-  return (
-    <span
-      className={`cursor-text select-text ${boxStyle ? "inline-block border border-border/60 rounded px-1 py-0.5 bg-background/50 hover:bg-background transition-colors" : ""} ${className}`}
-      onDoubleClick={e => { e.stopPropagation(); onStartEdit(); }}
-      onClick={e => {
-        if (boxStyle) {
-          e.stopPropagation();
-          onStartEdit();
-        }
-      }}
-      title={boxStyle ? "Click to edit" : "Double-click to edit"}
-    >
-      {value || (boxStyle ? "0" : "Click to edit...")}
-    </span>
-  );
-}
-
-// ── Sortable block row ─────────────────────────────────────────────
-function SortableBlockRow({
-  block, isExpanded, editing, meta, isRegenerating, selectedActivities,
-  onToggleExpand, onEditTitle, onSaveTitle, onEditStep, onSaveStep,
-  onEditStepTime, onSaveStepTime,
-  onEditBlockDuration, onSaveBlockDuration, onEditSectionDuration, onSaveSectionDuration,
-  onDeleteBlock, onSwitchActivity, onAddStep, onDeleteStep,
-}: {
-  block: DndActivityBlock;
-  isExpanded: boolean;
-  editing: EditTarget;
-  meta: WorkshopInput;
-  isRegenerating: boolean;
-  selectedActivities: string[];
-  onToggleExpand: () => void;
-  onEditTitle: () => void;
-  onSaveTitle: (v: string) => void;
-  onEditStep: (sectionIdx: number, stepIdx: number) => void;
-  onSaveStep: (sectionIdx: number, stepIdx: number, v: string) => void;
-  onEditStepTime: (sectionIdx: number, stepIdx: number) => void;
-  onSaveStepTime: (sectionIdx: number, stepIdx: number, v: string) => void;
-  onEditBlockDuration: () => void;
-  onSaveBlockDuration: (v: string) => void;
-  onEditSectionDuration: (sectionIdx: number) => void;
-  onSaveSectionDuration: (sectionIdx: number, v: string) => void;
-  onDeleteBlock: () => void;
-  onSwitchActivity: (method: string) => void;
-  onAddStep: (text: string) => void;
-  onDeleteStep: (sectionIdx: number, stepIdx: number) => void;
-}) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.dndId });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.45 : 1,
-    zIndex: isDragging ? 10 : undefined,
-  };
-
-  const colorClass = phaseRowColors[block.phase] || "bg-muted/30 before:bg-transparent";
-  const allMethods = Array.from(new Set([
-    ...(block.methods || []),
-    ...(block.sections || []).flatMap(s => s.methods || []),
-  ])).filter(m => m && !m.toLowerCase().includes("lecture") && !m.toLowerCase().includes("presentation"));
-
-  const isTitleEditing = editing?.type === "title" && editing.blockId === block.dndId;
-
-  return (
-    <div ref={setNodeRef} style={style} className="mb-2">
-      <Collapsible open={isExpanded} onOpenChange={onToggleExpand}>
-        <div className={`flex flex-col p-3 border border-border/60 rounded-md transition-colors overflow-hidden relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] ${colorClass} ${isDragging ? "shadow-lg ring-2 ring-primary/30" : ""}`}>
-          {/* Main row */}
-          <div className="flex items-center gap-3">
-            {/* Drag handle */}
-            <div {...attributes} {...listeners} className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground shrink-0 touch-none">
-              <GripVertical className="h-5 w-5" />
-            </div>
-
-            {/* Emoji + Title + Methods */}
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2 flex-wrap">
-                <span className="text-base shrink-0">{phaseEmojis[block.phase] || "✨"}</span>
-                <InlineEditText
-                  value={block.phaseLabel || block.phase}
-                  editing={isTitleEditing}
-                  onStartEdit={onEditTitle}
-                  onSave={onSaveTitle}
-                  className="font-body font-semibold text-sm"
-                />
-                {allMethods.length > 0 && (
-                  <div className="flex items-center gap-1 flex-wrap">
-                    <div className="h-3 w-[1px] bg-border/60 mx-0.5 shrink-0" />
-                    {allMethods.map((m, j) => (
-                      <DropdownMenu key={j}>
-                        <DropdownMenuTrigger asChild>
-                          <div
-                            role="button"
-                            onClick={e => e.stopPropagation()}
-                            onPointerDown={e => e.stopPropagation()}
-                            className="inline-flex items-center gap-1 whitespace-nowrap rounded-md border h-6 px-2 text-[10px] font-medium bg-primary/10 text-primary border-primary/20 cursor-pointer hover:bg-primary/20 transition-colors shrink-0"
-                            title="Click to switch activity"
-                          >
-                            {isRegenerating ? <Loader2 className="h-3 w-3 animate-spin" /> : null}
-                            {m} <ChevronDown className="h-2.5 w-2.5 opacity-50" />
-                          </div>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent onClick={e => e.stopPropagation()}>
-                          {Array.from(new Set([...selectedActivities, ...DEFAULT_ACTIVITIES])).map(act => (
-                            <DropdownMenuItem key={act} onClick={e => { e.stopPropagation(); onSwitchActivity(act); }}>
-                              Switch to {act}
-                            </DropdownMenuItem>
-                          ))}
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Duration + expand + delete */}
-            <div className="flex items-center gap-1.5 shrink-0">
-              {block.sections && block.sections.length > 0 && block.phase !== "BREAK" && block.phase !== "BUFFER" ? (
-                <input
-                  type="text"
-                  readOnly
-                  value={block.duration}
-                  onClick={() => {
-                    if (!isExpanded) onToggleExpand();
-                  }}
-                  className="w-8 text-right text-xs font-mono border border-border/60 rounded px-1 py-0.5 bg-muted/50 text-muted-foreground cursor-pointer hover:bg-muted focus:outline-none transition-colors"
-                  title="Click to expand and edit detailed times"
-                />
-              ) : (
-                <InlineEditText
-                  value={block.duration.toString()}
-                  editing={editing?.type === "blockDuration" && editing.blockId === block.dndId}
-                  onStartEdit={onEditBlockDuration}
-                  onSave={onSaveBlockDuration}
-                  className="w-8 text-right text-xs font-mono"
-                  boxStyle
-                />
-              )}
-              <span className="text-[10px] text-muted-foreground font-mono -ml-0.5">m</span>
-              {block.phase !== "BREAK" && block.phase !== "BUFFER" ? (
-                <CollapsibleTrigger asChild>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 ml-1">
-                    {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-                  </Button>
-                </CollapsibleTrigger>
-              ) : (
-                <div className="h-8 w-8 ml-1" />
-              )}
-              <Button
-                variant="ghost" size="icon"
-                className="h-7 w-7 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/10 transition-colors shrink-0"
-                onClick={onDeleteBlock}
-                title="Delete block"
-              >
-                <Trash2 className="h-3.5 w-3.5" />
-              </Button>
-            </div>
-          </div>
-
-          {/* Expanded: sections and steps */}
-          <CollapsibleContent className="mt-3 pl-10 pr-2 pb-2 space-y-3">
-            {(block.sections || []).map((section, sIdx) => (
-                <div key={sIdx}>
-                  {block.phase === "LEARNING_CYCLE" && (
-                    <div className="flex items-center gap-2 mb-1.5">
-                      <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{section.title}</span>
-                    </div>
-                  )}
-                  <div className="space-y-1">
-                    {(section.steps || []).map((step, stIdx) => {
-                      const isStepEditing = editing?.type === "step" &&
-                        editing.blockId === block.dndId &&
-                        editing.sectionIdx === sIdx &&
-                        editing.stepIdx === stIdx;
-                      const isStepTimeEditing = editing?.type === "stepTime" &&
-                        editing.blockId === block.dndId &&
-                        editing.sectionIdx === sIdx &&
-                        editing.stepIdx === stIdx;
-                      const match = step.match(/^(\d+)\s*(?:min|m)(?:utes?)?\s*(?:—|-|–|:)?\s*(.*)/i);
-                      const timeVal = match ? match[1] : "";
-                      const contentText = match ? match[2] : step;
-                      const subEmoji = getStepEmoji(contentText);
-                      const subColorClass = getStepColorClass(contentText);
+// ── Inline editable text component removed and imported ───────────────────────────────────────────
 
-                      return (
-                        <div key={stIdx} className={`flex items-start gap-2 group px-2 py-1.5 rounded-lg border ${subColorClass} shadow-sm`}>
-                          <span className="text-sm mt-0.5 opacity-80" title="Activity Type">{subEmoji}</span>
-                          <InlineEditText
-                            value={contentText}
-                            editing={isStepEditing}
-                            onStartEdit={() => onEditStep(sIdx, stIdx)}
-                            onSave={v => onSaveStep(sIdx, stIdx, v)}
-                            className="flex-1 text-sm text-foreground/85 leading-snug py-0.5"
-                          />
-                          <div className="flex items-center gap-1 shrink-0 opacity-80 group-hover:opacity-100 transition-opacity">
-                            <InlineEditText
-                              value={timeVal || "0"}
-                              editing={isStepTimeEditing}
-                              onStartEdit={() => onEditStepTime(sIdx, stIdx)}
-                              onSave={v => onSaveStepTime(sIdx, stIdx, v)}
-                              className="w-8 text-right text-xs font-mono"
-                              boxStyle
-                            />
-                            <span className="text-[10px] text-muted-foreground font-mono">m</span>
-                            <Button 
-                              variant="ghost" size="icon" 
-                              className="h-5 w-5 ml-1 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity" 
-                              onClick={() => onDeleteStep(sIdx, stIdx)}
-                            >
-                              <Trash2 className="h-3 w-3" />
-                            </Button>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              ))}
-              <div className="flex items-center gap-3 pl-2 mt-2 group">
-                <Plus className="h-3.5 w-3.5 text-muted-foreground group-focus-within:text-primary transition-colors" />
-                <input 
-                  placeholder="Add detailed step..." 
-                  className="flex-1 text-sm bg-transparent border-b border-transparent focus:border-primary/50 focus:outline-none py-0.5 text-foreground/85 placeholder:text-muted-foreground/50 transition-colors"
-                  onKeyDown={e => {
-                    if (e.key === "Enter" && e.currentTarget.value.trim()) {
-                      onAddStep(e.currentTarget.value.trim());
-                      e.currentTarget.value = "";
-                    }
-                  }}
-                />
-              </div>
-            </CollapsibleContent>
-        </div>
-      </Collapsible>
-    </div>
-  );
-}
+// ── Sortable block row component removed and imported ─────────────────────────────────────────────
 
 // ── Main component ─────────────────────────────────────────────────
 export default function WorkshopGeneratedTimetable({ session: initialSession, goals, meta, onBack, onNext, onSaveSession }: Props) {
@@ -490,10 +161,7 @@ export default function WorkshopGeneratedTimetable({ session: initialSession, go
             return `${num} min - ${contentText}`;
           });
         }
-        const newDuration = steps.reduce((acc, st) => {
-          const m = st.match(/^(\d+)/);
-          return acc + (m ? parseInt(m[1], 10) : 0);
-        }, 0);
+        const newDuration = steps.reduce((acc, st) => acc + parseStepDuration(st), 0);
         const finalDuration = steps.length > 0 ? newDuration : (sec.duration || 0);
         return { ...sec, steps, duration: finalDuration };
       });
@@ -525,10 +193,7 @@ export default function WorkshopGeneratedTimetable({ session: initialSession, go
       const sections = b.sections.map((sec, si) => {
         if (si !== sectionIdx) return sec;
         const steps = (sec.steps || []).filter((_, ti) => ti !== stepIdx);
-        const newDuration = steps.reduce((acc, st) => {
-          const m = st.match(/^(\d+)/);
-          return acc + (m ? parseInt(m[1], 10) : 0);
-        }, 0);
+        const newDuration = steps.reduce((acc, st) => acc + parseStepDuration(st), 0);
         return { ...sec, steps, duration: newDuration };
       });
       const newBlockDuration = sections.reduce((acc, sec) => acc + (sec.duration || 0), 0);
diff --git a/apps/workshopper/frontend/src/components/WorkshopPreparation.tsx b/apps/workshopper/frontend/src/components/WorkshopPreparation.tsx
index 81fcbfe..5e48d0e 100644
--- a/apps/workshopper/frontend/src/components/WorkshopPreparation.tsx
+++ b/apps/workshopper/frontend/src/components/WorkshopPreparation.tsx
@@ -18,10 +18,7 @@ interface Props {
   onDone: (tasks?: string[]) => void;
 }
 
-const phaseEmojis: Record<string, string> = {
-  ARRIVE: "👋", ACTIVATE: "💡", INFORM: "🗣️", PROCESS: "🛠️",
-  BREAK: "☕", EVALUATE: "✅", SUMMARY: "🏁", LEARNING_CYCLE: "🎯",
-};
+import { phaseEmojis, getMechanicDescription } from "@/lib/constants";
 
 export default function WorkshopPreparation({ session, goals = [], meta, completedTasks: initialTasks = [], slidesCache, setSlidesCache, onUpdateTasks, onBack, onDone }: Props) {
   const [completedTasks, setCompletedTasks] = useState<Set<string>>(new Set(initialTasks));
@@ -33,25 +30,7 @@ export default function WorkshopPreparation({ session, goals = [], meta, complet
   const [isKanbanOpen, setIsKanbanOpen] = useState(false);
   const [isSlideOpen, setIsSlideOpen] = useState(false);
 
-  const getMechanicDescription = (mechanic: string) => {
-    const m = String(mechanic).toLowerCase();
-    if (m.includes("think-pair-share") || m.includes("think pair share")) return "A three-step structure: individuals first reflect alone, then discuss with a partner, then share with the wider group. Balances independent thinking with collaborative discussion.";
-    if (m.includes("brainstorm")) return "A free-flowing idea-generation session where quantity and creativity are prioritized over immediate judgment. Useful for problem-solving and innovation.";
-    if (m.includes("role play") || m.includes("role-play")) return "Participants act out defined roles or scenarios to practice skills, explore perspectives, or simulate real-life interactions in a low-stakes environment. Great for building empathy and interpersonal skills.";
-    if (m.includes("case study")) return "An in-depth analysis of a real or realistic scenario, where participants examine context, decisions, and outcomes to extract practical lessons. Ideal for applying theory to real-world situations.";
-    if (m.includes("group discussion") || m.includes("discussion")) return "An open conversation among participants to explore a topic collaboratively, share perspectives, and build on each other's ideas. Best for surfacing diverse viewpoints and encouraging active listening.";
-    if (m.includes("hands-on practice") || m.includes("practice")) return "A guided, practical exercise where participants directly apply a skill or tool themselves rather than just observing. Reinforces learning through doing and immediate feedback.";
-    if (m.includes("quiz") || m.includes("poll")) return "Short, structured questions used to check understanding, gather opinions, or gauge the room in real time. Quick to run and useful for engagement or knowledge checks.";
-    if (m.includes("peer review") || m.includes("peer feedback")) return "Participants evaluate and give constructive feedback on each other's work. Builds critical thinking and exposes people to different approaches and standards.";
-    if (m.includes("q&a") || m.includes("questions") || m.includes("q & a")) return "A dedicated segment where participants can ask questions and receive direct answers from a facilitator or expert. Clarifies doubts and encourages open dialogue.";
-    if (m.includes("world cafe")) return "A structured conversational process where participants rotate between small table groups to discuss different aspects of a central theme.";
-    if (m.includes("jigsaw")) return "Participants become experts in one aspect of a topic in a specialized group, then re-form into new groups to teach their peers what they learned.";
-    if (m.includes("fishbowl")) return "A small group discusses a topic in a central circle while the rest of the participants observe from an outer circle, occasionally swapping places.";
-    if (m.includes("gallery walk")) return "Participants walk around the room to view, discuss, and add comments to charts or posters created by different groups.";
-    if (m.includes("icebreaker")) return "A short, interactive activity designed to help participants get to know each other and feel comfortable in the group.";
-    if (m.includes("snowball")) return "Individuals pair up to discuss an idea, then join another pair to form a group of four, continuing to double in size to synthesize ideas.";
-    return "A structured pedagogical activity designed to engage participants, encourage interaction, and facilitate active learning of the workshop material.";
-  };
+  // getMechanicDescription imported from constants
 
   // Keyboard navigation for lightbox
   useEffect(() => {
diff --git a/apps/workshopper/frontend/src/components/timetable/InlineEditText.tsx b/apps/workshopper/frontend/src/components/timetable/InlineEditText.tsx
new file mode 100644
index 0000000..5443b50
--- /dev/null
+++ b/apps/workshopper/frontend/src/components/timetable/InlineEditText.tsx
@@ -0,0 +1,68 @@
+import React, { useState, useRef, useEffect } from "react";
+
+export function InlineEditText({
+  value, editing, onStartEdit, onSave, multiline = false, className = "", inputClassName = "text-sm px-2 py-0.5", boxStyle = false
+}: {
+  value: string;
+  editing: boolean;
+  onStartEdit: () => void;
+  onSave: (v: string) => void;
+  multiline?: boolean;
+  className?: string;
+  inputClassName?: string;
+  boxStyle?: boolean;
+}) {
+  const [draft, setDraft] = useState(value);
+  const ref = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (editing) {
+      setDraft(value);
+      setTimeout(() => ref.current?.focus(), 30);
+    }
+  }, [editing, value]);
+
+  const commit = () => onSave(draft);
+
+  if (editing) {
+    if (multiline) {
+      return (
+        <textarea
+          ref={ref as React.Ref<HTMLTextAreaElement>}
+          value={draft}
+          onChange={e => setDraft(e.target.value)}
+          onBlur={commit}
+          onKeyDown={e => { if (e.key === "Escape") onSave(value); }}
+          rows={3}
+          className={`w-full text-sm bg-background border border-primary/60 rounded-md p-2 resize-none focus:outline-none focus:ring-1 focus:ring-primary shadow-sm ${className}`}
+        />
+      );
+    }
+    return (
+      <input
+        ref={ref as React.Ref<HTMLInputElement>}
+        value={draft}
+        onChange={e => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={e => { if (e.key === "Enter") commit(); if (e.key === "Escape") onSave(value); }}
+        className={`font-body font-semibold bg-background border border-primary/60 rounded-md focus:outline-none focus:ring-1 focus:ring-primary ${inputClassName} ${className}`}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={`cursor-text select-text ${boxStyle ? "inline-block border border-border/60 rounded px-1 py-0.5 bg-background/50 hover:bg-background transition-colors" : ""} ${className}`}
+      onDoubleClick={e => { e.stopPropagation(); onStartEdit(); }}
+      onClick={e => {
+        if (boxStyle) {
+          e.stopPropagation();
+          onStartEdit();
+        }
+      }}
+      title={boxStyle ? "Click to edit" : "Double-click to edit"}
+    >
+      {value || (boxStyle ? "0" : "Click to edit...")}
+    </span>
+  );
+}
diff --git a/apps/workshopper/frontend/src/components/timetable/SortableBlockRow.tsx b/apps/workshopper/frontend/src/components/timetable/SortableBlockRow.tsx
new file mode 100644
index 0000000..2e1d338
--- /dev/null
+++ b/apps/workshopper/frontend/src/components/timetable/SortableBlockRow.tsx
@@ -0,0 +1,237 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  GripVertical, ChevronDown, ChevronUp,
+  Trash2, Plus, Loader2,
+} from "lucide-react";
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { InlineEditText } from "./InlineEditText";
+import { phaseEmojis, phaseRowColors, getStepEmoji, getStepColorClass, DEFAULT_ACTIVITIES } from "@/lib/constants";
+import { EditTarget, DndActivityBlock } from "../WorkshopGeneratedTimetable";
+import { WorkshopInput } from "@/lib/workshop-generator";
+
+export function SortableBlockRow({
+  block, isExpanded, editing, meta, isRegenerating, selectedActivities,
+  onToggleExpand, onEditTitle, onSaveTitle, onEditStep, onSaveStep,
+  onEditStepTime, onSaveStepTime,
+  onEditBlockDuration, onSaveBlockDuration, onEditSectionDuration, onSaveSectionDuration,
+  onDeleteBlock, onSwitchActivity, onAddStep, onDeleteStep,
+}: {
+  block: DndActivityBlock;
+  isExpanded: boolean;
+  editing: EditTarget;
+  meta: WorkshopInput;
+  isRegenerating: boolean;
+  selectedActivities: string[];
+  onToggleExpand: () => void;
+  onEditTitle: () => void;
+  onSaveTitle: (v: string) => void;
+  onEditStep: (sectionIdx: number, stepIdx: number) => void;
+  onSaveStep: (sectionIdx: number, stepIdx: number, v: string) => void;
+  onEditStepTime: (sectionIdx: number, stepIdx: number) => void;
+  onSaveStepTime: (sectionIdx: number, stepIdx: number, v: string) => void;
+  onEditBlockDuration: () => void;
+  onSaveBlockDuration: (v: string) => void;
+  onEditSectionDuration: (sectionIdx: number) => void;
+  onSaveSectionDuration: (sectionIdx: number, v: string) => void;
+  onDeleteBlock: () => void;
+  onSwitchActivity: (method: string) => void;
+  onAddStep: (text: string) => void;
+  onDeleteStep: (sectionIdx: number, stepIdx: number) => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.dndId });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.45 : 1,
+    zIndex: isDragging ? 10 : undefined,
+  };
+
+  const colorClass = phaseRowColors[block.phase] || "bg-muted/30 before:bg-transparent";
+  const allMethods = Array.from(new Set([
+    ...(block.methods || []),
+    ...(block.sections || []).flatMap(s => s.methods || []),
+  ])).filter(m => m && !m.toLowerCase().includes("lecture") && !m.toLowerCase().includes("presentation"));
+
+  const isTitleEditing = editing?.type === "title" && editing.blockId === block.dndId;
+
+  return (
+    <div ref={setNodeRef} style={style} className="mb-2">
+      <Collapsible open={isExpanded} onOpenChange={onToggleExpand}>
+        <div className={`flex flex-col p-3 border border-border/60 rounded-md transition-colors overflow-hidden relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] ${colorClass} ${isDragging ? "shadow-lg ring-2 ring-primary/30" : ""}`}>
+          {/* Main row */}
+          <div className="flex items-center gap-3">
+            {/* Drag handle */}
+            <div {...attributes} {...listeners} className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground shrink-0 touch-none">
+              <GripVertical className="h-5 w-5" />
+            </div>
+
+            {/* Emoji + Title + Methods */}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className="text-base shrink-0">{phaseEmojis[block.phase] || "✨"}</span>
+                <InlineEditText
+                  value={block.phaseLabel || block.phase}
+                  editing={isTitleEditing}
+                  onStartEdit={onEditTitle}
+                  onSave={onSaveTitle}
+                  className="font-body font-semibold text-sm"
+                />
+                {allMethods.length > 0 && (
+                  <div className="flex items-center gap-1 flex-wrap">
+                    <div className="h-3 w-[1px] bg-border/60 mx-0.5 shrink-0" />
+                    {allMethods.map((m, j) => (
+                      <DropdownMenu key={j}>
+                        <DropdownMenuTrigger asChild>
+                          <div
+                            role="button"
+                            onClick={e => e.stopPropagation()}
+                            onPointerDown={e => e.stopPropagation()}
+                            className="inline-flex items-center gap-1 whitespace-nowrap rounded-md border h-6 px-2 text-[10px] font-medium bg-primary/10 text-primary border-primary/20 cursor-pointer hover:bg-primary/20 transition-colors shrink-0"
+                            title="Click to switch activity"
+                          >
+                            {isRegenerating ? <Loader2 className="h-3 w-3 animate-spin" /> : null}
+                            {m} <ChevronDown className="h-2.5 w-2.5 opacity-50" />
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent onClick={e => e.stopPropagation()}>
+                          {Array.from(new Set([...selectedActivities, ...DEFAULT_ACTIVITIES])).map(act => (
+                            <DropdownMenuItem key={act} onClick={e => { e.stopPropagation(); onSwitchActivity(act); }}>
+                              Switch to {act}
+                            </DropdownMenuItem>
+                          ))}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Duration + expand + delete */}
+            <div className="flex items-center gap-1.5 shrink-0">
+              {block.sections && block.sections.length > 0 && block.phase !== "BREAK" && block.phase !== "BUFFER" ? (
+                <input
+                  type="text"
+                  readOnly
+                  value={block.duration}
+                  onClick={() => {
+                    if (!isExpanded) onToggleExpand();
+                  }}
+                  className="w-8 text-right text-xs font-mono border border-border/60 rounded px-1 py-0.5 bg-muted/50 text-muted-foreground cursor-pointer hover:bg-muted focus:outline-none transition-colors"
+                  title="Click to expand and edit detailed times"
+                />
+              ) : (
+                <InlineEditText
+                  value={block.duration.toString()}
+                  editing={editing?.type === "blockDuration" && editing.blockId === block.dndId}
+                  onStartEdit={onEditBlockDuration}
+                  onSave={onSaveBlockDuration}
+                  className="w-8 text-right text-xs font-mono"
+                  boxStyle
+                />
+              )}
+              <span className="text-[10px] text-muted-foreground font-mono -ml-0.5">m</span>
+              {block.phase !== "BREAK" && block.phase !== "BUFFER" ? (
+                <CollapsibleTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 ml-1">
+                    {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                  </Button>
+                </CollapsibleTrigger>
+              ) : (
+                <div className="h-8 w-8 ml-1" />
+              )}
+              <Button
+                variant="ghost" size="icon"
+                className="h-7 w-7 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/10 transition-colors shrink-0"
+                onClick={onDeleteBlock}
+                title="Delete block"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Expanded: sections and steps */}
+          <CollapsibleContent className="mt-3 pl-10 pr-2 pb-2 space-y-3">
+            {(block.sections || []).map((section, sIdx) => (
+                <div key={sIdx}>
+                  {block.phase === "LEARNING_CYCLE" && (
+                    <div className="flex items-center gap-2 mb-1.5">
+                      <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{section.title}</span>
+                    </div>
+                  )}
+                  <div className="space-y-1">
+                    {(section.steps || []).map((step, stIdx) => {
+                      const isStepEditing = editing?.type === "step" &&
+                        editing.blockId === block.dndId &&
+                        editing.sectionIdx === sIdx &&
+                        editing.stepIdx === stIdx;
+                      const isStepTimeEditing = editing?.type === "stepTime" &&
+                        editing.blockId === block.dndId &&
+                        editing.sectionIdx === sIdx &&
+                        editing.stepIdx === stIdx;
+                      const match = step.match(/^(\d+)\s*(?:min|m)(?:utes?)?\s*(?:—|-|–|:)?\s*(.*)/i);
+                      const timeVal = match ? match[1] : "";
+                      const contentText = match ? match[2] : step;
+                      const subEmoji = getStepEmoji(contentText);
+                      const subColorClass = getStepColorClass(contentText);
+
+                      return (
+                        <div key={stIdx} className={`flex items-start gap-2 group px-2 py-1.5 rounded-lg border ${subColorClass} shadow-sm`}>
+                          <span className="text-sm mt-0.5 opacity-80" title="Activity Type">{subEmoji}</span>
+                          <InlineEditText
+                            value={contentText}
+                            editing={isStepEditing}
+                            onStartEdit={() => onEditStep(sIdx, stIdx)}
+                            onSave={v => onSaveStep(sIdx, stIdx, v)}
+                            className="flex-1 text-sm text-foreground/85 leading-snug py-0.5"
+                          />
+                          <div className="flex items-center gap-1 shrink-0 opacity-80 group-hover:opacity-100 transition-opacity">
+                            <InlineEditText
+                              value={timeVal || "0"}
+                              editing={isStepTimeEditing}
+                              onStartEdit={() => onEditStepTime(sIdx, stIdx)}
+                              onSave={v => onSaveStepTime(sIdx, stIdx, v)}
+                              className="w-8 text-right text-xs font-mono"
+                              boxStyle
+                            />
+                            <span className="text-[10px] text-muted-foreground font-mono">m</span>
+                            <Button 
+                              variant="ghost" size="icon" 
+                              className="h-5 w-5 ml-1 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity" 
+                              onClick={() => onDeleteStep(sIdx, stIdx)}
+                            >
+                              <Trash2 className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))}
+              <div className="flex items-center gap-3 pl-2 mt-2 group">
+                <Plus className="h-3.5 w-3.5 text-muted-foreground group-focus-within:text-primary transition-colors" />
+                <input 
+                  placeholder="Add detailed step..." 
+                  className="flex-1 text-sm bg-transparent border-b border-transparent focus:border-primary/50 focus:outline-none py-0.5 text-foreground/85 placeholder:text-muted-foreground/50 transition-colors"
+                  onKeyDown={e => {
+                    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+                      onAddStep(e.currentTarget.value.trim());
+                      e.currentTarget.value = "";
+                    }
+                  }}
+                />
+              </div>
+            </CollapsibleContent>
+        </div>
+      </Collapsible>
+    </div>
+  );
+}
diff --git a/apps/workshopper/frontend/src/lib/constants.ts b/apps/workshopper/frontend/src/lib/constants.ts
new file mode 100644
index 0000000..fa402b1
--- /dev/null
+++ b/apps/workshopper/frontend/src/lib/constants.ts
@@ -0,0 +1,73 @@
+export const phaseEmojis: Record<string, string> = {
+  ARRIVE: "👋",
+  ACTIVATE: "💡",
+  INFORM: "🗣️",
+  PROCESS: "🛠️",
+  BREAK: "☕",
+  EVALUATE: "✅",
+  SUMMARY: "🏁",
+  LEARNING_CYCLE: "🎯",
+  CUSTOM: "✏️",
+  BUFFER: "⏳",
+};
+
+export const phaseRowColors: Record<string, string> = {
+  ARRIVE: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary",
+  ACTIVATE: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-accent",
+  INFORM: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary/80",
+  PROCESS: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-accent/80",
+  BREAK: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-muted-foreground",
+  EVALUATE: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary/60",
+  SUMMARY: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-accent/60",
+  LEARNING_CYCLE: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary",
+  CUSTOM: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-border",
+  BUFFER: "bg-muted/30 relative before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-muted",
+};
+
+export const getStepEmoji = (text: string) => {
+  const t = text.toLowerCase();
+  if (t.includes("lecture") || t.includes("presentation") || t.includes("explain") || t.includes("concept")) return "🧑‍🏫";
+  if (t.includes("prompt") || t.includes("question") || t.includes("q&a") || t.includes("quiz")) return "❓";
+  if (t.includes("activity") || t.includes("exercise") || t.includes("practice")) return "🛠️";
+  if (t.includes("discuss") || t.includes("debate") || t.includes("share")) return "💬";
+  if (t.includes("brainstorm") || t.includes("ideate")) return "💡";
+  if (t.includes("review") || t.includes("feedback") || t.includes("evaluate")) return "✅";
+  if (t.includes("welcome") || t.includes("intro")) return "👋";
+  if (t.includes("wrap") || t.includes("summary") || t.includes("conclusion")) return "🏁";
+  if (t.includes("break") || t.includes("pause")) return "☕";
+  if (t.includes("read") || t.includes("case study")) return "📖";
+  if (t.includes("video") || t.includes("watch")) return "🎥";
+  if (t.includes("role play") || t.includes("simulate")) return "🎭";
+  if (t.includes("icebreaker") || t.includes("game")) return "🎲";
+  return "✨";
+};
+
+export const getStepColorClass = (text: string) => {
+  return "bg-card border-border/60";
+};
+
+export const DEFAULT_ACTIVITIES = [
+  "Group Discussion", "Case Study", "Role Play",
+  "Hands-on Practice", "Quiz / Polls", "Q&A Session",
+  "Peer Review", "Brainstorming", "Think-Pair-Share",
+];
+
+export const getMechanicDescription = (mechanic: string) => {
+  const m = String(mechanic).toLowerCase();
+  if (m.includes("think-pair-share") || m.includes("think pair share")) return "A three-step structure: individuals first reflect alone, then discuss with a partner, then share with the wider group. Balances independent thinking with collaborative discussion.";
+  if (m.includes("brainstorm")) return "A free-flowing idea-generation session where quantity and creativity are prioritized over immediate judgment. Useful for problem-solving and innovation.";
+  if (m.includes("role play") || m.includes("role-play")) return "Participants act out defined roles or scenarios to practice skills, explore perspectives, or simulate real-life interactions in a low-stakes environment. Great for building empathy and interpersonal skills.";
+  if (m.includes("case study")) return "An in-depth analysis of a real or realistic scenario, where participants examine context, decisions, and outcomes to extract practical lessons. Ideal for applying theory to real-world situations.";
+  if (m.includes("group discussion") || m.includes("discussion")) return "An open conversation among participants to explore a topic collaboratively, share perspectives, and build on each other's ideas. Best for surfacing diverse viewpoints and encouraging active listening.";
+  if (m.includes("hands-on practice") || m.includes("practice")) return "A guided, practical exercise where participants directly apply a skill or tool themselves rather than just observing. Reinforces learning through doing and immediate feedback.";
+  if (m.includes("quiz") || m.includes("poll")) return "Short, structured questions used to check understanding, gather opinions, or gauge the room in real time. Quick to run and useful for engagement or knowledge checks.";
+  if (m.includes("peer review") || m.includes("peer feedback")) return "Participants evaluate and give constructive feedback on each other's work. Builds critical thinking and exposes people to different approaches and standards.";
+  if (m.includes("q&a") || m.includes("questions") || m.includes("q & a")) return "A dedicated segment where participants can ask questions and receive direct answers from a facilitator or expert. Clarifies doubts and encourages open dialogue.";
+  if (m.includes("world cafe")) return "A structured conversational process where participants rotate between small table groups to discuss different aspects of a central theme.";
+  if (m.includes("jigsaw")) return "Participants become experts in one aspect of a topic in a specialized group, then re-form into new groups to teach their peers what they learned.";
+  if (m.includes("fishbowl")) return "A small group discusses a topic in a central circle while the rest of the participants observe from an outer circle, occasionally swapping places.";
+  if (m.includes("gallery walk")) return "Participants walk around the room to view, discuss, and add comments to charts or posters created by different groups.";
+  if (m.includes("icebreaker")) return "A short, interactive activity designed to help participants get to know each other and feel comfortable in the group.";
+  if (m.includes("snowball")) return "Individuals pair up to discuss an idea, then join another pair to form a group of four, continuing to double in size to synthesize ideas.";
+  return "A structured pedagogical activity designed to engage participants, encourage interaction, and facilitate active learning of the workshop material.";
+};
diff --git a/apps/workshopper/frontend/src/lib/utils.ts b/apps/workshopper/frontend/src/lib/utils.ts
index bd0c391..3a1a6aa 100644
--- a/apps/workshopper/frontend/src/lib/utils.ts
+++ b/apps/workshopper/frontend/src/lib/utils.ts
@@ -4,3 +4,32 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function parseStepDuration(stepString: string): number {
+  const match = stepString.match(/^(\d+)\s*(?:min|m)(?:utes?)?\s*(?:—|-|–|:)?\s*(.*)/i);
+  return match ? parseInt(match[1], 10) : 0;
+}
+
+export function getSessionStatus(session: any) {
+  const isFinished = session.status === "complete" && session.currentStep === "finished";
+  const isReadyForPrep = session.status === "complete" && session.currentStep !== "finished";
+  const isDraft = session.status !== "complete";
+
+  let statusLabel = "In progress";
+  if (isFinished) statusLabel = "Completed";
+  else if (isReadyForPrep) statusLabel = "Ready for preparation";
+
+  let statusShort = "Draft";
+  if (isFinished) statusShort = "Done";
+  else if (isReadyForPrep) statusShort = "Ready";
+
+  let statusClass = "bg-amber-500/15 text-amber-600 dark:text-amber-400";
+  if (isFinished) statusClass = "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400";
+  else if (isReadyForPrep) statusClass = "bg-blue-500/15 text-blue-600 dark:text-blue-400";
+
+  let iconClass = "bg-amber-500/15 text-amber-500";
+  if (isFinished) iconClass = "bg-emerald-500/15 text-emerald-500";
+  else if (isReadyForPrep) iconClass = "bg-blue-500/15 text-blue-500";
+
+  return { isFinished, isReadyForPrep, isDraft, statusLabel, statusShort, statusClass, iconClass };
+}