From 2b87ca7fae5e15213248a1d701a0602de25d4fd6 Mon Sep 17 00:00:00 2001
From: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
Date: Fri, 28 Aug 2026 15:02:48 +0100
Subject: [PATCH 1/5] feat: update contributionStorage for multi drafts and
 guides

Signed-off-by: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
---
 app/src/lib/contributionStorage.ts | 616 +++++++++++++++++++++++++----
 1 file changed, 535 insertions(+), 81 deletions(-)

diff --git a/app/src/lib/contributionStorage.ts b/app/src/lib/contributionStorage.ts
index 5e23daa2..87a220d4 100644
--- a/app/src/lib/contributionStorage.ts
+++ b/app/src/lib/contributionStorage.ts
@@ -7,121 +7,465 @@ import {
   variantContributionSchema,
 } from "@/types/contributions";
 
-const STORAGE_KEYS: Record<ContributionType, string> = {
-  guide: "bluelearn:contrib:guide",
-  variant: "bluelearn:contrib:variant",
-  objective: "bluelearn:contrib:objective",
-};
+/**
+ * All locally stored contribution drafts live under one localStorage key.
+ */
+const STORAGE_KEY = "bluelearn:contrib:drafts";
 
+/**
+ * localDraftId:
+ *   Identifies the draft inside this browser.
+ *
+ * revisionId:
+ *   Identifies the corresponding database revision, if one exists.
+ */
 export interface PersistedContributionDraft<T> {
+  localDraftId: string;
+  type: ContributionType;
   data: T;
   revisionId: string | null;
   step?: string;
   updatedAt: number;
 }
 
-// Checks a draft read back from local storage.
-const persistedDraftSchema = (data: z.ZodType) =>
+/**
+ * Raw localStorage structure.
+ *
+ * Values are unknown until they are validated against the
+ * appropriate contribution schema.
+ */
+type StoredDrafts = Record<string, unknown>;
+
+/**
+ * Creates the complete validation schema for a particular
+ * contribution type.
+ */
+const persistedDraftSchema = <T extends z.ZodType>(
+  type: ContributionType,
+  dataSchema: T
+) =>
   z.object({
-    data,
+    localDraftId: z.string().min(1),
+    type: z.literal(type),
+    data: dataSchema,
     revisionId: z
       .string()
       .nullish()
-      .transform((v) => v ?? null),
+      .transform((value) => value ?? null),
     step: z.string().optional(),
     updatedAt: z.number(),
   });
 
-const DRAFT_SCHEMAS: Record<ContributionType, z.ZodType> = {
-  guide: persistedDraftSchema(guideContributionSchema),
-  variant: persistedDraftSchema(variantContributionSchema),
-  objective: persistedDraftSchema(objectiveContributionSchema),
+/**
+ * Schema used to determine which contribution schema should
+ * validate an individual draft.
+ */
+const draftEnvelopeSchema = z.object({
+  localDraftId: z.string().min(1),
+  type: z.enum(["guide", "variant", "objective"]),
+});
+
+/**
+ * Schemas for each contribution type.
+ *
+ * The literal `type` on each schema creates the discriminated
+ * relationship between `type` and `data`.
+ */
+const DRAFT_SCHEMAS = {
+  guide: persistedDraftSchema("guide", guideContributionSchema),
+  variant: persistedDraftSchema("variant", variantContributionSchema),
+  objective: persistedDraftSchema("objective", objectiveContributionSchema),
 };
 
 /**
- * Safely reads a contribution draft from localStorage.
- * Handles SSR (returns null when window is not defined) and JSON parse errors.
- * A draft that doesn't match the expected shape is dropped and cleared, since
- * loading one into form state crashes the first render that touches it.
+ * Types generated directly from the Zod schemas.
  */
-export function getStoredDraft<T>(
-  type: ContributionType
-): PersistedContributionDraft<T> | null {
-  if (typeof window === "undefined") return null;
+type StoredGuideDraft = z.infer<typeof DRAFT_SCHEMAS.guide>;
+
+type StoredVariantDraft = z.infer<typeof DRAFT_SCHEMAS.variant>;
+
+type StoredObjectiveDraft = z.infer<typeof DRAFT_SCHEMAS.objective>;
+
+type AnyStoredDraft =
+  | StoredGuideDraft
+  | StoredVariantDraft
+  | StoredObjectiveDraft;
+
+/**
+ * Safely reads the complete raw draft store from localStorage.
+ *
+ * Individual drafts are validated later - each contribution
+ * type has a different data schema.
+ */
+function readStoredDrafts(): StoredDrafts {
+  if (typeof window === "undefined") {
+    return {};
+  }
 
-  let parsed: unknown;
   try {
-    const raw = window.localStorage.getItem(STORAGE_KEYS[type]);
-    if (!raw) return null;
-    parsed = JSON.parse(raw);
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+
+    if (!raw) {
+      return {};
+    }
+
+    const parsed: unknown = JSON.parse(raw);
+
+    const result = z.record(z.string(), z.unknown()).safeParse(parsed);
+
+    if (!result.success) {
+      console.warn(
+        "Discarding malformed contribution draft store:",
+        result.error
+      );
+
+      clearAllStoredDrafts();
+      return {};
+    }
+
+    return result.data;
   } catch (error) {
-    console.warn(`Failed to read stored draft for ${type}:`, error);
-    clearStoredDraft(type);
+    console.warn("Failed to read contribution drafts:", error);
+
+    clearAllStoredDrafts();
+    return {};
+  }
+}
+
+/**
+ * Writes the complete draft store to localStorage.
+ */
+function writeStoredDrafts(drafts: StoredDrafts): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(drafts));
+  } catch (error) {
+    console.warn("Failed to save contribution drafts:", error);
+  }
+}
+
+/**
+ * Generates a unique ID for a new local draft.
+ */
+export function createLocalDraftId(): string {
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    return crypto.randomUUID();
+  }
+
+  throw new Error("crypto.randomUUID() is not available in this environment.");
+}
+
+/**
+ * Validates one raw localStorage entry.
+ *
+ * The switch preserves the relationship between
+ * the contribution type and its corresponding data schema.
+ */
+function parseStoredDraft(value: unknown): AnyStoredDraft | null {
+  const envelopeResult = draftEnvelopeSchema.safeParse(value);
+
+  if (!envelopeResult.success) {
+    return null;
+  }
+
+  switch (envelopeResult.data.type) {
+    case "guide": {
+      const result = DRAFT_SCHEMAS.guide.safeParse(value);
+
+      return result.success ? result.data : null;
+    }
+
+    case "variant": {
+      const result = DRAFT_SCHEMAS.variant.safeParse(value);
+
+      return result.success ? result.data : null;
+    }
+
+    case "objective": {
+      const result = DRAFT_SCHEMAS.objective.safeParse(value);
+
+      return result.success ? result.data : null;
+    }
+  }
+}
+
+/**
+ * Gets a single stored guide draft.
+ */
+export function getStoredDraft(
+  localDraftId: string,
+  type: "guide"
+): StoredGuideDraft | null;
+
+/**
+ * Gets a single stored variant draft.
+ */
+export function getStoredDraft(
+  localDraftId: string,
+  type: "variant"
+): StoredVariantDraft | null;
+
+/**
+ * Gets a single stored objective draft.
+ */
+export function getStoredDraft(
+  localDraftId: string,
+  type: "objective"
+): StoredObjectiveDraft | null;
+
+/**
+ * Implementation for getStoredDraft.
+ */
+export function getStoredDraft(
+  localDraftId: string,
+  type: ContributionType
+): AnyStoredDraft | null {
+  if (typeof window === "undefined") {
     return null;
   }
 
-  const result = DRAFT_SCHEMAS[type].safeParse(parsed);
-  if (!result.success) {
+  const drafts = readStoredDrafts();
+  const rawDraft = drafts[localDraftId];
+
+  if (rawDraft === undefined) {
+    return null;
+  }
+
+  const parsedDraft = parseStoredDraft(rawDraft);
+
+  if (!parsedDraft) {
+    console.warn(`Discarding malformed stored draft ${localDraftId}.`);
+
+    delete drafts[localDraftId];
+    writeStoredDrafts(drafts);
+
+    return null;
+  }
+
+  if (parsedDraft.type !== type) {
     console.warn(
-      `Discarding malformed stored draft for ${type}:`,
-      result.error
+      `Stored draft ${localDraftId} has type "${parsedDraft.type}" ` +
+        `but "${type}" was requested.`
     );
-    clearStoredDraft(type);
+
     return null;
   }
 
-  return result.data as PersistedContributionDraft<T>;
+  return parsedDraft;
 }
 
 /**
- * Safely writes a contribution draft to localStorage.
+ * Gets every valid stored draft.
+ *
+ * Malformed drafts are removed from localStorage.
  */
-export function setStoredDraft<T>(
-  type: ContributionType,
-  draft: PersistedContributionDraft<T>
-): void {
-  if (typeof window === "undefined") return;
+export function getAllStoredDrafts(): Array<AnyStoredDraft> {
+  if (typeof window === "undefined") {
+    return [];
+  }
 
-  try {
-    window.localStorage.setItem(STORAGE_KEYS[type], JSON.stringify(draft));
-  } catch (error) {
-    console.warn(`Failed to save draft to localStorage for ${type}:`, error);
+  const drafts = readStoredDrafts();
+
+  const validDrafts: Array<AnyStoredDraft> = [];
+
+  let changed = false;
+
+  for (const [localDraftId, rawDraft] of Object.entries(drafts)) {
+    const parsedDraft = parseStoredDraft(rawDraft);
+
+    if (!parsedDraft) {
+      console.warn(`Discarding malformed stored draft ${localDraftId}.`);
+
+      delete drafts[localDraftId];
+      changed = true;
+      continue;
+    }
+
+    /**
+     * The localStorage key and localDraftId should agree.
+     */
+    if (parsedDraft.localDraftId !== localDraftId) {
+      console.warn(
+        `Discarding stored draft with mismatched localDraftId: ${localDraftId}.`
+      );
+
+      delete drafts[localDraftId];
+      changed = true;
+      continue;
+    }
+
+    validDrafts.push(parsedDraft);
   }
+
+  if (changed) {
+    writeStoredDrafts(drafts);
+  }
+
+  return validDrafts.sort((a, b) => b.updatedAt - a.updatedAt);
 }
 
 /**
- * Clears the stored draft for a given contribution type from localStorage.
+ * Gets all stored guide drafts.
  */
-export function clearStoredDraft(type: ContributionType): void {
-  if (typeof window === "undefined") return;
+export function getStoredDraftsByType(type: "guide"): Array<StoredGuideDraft>;
 
-  try {
-    window.localStorage.removeItem(STORAGE_KEYS[type]);
-  } catch (error) {
-    console.warn(`Failed to clear stored draft for ${type}:`, error);
+/**
+ * Gets all stored variant drafts.
+ */
+export function getStoredDraftsByType(
+  type: "variant"
+): Array<StoredVariantDraft>;
+
+/**
+ * Gets all stored objective drafts.
+ */
+export function getStoredDraftsByType(
+  type: "objective"
+): Array<StoredObjectiveDraft>;
+
+/**
+ * Implementation for getStoredDraftsByType.
+ */
+export function getStoredDraftsByType(
+  type: ContributionType
+): Array<AnyStoredDraft> {
+  switch (type) {
+    case "guide":
+      return getAllStoredDrafts().filter(
+        (draft): draft is StoredGuideDraft => draft.type === "guide"
+      );
+
+    case "variant":
+      return getAllStoredDrafts().filter(
+        (draft): draft is StoredVariantDraft => draft.type === "variant"
+      );
+
+    case "objective":
+      return getAllStoredDrafts().filter(
+        (draft): draft is StoredObjectiveDraft => draft.type === "objective"
+      );
   }
 }
 
 /**
- * Checks if a stored draft exists for the given contribution type.
+ * Saves or updates one stored guide draft.
  */
-export function hasStoredDraft(type: ContributionType): boolean {
-  if (typeof window === "undefined") return false;
+export function setStoredDraft(draft: StoredGuideDraft): void;
 
-  try {
-    return window.localStorage.getItem(STORAGE_KEYS[type]) !== null;
-  } catch {
+/**
+ * Saves or updates one stored variant draft.
+ */
+export function setStoredDraft(draft: StoredVariantDraft): void;
+
+/**
+ * Saves or updates one stored objective draft.
+ */
+export function setStoredDraft(draft: StoredObjectiveDraft): void;
+
+export function setStoredDraft(draft: AnyStoredDraft): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const parsedDraft = parseStoredDraft(draft);
+
+  if (!parsedDraft) {
+    console.warn(`Refusing to store malformed ${draft.type} draft.`);
+
+    return;
+  }
+
+  const drafts = readStoredDrafts();
+
+  drafts[draft.localDraftId] = parsedDraft;
+
+  writeStoredDrafts(drafts);
+}
+
+/**
+ * Deletes one local draft.
+ */
+export function clearStoredDraft(localDraftId: string): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const drafts = readStoredDrafts();
+
+  if (drafts[localDraftId] === undefined) {
+    return;
+  }
+
+  delete drafts[localDraftId];
+
+  writeStoredDrafts(drafts);
+}
+
+/**
+ * Checks whether a particular local draft exists.
+ * Checks the presence of the ID only.
+ */
+export function hasStoredDraft(localDraftId: string): boolean {
+  if (typeof window === "undefined") {
     return false;
   }
+
+  const drafts = readStoredDrafts();
+
+  return drafts[localDraftId] !== undefined;
 }
 
 /**
- * Clears all stored drafts for all contribution types from localStorage.
+ * Deletes every locally stored contribution draft.
  */
 export function clearAllStoredDrafts(): void {
-  const types = Object.keys(STORAGE_KEYS) as Array<ContributionType>;
-  for (const type of types) {
-    clearStoredDraft(type);
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    window.localStorage.removeItem(STORAGE_KEY);
+  } catch (error) {
+    console.warn("Failed to clear contribution drafts:", error);
+  }
+}
+
+/**
+ * Deletes all drafts belonging to a particular
+ * contribution type.
+ */
+export function clearStoredDraftsByType(type: ContributionType): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const drafts = readStoredDrafts();
+
+  let changed = false;
+
+  for (const [localDraftId, rawDraft] of Object.entries(drafts)) {
+    const parsedDraft = parseStoredDraft(rawDraft);
+
+    if (!parsedDraft) {
+      delete drafts[localDraftId];
+      changed = true;
+      continue;
+    }
+
+    if (parsedDraft.type === type) {
+      delete drafts[localDraftId];
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    writeStoredDrafts(drafts);
   }
 }
 
@@ -130,51 +474,146 @@ export interface ContributionSaveControls {
 }
 
 /**
- * Hook to automatically and debouncingly save contribution form data to localStorage.
- * Passing a null type disables saving, flushing anything already queued.
- * Flushes pending changes immediately on component unmount.
+ * Automatically and debouncingly saves one particular
+ * contribution draft to localStorage.
+ *
+ * localDraftId identifies WHICH draft is being saved.
+ */
+export function useDebouncedContributionSave(
+  localDraftId: string | null,
+  type: "guide" | null,
+  data: StoredGuideDraft["data"],
+  revisionId: string | null,
+  step?: string,
+  delay?: number
+): ContributionSaveControls;
+
+export function useDebouncedContributionSave(
+  localDraftId: string | null,
+  type: "variant" | null,
+  data: StoredVariantDraft["data"],
+  revisionId: string | null,
+  step?: string,
+  delay?: number
+): ContributionSaveControls;
+
+export function useDebouncedContributionSave(
+  localDraftId: string | null,
+  type: "objective" | null,
+  data: StoredObjectiveDraft["data"],
+  revisionId: string | null,
+  step?: string,
+  delay?: number
+): ContributionSaveControls;
+
+/**
+ * Implementation for useDebouncedContributionSave.
  */
-export function useDebouncedContributionSave<T>(
+export function useDebouncedContributionSave(
+  localDraftId: string | null,
   type: ContributionType | null,
-  data: T,
+  data:
+    | StoredGuideDraft["data"]
+    | StoredVariantDraft["data"]
+    | StoredObjectiveDraft["data"],
   revisionId: string | null,
   step?: string,
   delay: number = 400
 ): ContributionSaveControls {
   const pendingRef = useRef<{
+    localDraftId: string;
     type: ContributionType;
-    data: T;
+    data:
+      | StoredGuideDraft["data"]
+      | StoredVariantDraft["data"]
+      | StoredObjectiveDraft["data"];
     revisionId: string | null;
     step?: string;
   } | null>(null);
-  if (type) pendingRef.current = { type, data, revisionId, step };
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const isPendingRef = useRef(false);
 
+  /**
+   * Always keep the latest contribution data available.
+   */
+  if (localDraftId && type) {
+    pendingRef.current = {
+      localDraftId,
+      type,
+      data,
+      revisionId,
+      step,
+    };
+  }
+
   const clearTimer = () => {
-    if (timerRef.current) {
+    if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   };
 
+  /**
+   * Immediately save the latest pending data.
+   */
   const flush = () => {
     clearTimer();
-    if (!isPendingRef.current) return;
+
+    if (!isPendingRef.current) {
+      return;
+    }
+
     isPendingRef.current = false;
 
     const pending = pendingRef.current;
-    if (!pending) return;
-
-    setStoredDraft(pending.type, {
-      data: pending.data,
-      revisionId: pending.revisionId,
-      step: pending.step,
-      updatedAt: Date.now(),
-    });
+
+    if (!pending) {
+      return;
+    }
+
+    switch (pending.type) {
+      case "guide":
+        setStoredDraft({
+          localDraftId: pending.localDraftId,
+          type: "guide",
+          data: pending.data as StoredGuideDraft["data"],
+          revisionId: pending.revisionId,
+          step: pending.step,
+          updatedAt: Date.now(),
+        });
+        break;
+
+      case "variant":
+        setStoredDraft({
+          localDraftId: pending.localDraftId,
+          type: "variant",
+          data: pending.data as StoredVariantDraft["data"],
+          revisionId: pending.revisionId,
+          step: pending.step,
+          updatedAt: Date.now(),
+        });
+        break;
+
+      case "objective":
+        setStoredDraft({
+          localDraftId: pending.localDraftId,
+          type: "objective",
+          data: pending.data as StoredObjectiveDraft["data"],
+          revisionId: pending.revisionId,
+          step: pending.step,
+          updatedAt: Date.now(),
+        });
+        break;
+    }
   };
 
+  /**
+   * Cancel the pending autosave.
+   *
+   * This does NOT delete an existing localStorage draft.
+   */
   const cancel = () => {
     clearTimer();
     isPendingRef.current = false;
@@ -182,26 +621,41 @@ export function useDebouncedContributionSave<T>(
 
   const flushRef = useRef(flush);
   flushRef.current = flush;
+
   const cancelRef = useRef(cancel);
   cancelRef.current = cancel;
 
+  /**
+   * Start/restart debounce timer whenever the contribution changes.
+   */
   useEffect(() => {
-    if (!type) {
+    if (!localDraftId || !type) {
       flushRef.current();
       return;
     }
 
     isPendingRef.current = true;
+
     clearTimer();
+
     timerRef.current = setTimeout(() => {
       timerRef.current = null;
       flushRef.current();
     }, delay);
-  }, [type, data, revisionId, step, delay]);
 
+    return clearTimer;
+  }, [localDraftId, type, data, revisionId, step, delay]);
+
+  /**
+   * Flush anything still waiting when the component unmounts.
+   */
   useEffect(() => {
-    return () => flushRef.current();
+    return () => {
+      flushRef.current();
+    };
   }, []);
 
-  return { cancel: () => cancelRef.current() };
+  return {
+    cancel: () => cancelRef.current(),
+  };
 }

From 00f86e3163bc9f61b9ef4c95ca4e5712fedc4138 Mon Sep 17 00:00:00 2001
From: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
Date: Thu, 3 Sep 2026 03:46:56 +0100
Subject: [PATCH 2/5] feat: create multi guide contribution workspace in
 contribution flow

Signed-off-by: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
---
 app/src/components/GuideMobileMenu.tsx        |   2 +-
 .../contribute/ContributionFlow.tsx           | 928 ++++++++++++------
 .../contribute/StepperActionHeader.tsx        |  16 +-
 .../components/contribute/steps/Content.tsx   |  62 +-
 .../contribute/steps/GuideDetails.tsx         | 527 ----------
 .../contribute/steps/PreviewGuide.tsx         |  42 -
 .../contribute/steps/SelectType.tsx           |   2 +-
 .../contribute/steps/VariantDetails.tsx       | 281 ------
 .../contribute/steps/guide/EditGuideInfo.tsx  | 113 +++
 .../contribute/steps/guide/GuideDetails.tsx   | 581 +++++++++++
 .../contribute/steps/guide/GuideInfo.tsx      | 139 +++
 .../contribute/steps/guide/PreviewGuide.tsx   | 134 +++
 .../{ => objective}/ObjectiveDetails.tsx      |   0
 .../{ => objective}/OrderObjectiveGuides.tsx  |   0
 .../{ => objective}/OrderTargetGuides.tsx     |   0
 .../{ => objective}/PreviewObjective.tsx      |   6 +-
 .../steps/variant/PreviewVariant.tsx          |  95 ++
 .../steps/variant/VariantDetails.tsx          | 250 +++++
 .../contribute/steps/variant/VariantInfo.tsx  |  93 ++
 .../components/modals/SelectDraftModal.tsx    | 160 +++
 app/src/components/sidebar/EditorSidebar.tsx  | 227 +++++
 app/src/lib/api/identity.ts                   |  10 +
 app/src/lib/contributionFlow.ts               |   8 +-
 app/src/lib/contributionStorage.ts            | 172 +---
 app/src/routes/contribute.tsx                 |   6 +-
 .../routes/guides/$slug/$variantSlug/edit.tsx | 292 ++++--
 .../guides/$slug/$variantSlug/index.tsx       |   2 +-
 app/src/routes/guides/$slug/index.tsx         |   4 +-
 app/src/routes/objectives/$slug/index.tsx     |   2 +-
 app/src/routes/settings.account.tsx           |  10 +-
 app/src/types/contributions.ts                |   6 +-
 31 files changed, 2714 insertions(+), 1456 deletions(-)
 delete mode 100644 app/src/components/contribute/steps/GuideDetails.tsx
 delete mode 100644 app/src/components/contribute/steps/PreviewGuide.tsx
 delete mode 100644 app/src/components/contribute/steps/VariantDetails.tsx
 create mode 100644 app/src/components/contribute/steps/guide/EditGuideInfo.tsx
 create mode 100644 app/src/components/contribute/steps/guide/GuideDetails.tsx
 create mode 100644 app/src/components/contribute/steps/guide/GuideInfo.tsx
 create mode 100644 app/src/components/contribute/steps/guide/PreviewGuide.tsx
 rename app/src/components/contribute/steps/{ => objective}/ObjectiveDetails.tsx (100%)
 rename app/src/components/contribute/steps/{ => objective}/OrderObjectiveGuides.tsx (100%)
 rename app/src/components/contribute/steps/{ => objective}/OrderTargetGuides.tsx (100%)
 rename app/src/components/contribute/steps/{ => objective}/PreviewObjective.tsx (98%)
 create mode 100644 app/src/components/contribute/steps/variant/PreviewVariant.tsx
 create mode 100644 app/src/components/contribute/steps/variant/VariantDetails.tsx
 create mode 100644 app/src/components/contribute/steps/variant/VariantInfo.tsx
 create mode 100644 app/src/components/modals/SelectDraftModal.tsx
 create mode 100644 app/src/components/sidebar/EditorSidebar.tsx

diff --git a/app/src/components/GuideMobileMenu.tsx b/app/src/components/GuideMobileMenu.tsx
index 2ca4c51d..612eab54 100644
--- a/app/src/components/GuideMobileMenu.tsx
+++ b/app/src/components/GuideMobileMenu.tsx
@@ -44,7 +44,7 @@ export function GuideMobileMenu({
 
   return (
     <>
-      <DropdownMenu>
+      <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
diff --git a/app/src/components/contribute/ContributionFlow.tsx b/app/src/components/contribute/ContributionFlow.tsx
index 4dcbbc7a..3fe3f4c1 100644
--- a/app/src/components/contribute/ContributionFlow.tsx
+++ b/app/src/components/contribute/ContributionFlow.tsx
@@ -2,7 +2,6 @@ import { defineStepper } from "@stepperize/react";
 import { ChevronRight } from "lucide-react";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-
 import type { Dispatch, SetStateAction } from "react";
 
 import type {
@@ -12,39 +11,42 @@ import type {
   VariantContribution,
 } from "@/types/contributions";
 import type { GuideType } from "@/types/guides";
-import type { ReaderGuide } from "@/components/GuideReader";
+
+import { MobileStepProgress } from "@/components/contribute/MobileStepProgress";
+
+import { SelectType } from "@/components/contribute/steps/SelectType";
+import { GuideInfo } from "@/components/contribute/steps/guide/GuideInfo";
+import { PreviewGuide } from "@/components/contribute/steps/guide/PreviewGuide";
+
+import { VariantInfo } from "@/components/contribute/steps/variant/VariantInfo";
+import { PreviewVariant } from "@/components/contribute/steps/variant/PreviewVariant";
+
+import { ObjectiveDetails } from "@/components/contribute/steps/objective/ObjectiveDetails";
+import { OrderObjectiveGuides } from "@/components/contribute/steps/objective/OrderObjectiveGuides";
+import { OrderTargetGuides } from "@/components/contribute/steps/objective/OrderTargetGuides";
+import { PreviewObjective } from "@/components/contribute/steps/objective/PreviewObjective";
+
 import { addGuideVariant, createGuide, listGuides } from "@/lib/api/guides";
 import { getMyIdentity } from "@/lib/api/identity";
 import { listSubjects } from "@/lib/api/subjects";
+import { flows, typeStep } from "@/lib/contributionFlow";
+import { uploadMedia } from "@/lib/api/media";
+import {
+  getRevision,
+  submitRevision,
+  updateRevision,
+} from "@/lib/api/guideRevisions";
 import { createObjective, createObjectiveRevision } from "@/lib/api/objectives";
 import {
   getObjectiveRevision,
   submitObjectiveRevision,
   updateObjectiveRevision,
 } from "@/lib/api/objectiveRevisions";
-import {
-  getRevision,
-  submitRevision,
-  updateRevision,
-} from "@/lib/api/guideRevisions";
-import { uploadMedia } from "@/lib/api/media";
-import { estimateReadMinutes, formatDate } from "@/lib/guideUtils";
 
-import { SelectType } from "@/components/contribute/steps/SelectType";
-import { GuideDetails } from "@/components/contribute/steps/GuideDetails";
-import { VariantDetails } from "@/components/contribute/steps/VariantDetails";
-import { Content } from "@/components/contribute/steps/Content";
-import { ObjectiveDetails } from "@/components/contribute/steps/ObjectiveDetails";
-import { PreviewGuide } from "@/components/contribute/steps/PreviewGuide";
-import { OrderObjectiveGuides } from "@/components/contribute/steps/OrderObjectiveGuides";
-import { OrderTargetGuides } from "@/components/contribute/steps/OrderTargetGuides";
-
-import { flows, typeStep } from "@/lib/contributionFlow";
-import { PreviewObjective } from "@/components/contribute/steps/PreviewObjective";
-import { MobileStepProgress } from "@/components/contribute/MobileStepProgress";
 import {
   clearStoredDraft,
-  getStoredDraft,
+  createLocalDraftId,
+  getStoredDraftsByType,
   setStoredDraft,
   useDebouncedContributionSave,
 } from "@/lib/contributionStorage";
@@ -66,6 +68,11 @@ type PropTypes = {
   todoIds: Array<string>;
 };
 
+type MultiGuide = GuideContribution & {
+  localDraftId: string;
+  revisionId: string | null;
+};
+
 const createGuideContData = (): GuideContribution => ({
   type: "theoretical",
   title: "",
@@ -77,8 +84,14 @@ const createGuideContData = (): GuideContribution => ({
   todoPrereqs: [],
 });
 
+const createMultiGuide = (): MultiGuide => ({
+  localDraftId: createLocalDraftId(),
+  revisionId: null,
+  ...createGuideContData(),
+});
+
 const createVariantContData = (): VariantContribution => ({
-  type: "",
+  type: "theoretical",
   title: "",
   summary: "",
   baseGuide: "",
@@ -103,6 +116,7 @@ const objectiveDataFromRevision = (
   data: ObjectiveRevisionData
 ): ObjectiveContribution => {
   const slugByNodeId = new Map(data.snapshot.nodes.map((n) => [n.id, n.slug]));
+
   const targetNodes = data.snapshot.nodes
     .filter((n): n is typeof n & { slug: string } => n.is_target && !!n.slug)
     .sort((a, b) => (a.target_position ?? 0) - (b.target_position ?? 0));
@@ -118,7 +132,11 @@ const objectiveDataFromRevision = (
         .filter((o) => o.target_node_id === n.id)
         .map((o) => slugByNodeId.get(o.node_id))
         .filter((slug): slug is string => !!slug);
-      if (sequence.length === 0) return [];
+
+      if (sequence.length === 0) {
+        return [];
+      }
+
       return [
         {
           targetSlug: n.slug,
@@ -131,7 +149,11 @@ const objectiveDataFromRevision = (
   };
 };
 
-type NewSubject = { id?: string; name: string; summary: string };
+type NewSubject = {
+  id?: string;
+  name: string;
+  summary: string;
+};
 
 const existingTagIds = (newSubjects: Array<NewSubject>) =>
   newSubjects.map((s) => s.id).filter((id): id is string => !!id);
@@ -139,7 +161,10 @@ const existingTagIds = (newSubjects: Array<NewSubject>) =>
 const unsavedSubjects = (newSubjects: Array<NewSubject>) =>
   newSubjects
     .filter((s) => !s.id)
-    .map((s) => ({ name: s.name, summary: s.summary || null }));
+    .map((s) => ({
+      name: s.name,
+      summary: s.summary || null,
+    }));
 
 export default function ContributionFlow({
   type,
@@ -155,23 +180,53 @@ export default function ContributionFlow({
   todoSummary,
   todoIds,
 }: PropTypes) {
-  const [guideContData, setGuideContData] = useState<GuideContribution>(() => {
-    if (draftId || todoTitle) return createGuideContData();
-    const stored = getStoredDraft<GuideContribution>("guide");
-    return stored?.data ?? createGuideContData();
+  const [guideContData, setGuideContData] = useState<Array<MultiGuide>>(() => {
+    if (draftId || todoTitle) {
+      return [createMultiGuide()];
+    }
+
+    const storedGuides = getStoredDraftsByType("guide");
+
+    if (storedGuides.length > 0) {
+      return storedGuides.map((draft) => ({
+        localDraftId: draft.localDraftId,
+        revisionId: draft.revisionId,
+        ...draft.data,
+      }));
+    }
+
+    return [createMultiGuide()];
   });
+
+  const [activeGuideId, setActiveGuideId] = useState<string>(
+    () => guideContData[0]?.localDraftId ?? ""
+  );
+
+  const [variantLocalDraftId] = useState<string>(() => createLocalDraftId());
+
   const [variantContData, setVariantContData] = useState<VariantContribution>(
     () => {
-      if (draftId) return createVariantContData();
-      const stored = getStoredDraft<VariantContribution>("variant");
-      return stored?.data ?? createVariantContData();
+      if (draftId) {
+        return createVariantContData();
+      }
+
+      const storedVariants = getStoredDraftsByType("variant");
+
+      return storedVariants[0]?.data ?? createVariantContData();
     }
   );
+
+  const [objectiveLocalDraftId] = useState<string>(() => createLocalDraftId());
+
   const [objectiveContData, setObjectiveContData] =
     useState<ObjectiveContribution>(() => {
-      if (draftId || editSlug) return createObjectiveContData();
-      const stored = getStoredDraft<ObjectiveContribution>("objective");
-      return stored?.data ?? createObjectiveContData();
+      if (draftId || editSlug) {
+        return createObjectiveContData();
+      }
+
+      const storedObjectives = getStoredDraftsByType("objective");
+
+      return storedObjectives[0]?.data ?? createObjectiveContData();
     });
 
   const skipTypeStep = !!editSlug || !!draftId;
@@ -190,22 +245,26 @@ export default function ContributionFlow({
 
   const { Stepper } = StepperInstance;
 
-  // Determine current active step from URL/props or fallback to initial step
-  const activeStep = useMemo(() => {
-    if (!type) return "type";
+  const initialStep = useMemo(() => {
+    if (!type) {
+      return "type";
+    }
+
     return StepperInstance.parseStep(step) ?? flows[type][0].id;
   }, [type, step, StepperInstance]);
 
+  const [currentStep, setCurrentStep] = useState<string>(initialStep);
+
   useEffect(() => {
-    if (!type || !step) return;
-    if (!StepperInstance.parseStep(step)) onStepChange?.(activeStep);
-  }, [type, step, StepperInstance, activeStep, onStepChange]);
+    setCurrentStep(initialStep);
+  }, [initialStep]);
 
   return (
     <Stepper.Root
       linear
-      step={activeStep}
+      step={currentStep}
       onStepChange={(newStep: string) => {
+        setCurrentStep(newStep);
         onStepChange?.(newStep);
       }}
       className="flex min-h-0 w-full flex-1 flex-col gap-8"
@@ -217,7 +276,7 @@ export default function ContributionFlow({
           type={type}
           setType={setType}
           skipTypeStep={skipTypeStep}
-          activeStep={activeStep}
+          activeStep={currentStep}
           step={step}
           onPublished={onPublished}
           draftId={draftId}
@@ -229,8 +288,12 @@ export default function ContributionFlow({
           todoIds={todoIds}
           guideContData={guideContData}
           setGuideContData={setGuideContData}
+          activeGuideId={activeGuideId}
+          setActiveGuideId={setActiveGuideId}
+          variantLocalDraftId={variantLocalDraftId}
           variantContData={variantContData}
           setVariantContData={setVariantContData}
+          objectiveLocalDraftId={objectiveLocalDraftId}
           objectiveContData={objectiveContData}
           setObjectiveContData={setObjectiveContData}
         />
@@ -255,10 +318,14 @@ function Inner({
   todoTitle,
   todoSummary,
   todoIds,
+  activeGuideId,
+  setActiveGuideId,
   guideContData,
   setGuideContData,
+  variantLocalDraftId,
   variantContData,
   setVariantContData,
+  objectiveLocalDraftId,
   objectiveContData,
   setObjectiveContData,
 }: {
@@ -278,62 +345,116 @@ function Inner({
   todoSummary?: string;
   todoIds: Array<string>;
 
-  guideContData: GuideContribution;
-  setGuideContData: Dispatch<SetStateAction<GuideContribution>>;
+  activeGuideId: string;
+  setActiveGuideId: Dispatch<SetStateAction<string>>;
+
+  guideContData: Array<MultiGuide>;
+  setGuideContData: Dispatch<SetStateAction<Array<MultiGuide>>>;
+
+  variantLocalDraftId: string;
   variantContData: VariantContribution;
   setVariantContData: Dispatch<SetStateAction<VariantContribution>>;
 
+  objectiveLocalDraftId: string;
   objectiveContData: ObjectiveContribution;
   setObjectiveContData: Dispatch<SetStateAction<ObjectiveContribution>>;
 }) {
-  const pickType = (value: ContributionType) => {
-    if (type !== value) {
-      setType(value);
+  const activeGuide: MultiGuide = useMemo(() => {
+    const foundGuide = guideContData.find(
+      (guide) => guide.localDraftId === activeGuideId
+    );
+
+    if (foundGuide) {
+      return foundGuide;
     }
 
-    requestAnimationFrame(() => {
-      switch (value) {
-        case "guide":
-          stepper.goTo("guide-details");
-          break;
+    return guideContData[0] ?? createMultiGuide();
+  }, [guideContData, activeGuideId]);
 
-        case "variant":
-          stepper.goTo("variant-details");
-          break;
+  const updateActiveGuide = (update: Partial<MultiGuide>) => {
+    setGuideContData((prev) =>
+      prev.map((guide) =>
+        guide.localDraftId === activeGuide.localDraftId
+          ? { ...guide, ...update }
+          : guide
+      )
+    );
+  };
 
-        default:
-          stepper.goTo("objective-details");
-      }
-    });
+  const addGuide = () => {
+    const newGuide = createMultiGuide();
+    setGuideContData((prev) => [...prev, newGuide]);
+    setActiveGuideId(newGuide.localDraftId);
+    setType("guide");
+  };
+
+  // remove one local guide from state (workspace) and localstorage - NOT from server
+  const removeGuide = (id: string) => {
+    if (guideContData.length <= 1) {
+      return;
+    }
+
+    clearStoredDraft(id);
+
+    setGuideContData((prev) =>
+      prev.filter((guide) => guide.localDraftId !== id)
+    );
+
+    if (activeGuideId === id) {
+      const remaining = guideContData.filter(
+        (guide) => guide.localDraftId !== id
+      );
+      setActiveGuideId(remaining[0]?.localDraftId ?? "");
+    }
   };
 
+  const updateActiveVariant = (update: Partial<VariantContribution>) => {
+    setVariantContData((prev) => ({
+      ...prev,
+      ...update,
+    }));
+  };
+
+  const pickType = (value: ContributionType) => {
+    if (type === value) {
+      return;
+    }
+
+    setType(value);
+
+    const firstStep = flows[value][0].id;
+    requestAnimationFrame(() => stepper.goTo(firstStep));
+  };
+
+  // revisionId fetched to the database - stored on EACH guide draft
   const [revisionId, setRevisionId] = useState<string | null>(() => {
-    if (draftId) return draftId;
-    if (!type || editSlug || todoTitle) return null;
-    const stored = getStoredDraft<unknown>(type);
-    return stored?.revisionId ?? null;
+    if (draftId) {
+      return draftId;
+    }
+    return null;
   });
 
   const [autosaveReady, setAutosaveReady] = useState(!draftId && !editSlug);
 
-  useEffect(() => {
-    if (draftId || editSlug || todoTitle) return;
-    if (type) {
-      const stored = getStoredDraft<unknown>(type);
-      setRevisionId(stored?.revisionId ?? null);
-    }
-  }, [type, draftId, editSlug, todoTitle]);
-
-  // Debounced auto-save for guide drafts
   const guideSave = useDebouncedContributionSave(
+    autosaveReady && type === "guide" ? activeGuide.localDraftId : null,
     autosaveReady && type === "guide" ? "guide" : null,
-    guideContData,
-    revisionId,
+    {
+      type: activeGuide.type,
+      title: activeGuide.title,
+      summary: activeGuide.summary,
+      body: activeGuide.body,
+      subjects: activeGuide.subjects,
+      newSubjects: activeGuide.newSubjects,
+      prereqs: activeGuide.prereqs,
+      todoPrereqs: activeGuide.todoPrereqs,
+    },
+    activeGuide.revisionId,
     step
   );
 
-  // Debounced auto-save for variant drafts
   const variantSave = useDebouncedContributionSave(
+    autosaveReady && type === "variant" ? variantLocalDraftId : null,
     autosaveReady && type === "variant" ? "variant" : null,
     variantContData,
     revisionId,
@@ -341,6 +462,7 @@ function Inner({
   );
 
   const objectiveSave = useDebouncedContributionSave(
+    autosaveReady && type === "objective" ? objectiveLocalDraftId : null,
     autosaveReady && type === "objective" ? "objective" : null,
     objectiveContData,
     revisionId,
@@ -348,48 +470,100 @@ function Inner({
   );
 
   const [submitting, setSubmitting] = useState(false);
+
   const [publishAttempted, setPublishAttempted] = useState(false);
+
   const [showChangeSummary, setShowChangeSummary] = useState(false);
-  const visibleSteps = !type
-    ? typeStep
-    : skipTypeStep
-      ? flows[type]
-      : [...typeStep, ...flows[type]];
 
-  // Start from the todo page with the topic's title and summary already filled in.
+  const storeContributionDraft = (
+    draftType: ContributionType,
+    data: GuideContribution | VariantContribution | ObjectiveContribution,
+    localDraftId: string,
+    serverRevisionId: string | null,
+    draftStep?: string
+  ) => {
+    setStoredDraft({
+      localDraftId,
+      type: draftType,
+      data,
+      revisionId: serverRevisionId,
+      step: draftStep,
+      updatedAt: Date.now(),
+    } as never);
+  };
+
+  const visibleSteps = useMemo(() => {
+    if (!type) {
+      return typeStep;
+    }
+
+    if (skipTypeStep) {
+      return flows[type];
+    }
+
+    return [...typeStep, ...flows[type]];
+  }, [type, skipTypeStep]);
+
+  // seeding
   const seededRef = useRef(false);
+
   useEffect(() => {
-    if (!todoTitle || seededRef.current) return;
+    if (!todoTitle || seededRef.current) {
+      return;
+    }
+
     seededRef.current = true;
 
-    setGuideContData((prev) => ({
-      ...prev,
-      title: todoTitle,
-      summary: todoSummary ?? prev.summary,
-    }));
+    setGuideContData((prev) =>
+      prev.map((guide) =>
+        guide.localDraftId === activeGuideId
+          ? {
+              ...guide,
+              title: todoTitle,
+              summary: todoSummary ?? guide.summary,
+            }
+          : guide
+      )
+    );
+
     setType("guide");
-    requestAnimationFrame(() => stepper.goTo("guide-details"));
-  }, [todoTitle, todoSummary]);
+  }, [todoTitle, todoSummary, activeGuideId, setType]);
+
+  useEffect(() => {
+    if (!todoTitle || !seededRef.current || type !== "guide") {
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      stepper.goTo("guide-info");
+    });
 
-  // Resume a draft opened from the profile.
+    return () => cancelAnimationFrame(frame);
+  }, [todoTitle, type, stepper]);
+
+  // resume server draft
   const loadedDraftIdRef = useRef<string | null>(null);
+
   useEffect(() => {
-    if (!draftId || loadedDraftIdRef.current === draftId) return;
+    if (!draftId || loadedDraftIdRef.current === draftId) {
+      return;
+    }
     loadedDraftIdRef.current = draftId;
 
     if (draftKind === "objective") {
       getObjectiveRevision(draftId)
         .then((data) => {
           const objData = objectiveDataFromRevision(data);
-
           setObjectiveContData(objData);
           setShowChangeSummary(!!data.objective.current_revision_id);
-          setStoredDraft("objective", {
-            data: objData,
-            revisionId: draftId,
-            step: step ? step : "objective-details",
-            updatedAt: Date.now(),
-          });
+
+          storeContributionDraft(
+            "objective",
+            objData,
+            objectiveLocalDraftId,
+            draftId,
+            step ?? "objective-details"
+          );
 
           setRevisionId(draftId);
           setType("objective");
@@ -408,18 +582,22 @@ function Inner({
 
     getRevision(draftId)
       .then((data) => {
-        // A tag still awaiting approval is not pickable yet, so it resumes in
-        // the new-subject list rather than the picker.
         const tagged = data.subjects
           .filter((s) => s.status === "published")
           .map((s) => s.id);
+
         const pending = data.subjects
           .filter((s) => s.status !== "published")
           .map((s) => ({ id: s.id, name: s.name, summary: s.summary ?? "" }));
 
         if (data.is_variant) {
+          const knowledgeType =
+            data.knowledge_type === "theoretical" ||
+            data.knowledge_type === "practical"
+              ? data.knowledge_type
+              : "theoretical";
           const vData: VariantContribution = {
-            type: data.knowledge_type ?? "",
+            type: knowledgeType,
             title: data.revision.title ?? "",
             summary: data.revision.summary ?? "",
             body: data.revision.body ?? "",
@@ -427,15 +605,20 @@ function Inner({
             subjects: tagged,
             newSubjects: pending,
           };
+
           setVariantContData(vData);
-          setStoredDraft("variant", {
-            data: vData,
-            revisionId: draftId,
-            step: step ? step : "variant-details",
-            updatedAt: Date.now(),
-          });
+
+          storeContributionDraft(
+            "variant",
+            vData,
+            variantLocalDraftId,
+            draftId,
+            step ?? "variant-info"
+          );
         } else {
-          const gData: GuideContribution = {
+          const gData: MultiGuide = {
+            localDraftId: createLocalDraftId(),
+            revisionId: draftId,
             type: data.knowledge_type ?? "theoretical",
             title: data.revision.title ?? "",
             summary: data.revision.summary ?? "",
@@ -445,20 +628,38 @@ function Inner({
             prereqs: data.prerequisites,
             todoPrereqs: data.todos,
           };
-          setGuideContData(gData);
-          setStoredDraft("guide", {
-            data: gData,
-            revisionId: draftId,
-            step: step ? step : "guide-details",
-            updatedAt: Date.now(),
-          });
+
+          setGuideContData([gData]);
+
+          setActiveGuideId(gData.localDraftId);
+
+          storeContributionDraft(
+            "guide",
+            {
+              type: gData.type,
+              title: gData.title,
+              summary: gData.summary,
+              body: gData.body,
+              subjects: gData.subjects,
+              newSubjects: gData.newSubjects,
+              prereqs: gData.prereqs,
+              todoPrereqs: gData.todoPrereqs,
+            },
+            gData.localDraftId,
+            draftId,
+            step ?? "guide-info"
+          );
         }
+
         setRevisionId(draftId);
+
         setType(data.is_variant ? "variant" : "guide");
+
         setAutosaveReady(true);
+
         requestAnimationFrame(() =>
           stepper.goTo(
-            step ? step : data.is_variant ? "variant-details" : "guide-details"
+            step ?? (data.is_variant ? "variant-details" : "guide-info")
           )
         );
       })
@@ -466,11 +667,24 @@ function Inner({
         setRevisionId(null);
         toast.error("Could not load draft");
       });
-  }, [draftId]);
-
+  }, [
+    draftId,
+    draftKind,
+    objectiveLocalDraftId,
+    variantLocalDraftId,
+    step,
+    stepper,
+    setType,
+  ]);
+
+  // objective source revision
   const seededSourceRef = useRef(false);
+
   useEffect(() => {
-    if (!sourceRevisionId || !editSlug || seededSourceRef.current) return;
+    if (!sourceRevisionId || !editSlug || seededSourceRef.current) {
+      return;
+    }
+
     seededSourceRef.current = true;
 
     getObjectiveRevision(sourceRevisionId)
@@ -479,6 +693,7 @@ function Inner({
           ...objectiveDataFromRevision(data),
           changeSummary: "",
         });
+
         setShowChangeSummary(!!data.objective.current_revision_id);
         setType("objective");
         requestAnimationFrame(() => stepper.goTo("objective-details"));
@@ -486,7 +701,7 @@ function Inner({
       .catch(() => {
         toast.error("Could not load objective");
       });
-  }, [sourceRevisionId, editSlug]);
+  }, [sourceRevisionId, editSlug, stepper]);
 
   const [subjectOptions, setSubjectOptions] = useState<
     Awaited<ReturnType<typeof listSubjects>>
@@ -494,7 +709,6 @@ function Inner({
   const [guideOptions, setGuideOptions] = useState<
     Awaited<ReturnType<typeof listGuides>>
   >([]);
-  const [username, setUsername] = useState<string | null>(null);
 
   useEffect(() => {
     const controller = new AbortController();
@@ -508,98 +722,24 @@ function Inner({
       .then(setGuideOptions)
       .catch(() => {});
 
-    getMyIdentity(opts)
-      .then((data) => setUsername(data.profile.username))
-      .catch(() => {});
-
     return () => controller.abort();
   }, []);
 
-  // Shape the in-progress form as a Guide, so the submit step can render it with
-  // the same component the published page uses.
-  const previewGuide: ReaderGuide = useMemo(() => {
-    const nameById = new Map(
-      subjectOptions.map((s) => [s.id, s.name] as const)
-    );
-    const titleBySlug = new Map(
-      guideOptions
-        .filter((g) => g.slug)
-        .map((g) => [g.slug as string, g.title ?? (g.slug as string)] as const)
-    );
-
+  // server draft payload
+  const draftFields = () => {
     return {
-      slug: "",
-      variant_id: null,
-      variant_slug: null,
-      title: guideContData.title || "Untitled guide",
-      author: username ?? "You",
-      summary: guideContData.summary,
-      body: guideContData.body,
-      duration_minutes: estimateReadMinutes(guideContData.body),
-      created_at: formatDate(new Date()),
+      title: activeGuide.title || null,
+      summary: activeGuide.summary || null,
+      body: activeGuide.body || null,
       tags: [
-        ...guideContData.subjects.map((id) => ({
-          slug: id,
-          name: nameById.get(id) ?? id,
-        })),
-        ...guideContData.newSubjects.map((s) => ({
-          slug: s.name,
-          name: s.name,
-        })),
+        ...activeGuide.subjects,
+        ...existingTagIds(activeGuide.newSubjects),
       ],
-      prerequisites: guideContData.prereqs.map((slug) => ({
-        slug,
-        title: titleBySlug.get(slug) ?? slug,
-      })),
+      prerequisites: activeGuide.prereqs,
+      newSubjects: unsavedSubjects(activeGuide.newSubjects),
+      todoPrereqs: activeGuide.todoPrereqs,
     };
-  }, [guideContData, subjectOptions, guideOptions, username]);
-
-  const previewVariant: ReaderGuide = useMemo(() => {
-    const nameById = new Map(
-      subjectOptions.map((s) => [s.id, s.name] as const)
-    );
-
-    return {
-      slug: "",
-      variant_id: null,
-      variant_slug: null,
-      title: variantContData.title || "Untitled guide",
-      author: username ?? "You",
-      summary: variantContData.summary,
-      body: variantContData.body,
-      created_at: formatDate(new Date()),
-      duration_minutes: estimateReadMinutes(variantContData.body),
-      tags: [
-        ...variantContData.subjects.map((id) => ({
-          slug: id,
-          name: nameById.get(id) ?? id,
-        })),
-        ...variantContData.newSubjects.map((s) => ({
-          slug: s.name,
-          name: s.name,
-        })),
-      ],
-      prerequisites: [],
-    };
-  }, [variantContData, subjectOptions, username]);
-
-  const guideType: GuideType | undefined =
-    guideContData.type === "practical" || guideContData.type === "theoretical"
-      ? guideContData.type
-      : undefined;
-
-  const draftFields = () => ({
-    title: guideContData.title || null,
-    summary: guideContData.summary || null,
-    body: guideContData.body || null,
-    tags: [
-      ...guideContData.subjects,
-      ...existingTagIds(guideContData.newSubjects),
-    ],
-    prerequisites: guideContData.prereqs,
-    newSubjects: unsavedSubjects(guideContData.newSubjects),
-    todoPrereqs: guideContData.todoPrereqs,
-  });
+  };
 
   const variantDraftFields = () => ({
     title: variantContData.title || null,
@@ -612,29 +752,37 @@ function Inner({
     newSubjects: unsavedSubjects(variantContData.newSubjects),
   });
 
-  // The wizard tracks guides by slug; the API keys curation on guide base ids.
   const baseIdForSlug = (slug: string) => {
     const guide = guideOptions.find((g) => g.slug === slug);
-    if (!guide) throw new Error(`Target guide not found: ${slug}`);
+
+    if (!guide) {
+      throw new Error(`Target guide not found: ${slug}`);
+    }
+
     return guide.id;
   };
 
-  // Target order comes from the array, so this sends them in wizard order. A
-  // target the curator has not sequenced yet goes without one, which leaves the
-  // curation under it alone rather than emptying it.
   const objectiveTargets = () =>
     objectiveContData.targets.map((slug) => {
       const sub = objectiveContData.subObjectives.find(
         (s) => s.targetSlug === slug
       );
+
       return {
         guide_base_id: baseIdForSlug(slug),
         is_featured: objectiveContData.featuredSubObjective === slug,
-        ...(sub ? { sequence: sub.curatedSequence.map(baseIdForSlug) } : {}),
+        ...(sub
+          ? {
+              sequence: sub.curatedSequence.map(baseIdForSlug),
+            }
+          : {}),
       };
     });
 
+  // prevent two simultaneous create requests
   const creatingRef = useRef<Promise<string> | null>(null);
+
+  // server persistence - guide revisionId lives on the active guide itself
   const persistDraft = async () => {
     if (type === "objective") {
       const target_ids = objectiveContData.targets.map(baseIdForSlug);
@@ -653,6 +801,7 @@ function Inner({
           tags: objectiveContData.subjects,
           targets: objectiveTargets(),
         });
+
         return revisionId;
       }
 
@@ -667,13 +816,16 @@ function Inner({
                 tags: objectiveContData.subjects,
                 targets: objectiveTargets(),
               });
+
               setRevisionId(id);
+
               return id;
             })
             .finally(() => {
               creatingRef.current = null;
             });
         }
+
         return creatingRef.current;
       }
 
@@ -685,8 +837,6 @@ function Inner({
           tags: objectiveContData.subjects,
         })
           .then(async (id) => {
-            // Creation only seeds the closure, so the curation has to update
-            // before publish.
             await updateObjectiveRevision(id, { targets: objectiveTargets() });
             setRevisionId(id);
             return id;
@@ -695,33 +845,52 @@ function Inner({
             creatingRef.current = null;
           });
       }
+
       return creatingRef.current;
     }
 
-    if (revisionId) {
-      await updateRevision(
-        revisionId,
-        type === "guide" ? draftFields() : variantDraftFields()
+    // Guide/Variant
+    if (type === "guide") {
+      // active guide owns its own server revisionId.
+      if (activeGuide.revisionId) {
+        await updateRevision(activeGuide.revisionId, draftFields());
+
+        return activeGuide.revisionId;
+      }
+
+      const newRevisionId = await createGuide({
+        knowledge_type:
+          activeGuide.type === "practical" ? "practical" : "theoretical",
+        ...draftFields(),
+        todoClaims: todoIds,
+      });
+
+      // store the server revision ID on THIS guide only
+      setGuideContData((prev) =>
+        prev.map((guide) =>
+          guide.localDraftId === activeGuide.localDraftId
+            ? { ...guide, revisionId: newRevisionId }
+            : guide
+        )
       );
+
+      return newRevisionId;
+    }
+
+    // variant
+    if (revisionId) {
+      await updateRevision(revisionId, variantDraftFields());
       return revisionId;
     }
 
-    if (type === "variant" && !variantContData.baseGuide) {
+    if (!variantContData.baseGuide) {
       throw new Error("Pick a base guide before saving");
     }
 
     if (!creatingRef.current) {
-      creatingRef.current = (
-        type === "guide"
-          ? createGuide({
-              knowledge_type:
-                guideContData.type === "practical"
-                  ? "practical"
-                  : "theoretical",
-              ...draftFields(),
-              todoClaims: todoIds,
-            })
-          : addGuideVariant(variantContData.baseGuide, variantDraftFields())
+      creatingRef.current = addGuideVariant(
+        variantContData.baseGuide,
+        variantDraftFields()
       )
         .then((id) => {
           setRevisionId(id);
@@ -731,15 +900,24 @@ function Inner({
           creatingRef.current = null;
         });
     }
+
     return creatingRef.current;
   };
 
-  // Creates the draft first if needed, so the image has a revision to attach to.
+  // image upload
   const uploadGuideImage = async (file: File) => {
     try {
-      const id = revisionId ?? (await persistDraft());
-      if (!id) throw new Error("Failed to save draft before uploading image");
+      const id =
+        type === "guide"
+          ? (activeGuide.revisionId ?? (await persistDraft()))
+          : (revisionId ?? (await persistDraft()));
+
+      if (!id) {
+        throw new Error("Failed to save draft before uploading image");
+      }
+
       const { url } = await uploadMedia(file, id);
+
       return url;
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Could not upload image");
@@ -747,51 +925,120 @@ function Inner({
     }
   };
 
+  // manual save
   const saveDraft = async () => {
     setSubmitting(true);
+
     try {
       const id = await persistDraft();
-      if (type && !editSlug) {
-        const currentData =
-          type === "guide"
-            ? guideContData
-            : type === "variant"
-              ? variantContData
-              : objectiveContData;
-        setStoredDraft(type, {
-          data: currentData,
-          revisionId: id,
-          step,
-          updatedAt: Date.now(),
-        });
+
+      // keep localStorage in sync with the server revision ID
+      if (type === "guide") {
+        storeContributionDraft(
+          "guide",
+          {
+            type: activeGuide.type,
+            title: activeGuide.title,
+            summary: activeGuide.summary,
+            body: activeGuide.body,
+            subjects: activeGuide.subjects,
+            newSubjects: activeGuide.newSubjects,
+            prereqs: activeGuide.prereqs,
+            todoPrereqs: activeGuide.todoPrereqs,
+          },
+          activeGuide.localDraftId,
+          id,
+          step
+        );
+
+        // update guide in state so revisionId is available
+        if (id && id !== activeGuide.revisionId) {
+          setGuideContData((prev) =>
+            prev.map((guide) =>
+              guide.localDraftId === activeGuide.localDraftId
+                ? { ...guide, revisionId: id }
+                : guide
+            )
+          );
+        }
+      }
+
+      if (type === "variant") {
+        storeContributionDraft(
+          "variant",
+          variantContData,
+          variantLocalDraftId,
+          id,
+          step
+        );
+      }
+
+      if (type === "objective") {
+        storeContributionDraft(
+          "objective",
+          objectiveContData,
+          objectiveLocalDraftId,
+          id,
+          step
+        );
       }
+
       toast.success("Draft saved");
+
       return true;
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Could not save draft");
+
       return false;
     } finally {
       setSubmitting(false);
     }
   };
 
+  // objective validation
   const missingObjectiveFields = () => {
     const missing: Array<{ field: string; label: string }> = [];
-    if (!objectiveContData.title.trim())
-      missing.push({ field: "title", label: "a title" });
-    if (!objectiveContData.summary.trim())
-      missing.push({ field: "summary", label: "a summary" });
-    if (showChangeSummary && !objectiveContData.changeSummary.trim())
-      missing.push({ field: "changeSummary", label: "a change summary" });
-    if (objectiveContData.subjects.length === 0)
-      missing.push({ field: "subjects", label: "a subject" });
-    if (objectiveContData.targets.length === 0)
-      missing.push({ field: "targets", label: "a target guide" });
-    else if (!objectiveContData.featuredSubObjective)
+
+    if (!objectiveContData.title.trim()) {
+      missing.push({
+        field: "title",
+        label: "a title",
+      });
+    }
+
+    if (!objectiveContData.summary.trim()) {
+      missing.push({
+        field: "summary",
+        label: "a summary",
+      });
+    }
+
+    if (showChangeSummary && !objectiveContData.changeSummary.trim()) {
+      missing.push({
+        field: "changeSummary",
+        label: "a change summary",
+      });
+    }
+
+    if (objectiveContData.subjects.length === 0) {
+      missing.push({
+        field: "subjects",
+        label: "a subject",
+      });
+    }
+
+    if (objectiveContData.targets.length === 0) {
+      missing.push({
+        field: "targets",
+        label: "a target guide",
+      });
+    } else if (!objectiveContData.featuredSubObjective) {
       missing.push({
         field: "featuredSubObjective",
         label: "a featured sub-objective",
       });
+    }
+
     return missing;
   };
 
@@ -799,56 +1046,113 @@ function Inner({
     ? new Set(missingObjectiveFields().map((m) => m.field))
     : undefined;
 
+  // publish
   const publish = async () => {
     setSubmitting(true);
+
     try {
       if (type === "guide") {
-        const text = guideContData.body.trim();
+        const text = activeGuide.body.trim();
+
         const wordCount = text ? text.split(/\s+/).length : 0;
 
         if (wordCount > MAX_WORD_COUNT) {
           toast.error("Word count limit exceeded", {
             description: `Your guide currently has ${wordCount.toLocaleString()} words. Please reduce it to ${MAX_WORD_COUNT.toLocaleString()} words or fewer.`,
           });
+
           return;
         }
       }
 
       if (type === "objective") {
         const missing = missingObjectiveFields();
+
         if (missing.length > 0) {
           setPublishAttempted(true);
+
           stepper.goTo("objective-details");
+
           throw new Error(
             `Your objective is missing ${missing.map((m) => m.label).join(", ")}`
           );
         }
+
         setPublishAttempted(false);
       }
 
       const id = await persistDraft();
-      if (!id) throw new Error("Failed to save draft before publishing");
+
+      if (!id) {
+        throw new Error("Failed to save draft before publishing");
+      }
+
       if (type === "objective") {
         await submitObjectiveRevision(id);
+
         objectiveSave.cancel();
-        if (!editSlug) clearStoredDraft("objective");
+
+        clearStoredDraft(objectiveLocalDraftId);
         setObjectiveContData(createObjectiveContData());
         setRevisionId(null);
         onPublished?.();
+
         toast.success("Objective published");
-      } else if (type) {
+
+        return;
+      }
+
+      if (type === "guide") {
         await submitRevision(id);
-        if (type === "guide") {
-          guideSave.cancel();
-          clearStoredDraft("guide");
-          setGuideContData(createGuideContData());
+
+        guideSave.cancel();
+
+        /**
+         * only delete the ACTIVE guide's local draft
+         * other guides in the multi-guide UI remain untouched
+         * TODO: publish all guides on button click - not just active draft
+         */
+        clearStoredDraft(activeGuide.localDraftId);
+
+        // remove only the published guide from the current multi-guide session
+        setGuideContData((prev) =>
+          prev.filter(
+            (guide) => guide.localDraftId !== activeGuide.localDraftId
+          )
+        );
+
+        // Select another guide if one exists.
+        const remaining = guideContData.filter(
+          (guide) => guide.localDraftId !== activeGuide.localDraftId
+        );
+
+        if (remaining.length > 0) {
+          setActiveGuideId(remaining[0].localDraftId);
         } else {
-          variantSave.cancel();
-          clearStoredDraft("variant");
-          setVariantContData(createVariantContData());
+          const newGuide = createMultiGuide();
+          setGuideContData([newGuide]);
+          setActiveGuideId(newGuide.localDraftId);
         }
+
         setRevisionId(null);
         onPublished?.();
+
+        toast.success("Submitted for review");
+
+        return;
+      }
+
+      if (type === "variant") {
+        await submitRevision(id);
+
+        variantSave.cancel();
+
+        clearStoredDraft(variantLocalDraftId);
+        setVariantContData(createVariantContData());
+        setRevisionId(null);
+
+        onPublished?.();
+
         toast.success("Submitted for review");
       }
     } catch (e) {
@@ -864,13 +1168,14 @@ function Inner({
     }
   };
 
-  if (skipTypeStep && !type) return null;
+  if (skipTypeStep && !type) {
+    return null;
+  }
 
   return (
     <div className="flex min-h-0 w-full flex-1 flex-col gap-6 pb-20 sm:pb-0">
       <MobileStepProgress steps={visibleSteps} activeStep={activeStep} />
 
-      {/* horizontal breadcrumb stepper */}
       <Stepper.List className="hidden w-full items-center justify-center text-sm sm:flex">
         <Stepper.Items>
           {(item: any, index: number) => (
@@ -884,6 +1189,7 @@ function Inner({
                   <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
                     {index + 1}
                   </span>
+
                   <Stepper.Title className="max-w-[20ch] truncate font-bold" />
                 </Stepper.Trigger>
               </Stepper.Item>
@@ -892,36 +1198,75 @@ function Inner({
         </Stepper.Items>
       </Stepper.List>
 
-      {/* content */}
       <div className="flex min-h-0 min-w-0 flex-1 flex-col">
         {!skipTypeStep && (
           <SelectType pickType={pickType} type={type} Stepper={Stepper} />
         )}
 
-        <GuideDetails
+        <GuideInfo
           Stepper={Stepper}
           type={type}
-          guideContData={guideContData}
-          setGuideContData={setGuideContData}
+          guideContData={activeGuide}
+          onGuideChange={updateActiveGuide}
+          guides={guideContData}
           subjects={subjectOptions}
-          guides={guideOptions}
+          guideOptions={guideOptions}
+          activeGuideId={activeGuideId}
+          onSelectGuide={setActiveGuideId}
+          onAddGuide={addGuide}
+          onDeleteGuide={removeGuide}
+          body={type === "guide" ? activeGuide.body : variantContData.body}
+          onBodyChange={(body) => {
+            if (type === "guide") {
+              updateActiveGuide({ body });
+            } else {
+              setVariantContData((prev) => ({ ...prev, body }));
+            }
+          }}
+          onUploadImage={uploadGuideImage}
           hideBackBtn={skipTypeStep}
           onSaveDraft={saveDraft}
           submitting={submitting}
         />
 
-        <VariantDetails
+        <PreviewGuide
+          Stepper={Stepper}
+          type={type}
+          guides={guideContData}
+          subjects={subjectOptions}
+          activeGuideId={activeGuideId}
+          onSelectGuide={setActiveGuideId}
+          onAddGuide={addGuide}
+          onDeleteGuide={removeGuide}
+          onSaveDraft={saveDraft}
+          onPublish={publish}
+          submitting={submitting}
+        />
+
+        <VariantInfo
           Stepper={Stepper}
           type={type}
           variantContData={variantContData}
-          setVariantContData={setVariantContData}
+          onVariantChange={updateActiveVariant}
           guides={guideOptions}
           subjects={subjectOptions}
+          body={variantContData.body}
+          onBodyChange={(body) => updateActiveVariant({ body })}
           hideBackBtn={skipTypeStep}
           onSaveDraft={saveDraft}
           submitting={submitting}
         />
 
+        <PreviewVariant
+          Stepper={Stepper}
+          type={type}
+          guide={variantContData}
+          subjects={subjectOptions}
+          onSaveDraft={saveDraft}
+          onPublish={publish}
+          submitting={submitting}
+        />
+
         <ObjectiveDetails
           Stepper={Stepper}
           objectiveContData={objectiveContData}
@@ -944,21 +1289,6 @@ function Inner({
           guides={guideOptions}
         />
 
-        <Content
-          Stepper={Stepper}
-          type={type}
-          body={type == "guide" ? guideContData.body : variantContData.body}
-          onBodyChange={(body) => {
-            if (type == "guide") {
-              setGuideContData((prev) => ({ ...prev, body }));
-            } else {
-              setVariantContData((prev) => ({ ...prev, body }));
-            }
-          }}
-          onUploadImage={uploadGuideImage}
-          onSaveDraft={saveDraft}
-          submitting={submitting}
-        />
         <OrderObjectiveGuides
           Stepper={Stepper}
           objectiveContData={objectiveContData}
@@ -968,16 +1298,6 @@ function Inner({
           guides={guideOptions}
         />
 
-        <PreviewGuide
-          Stepper={Stepper}
-          type={type}
-          guide={type === "guide" ? previewGuide : previewVariant}
-          guideType={type === "guide" ? guideType : undefined}
-          onSaveDraft={saveDraft}
-          onPublish={publish}
-          submitting={submitting}
-        />
-
         <PreviewObjective
           Stepper={Stepper}
           objectiveContData={objectiveContData}
diff --git a/app/src/components/contribute/StepperActionHeader.tsx b/app/src/components/contribute/StepperActionHeader.tsx
index a140c6d7..6534beae 100644
--- a/app/src/components/contribute/StepperActionHeader.tsx
+++ b/app/src/components/contribute/StepperActionHeader.tsx
@@ -2,10 +2,13 @@ import { Check, Save, Scroll } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
 import type { ContributionType } from "@/types/contributions";
+import type { AnyStoredDraft } from "@/lib/contributionStorage";
+
 import { Separator } from "@/components/ui/separator";
 import { GuidelinesModal } from "@/components/modals/GuidelinesModal";
 import { GuideSubmitModal } from "@/components/modals/GuideSubmitModal";
 import { ObjectivePublishModal } from "@/components/modals/ObjectivePublishModal";
+import { getAllStoredDrafts } from "@/lib/contributionStorage";
 
 type PropTypes = {
   title: string;
@@ -38,6 +41,9 @@ export const StepperActionHeader = ({
   const [showSubmitModal, setShowSubmitModal] = useState(false);
   const [saved, setSaved] = useState(false);
   const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [allStoredDrafts, setAllStoredDrafts] = useState<Array<AnyStoredDraft>>(
+    []
+  );
 
   const toggleGuidelineModal = () => setOpenGuidelineModal(!openGuidelineModal);
   const toggleSubmitModal = () => setShowSubmitModal(!showSubmitModal);
@@ -49,6 +55,12 @@ export const StepperActionHeader = ({
     };
   }, []);
 
+  useEffect(() => {
+    // get all drafts from localstorage
+    const allDrafts = getAllStoredDrafts();
+    setAllStoredDrafts(allDrafts);
+  }, [saved]); // TODO: should get drafts when a new draft is added to the workspace
+
   const saveDraft = async () => {
     if (!onSaveDraft) return;
     const didSave = await onSaveDraft();
@@ -87,7 +99,7 @@ export const StepperActionHeader = ({
               onClick={saveDraft}
             >
               <Save className="size-4" />
-              Save Draft
+              {allStoredDrafts.length > 1 ? "Save Drafts" : "Save Draft"}
             </button>
           )}
 
@@ -112,7 +124,7 @@ export const StepperActionHeader = ({
         </div>
       </div>
 
-      <Separator className="mb-8 hidden bg-border sm:block" />
+      <Separator className="hidden bg-border sm:block" />
 
       {(onSaveDraft || !hideBackBtn || onPublish) && (
         <div className="fixed inset-x-0 bottom-0 z-40 flex w-full items-center gap-1.5 overflow-hidden border-t bg-background/95 px-2 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] shadow-[0_-8px_24px_rgba(15,23,42,0.08)] backdrop-blur sm:hidden">
diff --git a/app/src/components/contribute/steps/Content.tsx b/app/src/components/contribute/steps/Content.tsx
index 607c66d2..42d67e0b 100644
--- a/app/src/components/contribute/steps/Content.tsx
+++ b/app/src/components/contribute/steps/Content.tsx
@@ -1,61 +1,39 @@
 import { Suspense, lazy, useEffect, useState } from "react";
-import type { ContributionType } from "@/types/contributions";
-import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
 
 const Editor = lazy(() => import("../editor/Editor"));
 
 type PropTypes = {
-  Stepper: any;
-  type: ContributionType | null;
   body: string;
   onBodyChange: (body: string) => void;
   onUploadImage?: (file: File) => Promise<string>;
-  onSaveDraft: () => void;
-  submitting?: boolean;
-  title?: string;
 };
 
-export const Content = ({
-  Stepper,
-  type,
-  body,
-  onBodyChange,
-  onUploadImage,
-  onSaveDraft,
-  submitting,
-  title = "Content",
-}: PropTypes) => {
+export const Content = ({ body, onBodyChange, onUploadImage }: PropTypes) => {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
-  return (
-    <Stepper.Content step="content">
-      <StepperActionHeader
-        title={title}
-        Stepper={Stepper}
-        onSaveDraft={onSaveDraft}
-        submitting={submitting}
-        type={type}
-      />
+  if (mounted) {
+    return (
+      <Suspense fallback={<EditorFallback />}>
+        <Editor
+          value={body}
+          onChange={onBodyChange}
+          onUploadImage={onUploadImage}
+        />
+      </Suspense>
+    );
+  } else {
+    return <EditorFallback />;
+  }
+};
 
-      {mounted && (
-        <Suspense
-          fallback={
-            <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
-              Loading Editor...
-            </div>
-          }
-        >
-          <Editor
-            value={body}
-            onChange={onBodyChange}
-            onUploadImage={onUploadImage}
-          />
-        </Suspense>
-      )}
-    </Stepper.Content>
+const EditorFallback = () => {
+  return (
+    <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+      Loading Editor...
+    </div>
   );
 };
diff --git a/app/src/components/contribute/steps/GuideDetails.tsx b/app/src/components/contribute/steps/GuideDetails.tsx
deleted file mode 100644
index b540cc18..00000000
--- a/app/src/components/contribute/steps/GuideDetails.tsx
+++ /dev/null
@@ -1,527 +0,0 @@
-import { X } from "lucide-react";
-import { useState } from "react";
-import { normalizeTodoTitle, todoPrereqSchema } from "@bluelearn/schemas";
-import type { Dispatch, SetStateAction } from "react";
-import type {
-  ContributionType,
-  GuideContribution,
-} from "@/types/contributions";
-
-import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Combobox } from "@/components/ui/combobox";
-
-type SubjectOption = { id: string; name: string };
-type GuideOption = {
-  slug: string | null;
-  title: string | null;
-  summary: string | null;
-};
-
-type PropTypes = {
-  Stepper: any;
-  type: ContributionType | null;
-  guideContData: GuideContribution;
-  setGuideContData: Dispatch<SetStateAction<GuideContribution>>;
-  subjects: Array<SubjectOption>;
-  guides: Array<GuideOption>;
-  onSaveDraft: () => void;
-  submitting?: boolean;
-  showBaseFields?: boolean;
-  hideBackBtn?: boolean;
-  title?: string;
-  changeSummary?: string;
-  onChangeSummaryChange?: (value: string) => void;
-};
-
-export const GuideDetails = ({
-  Stepper,
-  type,
-  guideContData,
-  setGuideContData,
-  subjects,
-  guides,
-  onSaveDraft,
-  submitting,
-  // Prerequisites and todos live on the guide base, so they're only
-  // authorable while the base is still a draft.
-  showBaseFields = true,
-  hideBackBtn,
-  title = "Guide Details",
-  changeSummary,
-  onChangeSummaryChange,
-}: PropTypes) => {
-  const [todoPrereq, setTodoPrereq] = useState<{
-    title: string;
-    summary: string;
-  }>({
-    title: "",
-    summary: "",
-  });
-  const [todoPrereqError, setTodoPrereqError] = useState<{
-    field: "title" | "summary";
-    message: string;
-  } | null>(null);
-  const [newSubject, setNewSubject] = useState<{
-    name: string;
-    summary: string;
-  }>({
-    name: "",
-    summary: "",
-  });
-
-  return (
-    <Stepper.Content step="guide-details">
-      <StepperActionHeader
-        title={title}
-        Stepper={Stepper}
-        type={type}
-        hideBackBtn={hideBackBtn}
-        onSaveDraft={onSaveDraft}
-        submitting={submitting}
-      />
-
-      <FieldGroup>
-        {showBaseFields && (
-          <>
-            <div className="space-y-1">
-              <FieldLabel
-                required
-                className="font-mono tracking-[0.08em] uppercase"
-              >
-                Type
-              </FieldLabel>
-              <FieldDescription className="text-xs">
-                Choose whether this guide explains a concept or teaches a
-                process for accomplishing a goal.
-              </FieldDescription>
-            </div>
-            <Field className="grid grid-cols-2 gap-2 lg:grid-cols-4">
-              <button
-                className="mono-micro rounded-full border border-badge-border p-3 tracking-[0.08em] text-badge-foreground sm:p-4"
-                style={{
-                  backgroundColor:
-                    guideContData.type == "theoretical"
-                      ? "var(--badge-bg)"
-                      : "var(--muted-bg)",
-                }}
-                onClick={() =>
-                  setGuideContData((prev) => ({
-                    ...prev,
-                    type: "theoretical",
-                  }))
-                }
-              >
-                Theoretical
-              </button>
-
-              <button
-                className="mono-micro rounded-full border border-badge-border p-3 tracking-[0.08em] text-badge-foreground sm:p-4"
-                style={{
-                  backgroundColor:
-                    guideContData.type == "practical"
-                      ? "var(--badge-bg)"
-                      : "var(--muted-bg)",
-                }}
-                onClick={() =>
-                  setGuideContData((prev) => ({
-                    ...prev,
-                    type: "practical",
-                  }))
-                }
-              >
-                Practical
-              </button>
-            </Field>
-          </>
-        )}
-        <Field className="space-y-2">
-          <div className="space-y-1">
-            <FieldLabel
-              required
-              className="font-mono tracking-[0.08em] uppercase"
-            >
-              Title
-            </FieldLabel>
-            <FieldDescription className="text-xs">
-              A clear, concise name for your guide.
-            </FieldDescription>
-          </div>
-
-          <Input
-            id="title"
-            type="text"
-            autoComplete="Title"
-            maxLength={50}
-            placeholder="Choose a title. (Maximum 50 characters)."
-            className="h-10 rounded-md"
-            required
-            value={guideContData.title}
-            onChange={(e) =>
-              setGuideContData((prev) => ({
-                ...prev,
-                title: e.target.value,
-              }))
-            }
-          />
-        </Field>
-
-        <Field className="space-y-2">
-          <div className="space-y-1">
-            <FieldLabel
-              required
-              className="font-mono tracking-[0.08em] uppercase"
-            >
-              Summary
-            </FieldLabel>
-            <FieldDescription className="text-xs">
-              Briefly describe what the reader will learn from this guide.
-            </FieldDescription>
-          </div>
-
-          <textarea
-            className="h-32 w-full min-w-0 resize-none rounded-md border border-input bg-input/20 p-2 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
-            rows={4}
-            placeholder="Write a summary for your guide."
-            required
-            value={guideContData.summary}
-            onChange={(e) =>
-              setGuideContData((prev) => ({
-                ...prev,
-                summary: e.target.value,
-              }))
-            }
-          />
-        </Field>
-
-        {onChangeSummaryChange && (
-          <Field className="space-y-2">
-            <div className="space-y-1">
-              <FieldLabel
-                required
-                className="font-mono tracking-[0.08em] uppercase"
-              >
-                Change Summary
-              </FieldLabel>
-              <FieldDescription className="text-xs">
-                Briefly describe what this revision changes.
-              </FieldDescription>
-            </div>
-
-            <textarea
-              className="h-24 w-full min-w-0 resize-none rounded-md border border-input bg-input/20 p-2 text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30"
-              rows={3}
-              maxLength={500}
-              placeholder="Describe what changed."
-              value={changeSummary ?? ""}
-              onChange={(e) => onChangeSummaryChange(e.target.value)}
-            />
-          </Field>
-        )}
-
-        <Field className="space-y-2">
-          <div className="space-y-1">
-            <FieldLabel
-              required
-              className="font-mono tracking-[0.08em] uppercase"
-            >
-              Subjects
-            </FieldLabel>
-            <FieldDescription className="text-xs">
-              Select existing subjects or add a new subject below. At least one
-              is required.
-            </FieldDescription>
-          </div>
-
-          <Combobox
-            multiple
-            items={subjects.map((s) => {
-              return {
-                value: s.id,
-                label: s.name,
-              };
-            })}
-            value={guideContData.subjects}
-            onValueChange={(ids) =>
-              setGuideContData((prev) => ({
-                ...prev,
-                subjects: ids,
-              }))
-            }
-          />
-        </Field>
-
-        <Field className="space-y-2">
-          <div className="space-y-1">
-            <FieldLabel className="font-mono tracking-[0.08em] uppercase">
-              New Subjects
-            </FieldLabel>
-            <FieldDescription className="text-xs">
-              Create a subject if it doesn't exist yet.
-            </FieldDescription>
-          </div>
-          <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
-            <Input
-              id="new-subject-name"
-              type="text"
-              maxLength={50}
-              placeholder="Enter subject name."
-              className="h-10 rounded-md"
-              value={newSubject.name}
-              onChange={(e) =>
-                setNewSubject((prev) => ({
-                  ...prev,
-                  name: e.target.value,
-                }))
-              }
-            />
-
-            <Input
-              id="new-subject-summary"
-              type="text"
-              maxLength={500}
-              placeholder="Enter summary of new subject."
-              className="h-10 rounded-md"
-              value={newSubject.summary}
-              onChange={(e) =>
-                setNewSubject((prev) => ({
-                  ...prev,
-                  summary: e.target.value,
-                }))
-              }
-            />
-            <Button
-              variant="ghost"
-              size="icon"
-              className="btn-sec h-10 w-full rounded-md sm:w-24"
-              onClick={() => {
-                if (newSubject.name !== "" && newSubject.summary !== "") {
-                  const newSubs = [...guideContData.newSubjects, newSubject];
-                  setGuideContData((prev) => ({
-                    ...prev,
-                    newSubjects: newSubs,
-                  }));
-
-                  setNewSubject({ name: "", summary: "" });
-                }
-              }}
-            >
-              Add Subject
-            </Button>
-          </div>
-        </Field>
-
-        {guideContData.newSubjects.length > 0 && (
-          <div className="flex flex-wrap gap-2 px-1">
-            {guideContData.newSubjects.map((sub, index) => (
-              <Badge key={index} variant="outline" className="gap-1.5">
-                {sub.summary ? `${sub.name} - ${sub.summary}` : sub.name}
-                <button
-                  type="button"
-                  aria-label={`Remove ${sub.name}`}
-                  title={`Remove ${sub.name}`}
-                  className="rounded-full bg-transparent p-1.5 text-muted-foreground filter transition duration-150 outline-none hover:scale-105 hover:bg-muted/10 hover:text-foreground hover:brightness-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
-                  onClick={() =>
-                    setGuideContData((prev) => ({
-                      ...prev,
-                      newSubjects: prev.newSubjects.filter(
-                        (_, i) => i !== index
-                      ),
-                    }))
-                  }
-                >
-                  <X className="size-3" />
-                </button>
-              </Badge>
-            ))}
-          </div>
-        )}
-
-        {showBaseFields && (
-          <>
-            <Field className="space-y-2">
-              <div className="space-y-1">
-                <FieldLabel className="font-mono tracking-[0.08em] uppercase">
-                  Prerequisite Guides
-                </FieldLabel>
-                <FieldDescription className="text-xs">
-                  Existing guides a reader should understand first.
-                </FieldDescription>
-              </div>
-
-              <Combobox
-                multiple
-                items={guides
-                  .filter((g): g is GuideOption & { slug: string } => !!g.slug)
-                  .map((g) => {
-                    return {
-                      value: g.slug,
-                      label: g.title ?? g.slug,
-                      description: g.summary ?? undefined,
-                    };
-                  })}
-                value={guideContData.prereqs}
-                onValueChange={(prereqs) =>
-                  setGuideContData((prev) => ({
-                    ...prev,
-                    prereqs,
-                  }))
-                }
-              />
-            </Field>
-
-            <Field className="space-y-2">
-              <div className="space-y-1">
-                <FieldLabel className="font-mono tracking-[0.08em] uppercase">
-                  Todo Prerequisite Guides
-                </FieldLabel>
-                <FieldDescription className="text-xs">
-                  Note missing prerequisite guides that don't exist yet.
-                </FieldDescription>
-              </div>
-
-              <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
-                <Input
-                  id="todo-prereqs"
-                  type="text"
-                  maxLength={50}
-                  placeholder="Enter title of missing prerequisite guide."
-                  className={`h-10 rounded-md ${todoPrereqError ? "outline-2 outline-offset-2 outline-destructive" : ""}`}
-                  value={todoPrereq.title}
-                  onChange={(e) => {
-                    setTodoPrereqError(null);
-                    setTodoPrereq((prev) => ({
-                      ...prev,
-                      title: e.target.value,
-                    }));
-                  }}
-                  aria-invalid={!!todoPrereqError}
-                  aria-describedby={
-                    todoPrereqError ? "todo-prereq-error" : undefined
-                  }
-                />
-
-                <Input
-                  id="todo-prereq-summary"
-                  type="text"
-                  maxLength={500}
-                  placeholder="Enter summary of missing prerequisite guide."
-                  className={`h-10 rounded-md ${todoPrereqError ? "outline-2 outline-offset-2 outline-destructive" : ""}`}
-                  value={todoPrereq.summary}
-                  onChange={(e) => {
-                    setTodoPrereqError(null);
-                    setTodoPrereq((prev) => ({
-                      ...prev,
-                      summary: e.target.value,
-                    }));
-                  }}
-                  aria-invalid={!!todoPrereqError}
-                  aria-describedby={
-                    todoPrereqError ? "todo-prereq-error" : undefined
-                  }
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="btn-sec h-10 w-full rounded-md sm:w-24"
-                  onClick={() => {
-                    const result = todoPrereqSchema.safeParse(todoPrereq);
-                    if (!result.success) {
-                      const issue = result.error.issues[0];
-                      const field =
-                        issue.path[0] === "summary" ? "summary" : "title";
-                      setTodoPrereqError({
-                        field,
-                        message: issue.message,
-                      });
-                      return;
-                    }
-
-                    const normalizedTitle = normalizeTodoTitle(
-                      result.data.title
-                    );
-                    if (
-                      guideContData.todoPrereqs.some(
-                        (todo) =>
-                          normalizeTodoTitle(todo.title) === normalizedTitle
-                      )
-                    ) {
-                      setTodoPrereqError({
-                        field: "title",
-                        message:
-                          "A TODO prerequisite with this title already exists.",
-                      });
-                      return;
-                    }
-
-                    setGuideContData((prev) => ({
-                      ...prev,
-                      todoPrereqs: [...prev.todoPrereqs, result.data],
-                    }));
-                    setTodoPrereq({ title: "", summary: "" });
-                    setTodoPrereqError(null);
-                  }}
-                >
-                  Add Todo
-                </Button>
-              </div>
-              <FieldError id="todo-prereq-error">
-                {todoPrereqError ? todoPrereqError.message : null}
-              </FieldError>
-            </Field>
-            {guideContData.todoPrereqs.length > 0 && (
-              <div className="flex flex-col gap-2 px-1">
-                {guideContData.todoPrereqs.map((todo, index) => (
-                  <div
-                    key={index}
-                    className="flex h-auto w-full items-start justify-between gap-1.5 rounded-md border border-input/20 px-3 py-1.5 text-left break-words whitespace-normal"
-                  >
-                    <span className="min-w-0 flex-1 pr-2">
-                      <div className="break-words">
-                        <div>
-                          <span className="font-semibold">{todo.title}</span>
-                        </div>
-                        {todo.summary && (
-                          <div className="mt-1 text-xs text-muted-foreground">
-                            {todo.summary}
-                          </div>
-                        )}
-                      </div>
-                    </span>
-
-                    <button
-                      type="button"
-                      aria-label={`Remove ${todo.title}`}
-                      className="flex-shrink-0 rounded-full bg-transparent p-1.5 text-muted-foreground filter transition duration-150 outline-none hover:scale-105 hover:bg-muted/10 hover:text-foreground hover:brightness-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
-                      onClick={() =>
-                        setGuideContData((prev) => ({
-                          ...prev,
-                          todoPrereqs: prev.todoPrereqs.filter(
-                            (_, i) => i !== index
-                          ),
-                        }))
-                      }
-                    >
-                      <X className="size-3" />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </>
-        )}
-      </FieldGroup>
-    </Stepper.Content>
-  );
-};
diff --git a/app/src/components/contribute/steps/PreviewGuide.tsx b/app/src/components/contribute/steps/PreviewGuide.tsx
deleted file mode 100644
index cc3a25f4..00000000
--- a/app/src/components/contribute/steps/PreviewGuide.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import "katex/dist/katex.min.css";
-
-import type { GuideType } from "@/types/guides";
-import type { ContributionType } from "@/types/contributions";
-import type { ReaderGuide } from "@/components/GuideReader";
-import { GuideReader } from "@/components/GuideReader";
-import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
-
-type PropTypes = {
-  Stepper: any;
-  type: ContributionType | null;
-  guide: ReaderGuide;
-  guideType?: GuideType;
-  onSaveDraft: () => void;
-  onPublish: () => void;
-  submitting: boolean;
-};
-
-export const PreviewGuide = ({
-  Stepper,
-  type,
-  guide,
-  guideType,
-  onSaveDraft,
-  onPublish,
-  submitting,
-}: PropTypes) => {
-  return (
-    <Stepper.Content step="preview-guide">
-      <StepperActionHeader
-        title={"Preview"}
-        Stepper={Stepper}
-        type={type}
-        onSaveDraft={onSaveDraft}
-        onPublish={onPublish}
-        submitting={submitting}
-      />
-
-      <GuideReader guide={guide} guideType={guideType} />
-    </Stepper.Content>
-  );
-};
diff --git a/app/src/components/contribute/steps/SelectType.tsx b/app/src/components/contribute/steps/SelectType.tsx
index 11c07ba2..51519508 100644
--- a/app/src/components/contribute/steps/SelectType.tsx
+++ b/app/src/components/contribute/steps/SelectType.tsx
@@ -21,7 +21,7 @@ export const SelectType = ({ pickType, type, Stepper }: PropTypes) => {
         hideGuidelines={true}
       />
       <div
-        className={`grid grid-cols-1 gap-2 md:grid-cols-2 ${isCurator ? "lg:grid-cols-3" : ""}`}
+        className={`grid grid-cols-1 gap-4 p-4 md:grid-cols-2 ${isCurator ? "lg:grid-cols-3" : ""}`}
       >
         <button
           className="mono-micro rounded-full border border-badge-border p-4 tracking-[0.08em] text-badge-foreground"
diff --git a/app/src/components/contribute/steps/VariantDetails.tsx b/app/src/components/contribute/steps/VariantDetails.tsx
deleted file mode 100644
index 02d0107b..00000000
--- a/app/src/components/contribute/steps/VariantDetails.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { X } from "lucide-react";
-import { useState } from "react";
-import type { Dispatch, SetStateAction } from "react";
-import type {
-  ContributionType,
-  VariantContribution,
-} from "@/types/contributions";
-import type { listGuides } from "@/lib/api/guides";
-import type { listSubjects } from "@/lib/api/subjects";
-
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-} from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Combobox } from "@/components/ui/combobox";
-import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
-
-type PropTypes = {
-  Stepper: any;
-  type: ContributionType | null;
-  variantContData: VariantContribution;
-  setVariantContData: Dispatch<SetStateAction<VariantContribution>>;
-  guides: Awaited<ReturnType<typeof listGuides>>;
-  subjects: Awaited<ReturnType<typeof listSubjects>>;
-  onSaveDraft: () => void;
-  submitting?: boolean;
-  hideBackBtn?: boolean;
-};
-
-export const VariantDetails = ({
-  Stepper,
-  type,
-  variantContData,
-  setVariantContData,
-  guides,
-  subjects,
-  onSaveDraft,
-  submitting,
-  hideBackBtn,
-}: PropTypes) => {
-  const [newSubject, setNewSubject] = useState<{
-    name: string;
-    summary: string;
-  }>({
-    name: "",
-    summary: "",
-  });
-
-  return (
-    <Stepper.Content step="variant-details">
-      <StepperActionHeader
-        title={"Variant Details"}
-        Stepper={Stepper}
-        type={type}
-        hideBackBtn={hideBackBtn}
-        onSaveDraft={onSaveDraft}
-        submitting={submitting}
-      />
-
-      <FieldGroup>
-        <Field className="space-y-2">
-          <div className="space-y-1">
-            <FieldLabel
-              required
-              className="font-mono tracking-[0.08em] uppercase"
-            >
-              Title
-            </FieldLabel>
-            <FieldDescription className="text-xs">
-              A clear, concise name for your variant.
-            </FieldDescription>
-          </div>
-
-          <Input
-            id="title"
-            type="text"
-            autoComplete="Title"
-            maxLength={50}
-            placeholder="Choose a title. (Maximum 50 characters)."
-            className="h-10 rounded-md"
-            required
-            value={variantContData.title}
-            onChange={(e) =>
-              setVariantContData((prev: any) => ({
-                ...prev,
-                title: e.target.value,
-              }))
-            }
-          />
-        </Field>
-
-        <Field className="space-y-2">
-          <div className="space-y-1">
-            <FieldLabel
-              required
-              className="font-mono tracking-[0.08em] uppercase"
-            >
-              Summary
-            </FieldLabel>
-            <FieldDescription className="text-xs">
-              Briefly describe what makes this take on the topic different.
-            </FieldDescription>
-          </div>
-
-          <textarea
-            className="h-32 w-full min-w-0 resize-none rounded-md border border-input bg-input/20 p-2 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
-            rows={4}
-            maxLength={500}
-            placeholder="Write a summary for your guide variant."
-            required
-            value={variantContData.summary}
-            onChange={(e) =>
-              setVariantContData((prev: any) => ({
-                ...prev,
-                summary: e.target.value,
-              }))
-            }
-          />
-        </Field>
-
-        <Field className="space-y-2">
-          <div className="space-y-1">
-            <FieldLabel
-              required
-              className="font-mono tracking-[0.08em] uppercase"
-            >
-              Base Guide
-            </FieldLabel>
-            <FieldDescription className="text-xs">
-              The existing guide your variant offers a different approach to.
-            </FieldDescription>
-          </div>
-
-          <Combobox
-            items={guides
-              .filter(
-                (g): g is typeof g & { slug: string } =>
-                  !!g.slug && !g.is_official
-              )
-              .map((g) => {
-                return {
-                  value: g.slug,
-                  label: g.title ?? g.slug,
-                  description: g.summary ?? undefined,
-                };
-              })}
-            value={variantContData.baseGuide}
-            onValueChange={(baseGuide) =>
-              setVariantContData((prev: any) => ({
-                ...prev,
-                baseGuide,
-              }))
-            }
-          />
-        </Field>
-        <Field className="space-y-2">
-          <div className="space-y-1">
-            <FieldLabel
-              required
-              className="font-mono tracking-[0.08em] uppercase"
-            >
-              Subjects
-            </FieldLabel>
-            <FieldDescription className="text-xs">
-              Select existing subjects or add a new subject below. At least one
-              is required.
-            </FieldDescription>
-          </div>
-
-          <Combobox
-            multiple
-            items={subjects.map((s) => {
-              return {
-                value: s.id,
-                label: s.name,
-                description: s.summary ?? "",
-              };
-            })}
-            value={variantContData.subjects}
-            onValueChange={(ids) =>
-              setVariantContData((prev: any) => ({
-                ...prev,
-                subjects: ids,
-              }))
-            }
-          />
-        </Field>
-
-        <Field className="space-y-2">
-          <div className="space-y-1">
-            <FieldLabel className="font-mono tracking-[0.08em] uppercase">
-              New Subjects
-            </FieldLabel>
-            <FieldDescription className="text-xs">
-              Create a subject if it doesn't exist yet.
-            </FieldDescription>
-          </div>
-          <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
-            <Input
-              id="new-subject-name"
-              type="text"
-              maxLength={50}
-              placeholder="Enter subject name."
-              className="h-10 rounded-md"
-              value={newSubject.name}
-              onChange={(e) =>
-                setNewSubject((prev) => ({
-                  ...prev,
-                  name: e.target.value,
-                }))
-              }
-            />
-
-            <Input
-              id="new-subject-summary"
-              type="text"
-              maxLength={500}
-              placeholder="Enter summary of new subject."
-              className="h-10 rounded-md"
-              value={newSubject.summary}
-              onChange={(e) =>
-                setNewSubject((prev) => ({
-                  ...prev,
-                  summary: e.target.value,
-                }))
-              }
-            />
-            <Button
-              variant="ghost"
-              size="icon"
-              className="btn-sec h-10 w-full rounded-md sm:w-24"
-              onClick={() => {
-                if (newSubject.name !== "" && newSubject.summary !== "") {
-                  const newSubs = [...variantContData.newSubjects, newSubject];
-                  setVariantContData((prev: any) => ({
-                    ...prev,
-                    newSubjects: newSubs,
-                  }));
-
-                  setNewSubject({ name: "", summary: "" });
-                }
-              }}
-            >
-              Add Subject
-            </Button>
-          </div>
-        </Field>
-
-        {variantContData.newSubjects.length > 0 && (
-          <div className="flex flex-wrap gap-2 px-1">
-            {variantContData.newSubjects.map((sub, index) => (
-              <Badge key={index} variant="outline" className="gap-1.5">
-                {sub.summary ? `${sub.name} - ${sub.summary}` : sub.name}
-                <button
-                  type="button"
-                  aria-label={`Remove ${sub.name}`}
-                  className="text-muted-foreground hover:text-foreground"
-                  onClick={() =>
-                    setVariantContData((prev: any) => ({
-                      ...prev,
-                      newSubjects: prev.newSubjects.filter(
-                        (_: unknown, i: number) => i !== index
-                      ),
-                    }))
-                  }
-                >
-                  <X className="size-2.5" />
-                </button>
-              </Badge>
-            ))}
-          </div>
-        )}
-      </FieldGroup>
-    </Stepper.Content>
-  );
-};
diff --git a/app/src/components/contribute/steps/guide/EditGuideInfo.tsx b/app/src/components/contribute/steps/guide/EditGuideInfo.tsx
new file mode 100644
index 00000000..a0d795ff
--- /dev/null
+++ b/app/src/components/contribute/steps/guide/EditGuideInfo.tsx
@@ -0,0 +1,113 @@
+import type {
+  ContributionType,
+  GuideContribution,
+} from "@/types/contributions";
+
+import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
+import { Content } from "@/components/contribute/steps/Content";
+import { CustomTabs } from "@/components/Tabs";
+import { GuideDetails } from "@/components/contribute/steps/guide/GuideDetails";
+
+type SubjectOption = {
+  id: string;
+  name: string;
+};
+
+type GuideOption = {
+  slug: string | null;
+  title: string | null;
+  summary: string | null;
+};
+
+type PropTypes = {
+  Stepper: any;
+  type: ContributionType | null;
+
+  guideContData: GuideContribution;
+  onGuideChange: (update: Partial<GuideContribution>) => void;
+
+  subjects: Array<SubjectOption>;
+  guides: Array<GuideOption>;
+
+  body: string;
+  onBodyChange: (body: string) => void;
+
+  onUploadImage?: (file: File) => Promise<string>;
+
+  onSaveDraft: () => void;
+  submitting?: boolean;
+
+  hideBackBtn?: boolean;
+
+  changeSummary: string;
+  onChangeSummaryChange: (value: string) => void;
+
+  title?: string;
+};
+
+export const EditGuideInfo = ({
+  Stepper,
+  type,
+  guideContData,
+  onGuideChange,
+  subjects,
+  guides,
+  body,
+  onBodyChange,
+  onUploadImage,
+  onSaveDraft,
+  submitting,
+  hideBackBtn,
+  changeSummary,
+  onChangeSummaryChange,
+  title = "Edit Guide",
+}: PropTypes) => {
+  const tabs = [
+    {
+      id: "details",
+      label: "Details",
+      content: (
+        <GuideDetails
+          type={type}
+          guideContData={guideContData}
+          onGuideChange={onGuideChange}
+          subjects={subjects}
+          guides={guides}
+          hideBackBtn={hideBackBtn}
+          onSaveDraft={onSaveDraft}
+          showBaseFields={false}
+          changeSummary={changeSummary}
+          onChangeSummaryChange={onChangeSummaryChange}
+        />
+      ),
+    },
+    {
+      id: "content",
+      label: "Content",
+      content: (
+        <Content
+          body={body}
+          onBodyChange={onBodyChange}
+          onUploadImage={onUploadImage}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Stepper.Content step="guide-info">
+      <StepperActionHeader
+        title={title}
+        Stepper={Stepper}
+        type={type}
+        hideBackBtn={hideBackBtn}
+        onSaveDraft={onSaveDraft}
+        submitting={submitting}
+      />
+
+      <div className="min-w-0 flex-1">
+        <CustomTabs tabs={tabs} />
+      </div>
+    </Stepper.Content>
+  );
+};
diff --git a/app/src/components/contribute/steps/guide/GuideDetails.tsx b/app/src/components/contribute/steps/guide/GuideDetails.tsx
new file mode 100644
index 00000000..051fb591
--- /dev/null
+++ b/app/src/components/contribute/steps/guide/GuideDetails.tsx
@@ -0,0 +1,581 @@
+import { X } from "lucide-react";
+import { useState } from "react";
+import { normalizeTodoTitle, todoPrereqSchema } from "@bluelearn/schemas";
+
+import type {
+  ContributionType,
+  GuideContribution,
+} from "@/types/contributions";
+
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Combobox } from "@/components/ui/combobox";
+import { Separator } from "@/components/ui/separator";
+
+type SubjectOption = {
+  id: string;
+  name: string;
+};
+
+type GuideOption = {
+  slug: string | null;
+  title: string | null;
+  summary: string | null;
+};
+
+/**
+ * A guide being edited inside the contribution flow.
+ *
+ * localDraftId identifies the guide locally in this browser.
+ * revisionId identifies its server-side revision, if one exists.
+ */
+export type GuideWithId = GuideContribution & {
+  localDraftId: string;
+  revisionId: string | null;
+};
+
+type PropTypes = {
+  type: ContributionType | null;
+
+  /**
+   * Currently active guide.
+   */
+  guideContData: GuideContribution;
+
+  /**
+   * Updates the currently active guide.
+   * The identity fields are deliberately not exposed as editable fields.
+   */
+  onGuideChange: (update: Partial<GuideContribution>) => void;
+  subjects: Array<SubjectOption>;
+  guides: Array<GuideOption>;
+
+  onSaveDraft: () => void;
+
+  /**
+   * Prerequisites and TODO prerequisites belong to the guide base
+   * They are only editable while creating/editing the base guide
+   */
+  showBaseFields?: boolean;
+
+  hideBackBtn?: boolean;
+
+  changeSummary?: string;
+  onChangeSummaryChange?: (value: string) => void;
+};
+
+export const GuideDetails = ({
+  guideContData,
+  onGuideChange,
+  subjects,
+  guides,
+  showBaseFields = true,
+  changeSummary,
+  onChangeSummaryChange,
+}: PropTypes) => {
+  const [todoPrereq, setTodoPrereq] = useState<{
+    title: string;
+    summary: string;
+  }>({ title: "", summary: "" });
+
+  const [todoPrereqError, setTodoPrereqError] = useState<{
+    field: "title" | "summary";
+    message: string;
+  } | null>(null);
+
+  const [newSubject, setNewSubject] = useState<{
+    name: string;
+    summary: string;
+  }>({ name: "", summary: "" });
+
+  return (
+    <div>
+      <FieldGroup>
+        {showBaseFields && (
+          <>
+            <div className="space-y-1">
+              {onChangeSummaryChange && (
+                <Field className="space-y-2">
+                  <div className="space-y-1">
+                    <FieldLabel
+                      required
+                      className="font-mono text-[14px] tracking-[0.08em] uppercase"
+                    >
+                      Change Summary
+                    </FieldLabel>
+
+                    <FieldDescription className="text-xs">
+                      Briefly describe what this revision changes.
+                    </FieldDescription>
+                  </div>
+
+                  <textarea
+                    className="h-24 w-full min-w-0 resize-none rounded-md border border-input bg-input/20 p-2 text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30"
+                    rows={3}
+                    maxLength={500}
+                    placeholder="Describe what changed."
+                    value={changeSummary ?? ""}
+                    onChange={(e) => onChangeSummaryChange(e.target.value)}
+                  />
+                </Field>
+              )}
+
+              <FieldLabel
+                required
+                className="font-mono text-[14px] tracking-[0.08em] uppercase"
+              >
+                Type
+              </FieldLabel>
+
+              <FieldDescription className="text-xs">
+                Choose whether this guide explains a concept or teaches a
+                process for accomplishing a goal.
+              </FieldDescription>
+            </div>
+
+            <Field className="grid grid-cols-2 gap-2 lg:grid-cols-4">
+              <button
+                type="button"
+                className="mono-micro rounded-full border border-badge-border p-3 tracking-[0.08em] text-badge-foreground sm:p-4"
+                style={{
+                  backgroundColor:
+                    guideContData.type === "theoretical"
+                      ? "var(--badge-bg)"
+                      : "var(--muted-bg)",
+                }}
+                onClick={() => onGuideChange({ type: "theoretical" })}
+              >
+                Theoretical
+              </button>
+
+              <button
+                type="button"
+                className="mono-micro rounded-full border border-badge-border p-3 tracking-[0.08em] text-badge-foreground sm:p-4"
+                style={{
+                  backgroundColor:
+                    guideContData.type === "practical"
+                      ? "var(--badge-bg)"
+                      : "var(--muted-bg)",
+                }}
+                onClick={() => onGuideChange({ type: "practical" })}
+              >
+                Practical
+              </button>
+            </Field>
+          </>
+        )}
+
+        <Field className="space-y-2">
+          <div className="space-y-1">
+            <FieldLabel
+              required
+              className="font-mono text-[14px] tracking-[0.08em] uppercase"
+            >
+              Title
+            </FieldLabel>
+
+            <FieldDescription className="text-xs">
+              A clear, concise name for your guide.
+            </FieldDescription>
+          </div>
+
+          <Input
+            id="title"
+            type="text"
+            autoComplete="title"
+            maxLength={50}
+            placeholder="Choose a title. (Maximum 50 characters)."
+            className="h-10 rounded-md"
+            required
+            value={guideContData.title}
+            onChange={(e) =>
+              onGuideChange({
+                title: e.target.value,
+              })
+            }
+          />
+        </Field>
+
+        <Field className="space-y-2">
+          <div className="space-y-1">
+            <FieldLabel
+              required
+              className="font-mono text-[14px] tracking-[0.08em] uppercase"
+            >
+              Summary
+            </FieldLabel>
+
+            <FieldDescription className="text-xs">
+              Briefly describe what the reader will learn from this guide.
+            </FieldDescription>
+          </div>
+
+          <textarea
+            className="h-32 w-full min-w-0 resize-none rounded-md border border-input bg-input/20 p-2 text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+            rows={4}
+            placeholder="Write a summary for your guide."
+            required
+            value={guideContData.summary}
+            onChange={(e) => onGuideChange({ summary: e.target.value })}
+          />
+        </Field>
+
+        <div className="py-2">
+          <div className="py-2">
+            <h2 className="flex font-mono text-[14px] tracking-[0.08em] text-muted-foreground uppercase">
+              Subjects
+              <span className="ml-1 self-start text-[0.9em] leading-none text-destructive">
+                *
+              </span>
+            </h2>
+
+            <p className="py-1 text-xs text-muted-foreground">
+              Subjects are flat tags for categorizing guide content. At least
+              one subject is required.
+            </p>
+            <Separator />
+          </div>
+
+          <Field className="py-2">
+            <div className="space-y-1">
+              <FieldLabel className="font-mono tracking-[0.08em] uppercase">
+                Existing Subjects
+              </FieldLabel>
+
+              <FieldDescription className="text-xs">
+                Select from existing subjects.
+              </FieldDescription>
+            </div>
+
+            <Combobox
+              multiple
+              items={subjects.map((subject) => ({
+                value: subject.id,
+                label: subject.name,
+              }))}
+              value={guideContData.subjects}
+              onValueChange={(ids) => onGuideChange({ subjects: ids })}
+            />
+          </Field>
+
+          <Field className="py-2">
+            <div className="space-y-1">
+              <FieldLabel className="font-mono tracking-[0.08em] uppercase">
+                New Subjects
+              </FieldLabel>
+
+              <FieldDescription className="text-xs">
+                Create a subject if it doesn't exist yet.
+              </FieldDescription>
+            </div>
+
+            <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+              <Input
+                id="new-subject-name"
+                type="text"
+                maxLength={50}
+                placeholder="Enter subject name."
+                className="h-10 rounded-md"
+                value={newSubject.name}
+                onChange={(e) =>
+                  setNewSubject((prev) => ({
+                    ...prev,
+                    name: e.target.value,
+                  }))
+                }
+              />
+
+              <Input
+                id="new-subject-summary"
+                type="text"
+                maxLength={500}
+                placeholder="Enter summary of new subject."
+                className="h-10 rounded-md"
+                value={newSubject.summary}
+                onChange={(e) =>
+                  setNewSubject((prev) => ({
+                    ...prev,
+                    summary: e.target.value,
+                  }))
+                }
+              />
+
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="btn-sec h-10 w-full rounded-md sm:w-24"
+                onClick={() => {
+                  if (
+                    newSubject.name.trim() !== "" &&
+                    newSubject.summary.trim() !== ""
+                  ) {
+                    onGuideChange({
+                      newSubjects: [
+                        ...guideContData.newSubjects,
+                        {
+                          name: newSubject.name,
+                          summary: newSubject.summary,
+                        },
+                      ],
+                    });
+
+                    setNewSubject({ name: "", summary: "" });
+                  }
+                }}
+              >
+                Add Subject
+              </Button>
+            </div>
+          </Field>
+
+          {guideContData.newSubjects.length > 0 && (
+            <div className="flex flex-wrap gap-2 px-1">
+              {guideContData.newSubjects.map((subject, index) => (
+                <Badge
+                  key={`${subject.name}-${index}`}
+                  variant="outline"
+                  className="gap-1.5"
+                >
+                  {subject.summary
+                    ? `${subject.name} - ${subject.summary}`
+                    : subject.name}
+
+                  <button
+                    type="button"
+                    aria-label={`Remove ${subject.name}`}
+                    title={`Remove ${subject.name}`}
+                    className="rounded-full bg-transparent p-1.5 text-muted-foreground filter transition duration-150 outline-none hover:scale-105 hover:bg-muted/10 hover:text-foreground hover:brightness-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+                    onClick={() =>
+                      onGuideChange({
+                        newSubjects: guideContData.newSubjects.filter(
+                          (_, i) => i !== index
+                        ),
+                      })
+                    }
+                  >
+                    <X className="size-3" />
+                  </button>
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {showBaseFields && (
+          <div className="py-2">
+            <div className="py-2">
+              <h2 className="font-mono text-[14px] tracking-[0.08em] text-muted-foreground uppercase">
+                Prerequisite Guides
+              </h2>
+
+              <p className="py-1 text-xs text-muted-foreground">
+                Recommended reading for learners. These are guides a learner
+                should read and understand in order to fully understand the
+                contents of this guide.
+              </p>
+
+              <Separator />
+            </div>
+
+            <Field className="py-2">
+              <div className="space-y-1">
+                <FieldLabel className="font-mono tracking-[0.08em] uppercase">
+                  Existing Prerequisite Guides
+                </FieldLabel>
+
+                <FieldDescription className="text-xs">
+                  Select from existing guides.
+                </FieldDescription>
+              </div>
+
+              <Combobox
+                multiple
+                items={guides
+                  .filter(
+                    (guide): guide is GuideOption & { slug: string } =>
+                      !!guide.slug
+                  )
+                  .map((guide) => ({
+                    value: guide.slug,
+                    label: guide.title ?? guide.slug,
+                    description: guide.summary ?? undefined,
+                  }))}
+                value={guideContData.prereqs}
+                onValueChange={(prereqs) => onGuideChange({ prereqs })}
+              />
+            </Field>
+
+            <Field className="py-2">
+              <div className="space-y-1">
+                <FieldLabel className="font-mono tracking-[0.08em] uppercase">
+                  Todo Prerequisite Guides
+                </FieldLabel>
+
+                <FieldDescription className="text-xs">
+                  Some guides don't exist, todo prerequisite guides are
+                  recommended reading material that don't currently exist.
+                </FieldDescription>
+              </div>
+
+              <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                <Input
+                  id="todo-prereqs"
+                  type="text"
+                  maxLength={50}
+                  placeholder="Enter title of missing prerequisite guide."
+                  className={`h-10 ${
+                    todoPrereqError
+                      ? "outline-2 outline-offset-2 outline-destructive"
+                      : ""
+                  }`}
+                  value={todoPrereq.title}
+                  onChange={(e) => {
+                    setTodoPrereqError(null);
+
+                    setTodoPrereq((prev) => ({
+                      ...prev,
+                      title: e.target.value,
+                    }));
+                  }}
+                  aria-invalid={!!todoPrereqError}
+                  aria-describedby={
+                    todoPrereqError ? "todo-prereq-error" : undefined
+                  }
+                />
+
+                <Input
+                  id="todo-prereq-summary"
+                  type="text"
+                  maxLength={500}
+                  placeholder="Enter summary of missing prerequisite guide."
+                  className={`h-10 ${
+                    todoPrereqError
+                      ? "outline-2 outline-offset-2 outline-destructive"
+                      : ""
+                  }`}
+                  value={todoPrereq.summary}
+                  onChange={(e) => {
+                    setTodoPrereqError(null);
+
+                    setTodoPrereq((prev) => ({
+                      ...prev,
+                      summary: e.target.value,
+                    }));
+                  }}
+                  aria-invalid={!!todoPrereqError}
+                  aria-describedby={
+                    todoPrereqError ? "todo-prereq-error" : undefined
+                  }
+                />
+
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="btn-sec h-10 w-full rounded-md sm:w-24"
+                  onClick={() => {
+                    const result = todoPrereqSchema.safeParse(todoPrereq);
+
+                    if (!result.success) {
+                      const issue = result.error.issues[0];
+
+                      const field =
+                        issue.path[0] === "summary" ? "summary" : "title";
+
+                      setTodoPrereqError({ field, message: issue.message });
+
+                      return;
+                    }
+
+                    const normalizedTitle = normalizeTodoTitle(
+                      result.data.title
+                    );
+
+                    const alreadyExists = guideContData.todoPrereqs.some(
+                      (todo) =>
+                        normalizeTodoTitle(todo.title) === normalizedTitle
+                    );
+
+                    if (alreadyExists) {
+                      setTodoPrereqError({
+                        field: "title",
+                        message:
+                          "A TODO prerequisite with this title already exists.",
+                      });
+
+                      return;
+                    }
+
+                    onGuideChange({
+                      todoPrereqs: [...guideContData.todoPrereqs, result.data],
+                    });
+
+                    setTodoPrereq({ title: "", summary: "" });
+
+                    setTodoPrereqError(null);
+                  }}
+                >
+                  Add Todo
+                </Button>
+              </div>
+
+              <FieldError id="todo-prereq-error">
+                {todoPrereqError ? todoPrereqError.message : null}
+              </FieldError>
+            </Field>
+
+            {guideContData.todoPrereqs.length > 0 && (
+              <div className="flex flex-col gap-2 px-1">
+                {guideContData.todoPrereqs.map((todo, index) => (
+                  <div
+                    key={`${todo.title}-${index}`}
+                    className="flex h-auto w-full items-start justify-between gap-1.5 rounded-md border border-input/20 px-3 py-1.5 text-left break-words whitespace-normal"
+                  >
+                    <span className="min-w-0 flex-1 pr-2">
+                      <div className="break-words">
+                        <div>
+                          <span className="font-semibold">{todo.title}</span>
+                        </div>
+
+                        {todo.summary && (
+                          <div className="mt-1 text-xs text-muted-foreground">
+                            {todo.summary}
+                          </div>
+                        )}
+                      </div>
+                    </span>
+
+                    <button
+                      type="button"
+                      aria-label={`Remove ${todo.title}`}
+                      className="flex-shrink-0 rounded-full bg-transparent p-1.5 text-muted-foreground filter transition duration-150 outline-none hover:scale-105 hover:bg-muted/10 hover:text-foreground hover:brightness-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+                      onClick={() =>
+                        onGuideChange({
+                          todoPrereqs: guideContData.todoPrereqs.filter(
+                            (_, i) => i !== index
+                          ),
+                        })
+                      }
+                    >
+                      <X className="size-3" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </FieldGroup>
+    </div>
+  );
+};
diff --git a/app/src/components/contribute/steps/guide/GuideInfo.tsx b/app/src/components/contribute/steps/guide/GuideInfo.tsx
new file mode 100644
index 00000000..e7745289
--- /dev/null
+++ b/app/src/components/contribute/steps/guide/GuideInfo.tsx
@@ -0,0 +1,139 @@
+import type {
+  ContributionType,
+  GuideContribution,
+} from "@/types/contributions";
+
+import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
+import { Content } from "@/components/contribute/steps/Content";
+import { CustomTabs } from "@/components/Tabs";
+import { GuideDetails } from "@/components/contribute/steps/guide/GuideDetails";
+import { EditorSidebar } from "@/components/sidebar/EditorSidebar";
+
+type SubjectOption = {
+  id: string;
+  name: string;
+};
+
+type GuideOption = {
+  slug: string | null;
+  title: string | null;
+  summary: string | null;
+};
+
+/**
+ * a guide currently being edited inside the local multi-guide contribution session
+ * each guide has its own localDraftId - EACH guide is an independent draft in the db
+ */
+export type GuideWithId = GuideContribution & {
+  localDraftId: string;
+  revisionId: string | null;
+};
+
+type PropTypes = {
+  Stepper: any;
+  type: ContributionType | null;
+
+  // Currently active guide.
+  guideContData: GuideWithId;
+
+  // Update only the currently active guide.
+  onGuideChange: (update: Partial<GuideWithId>) => void;
+  guides: Array<GuideWithId>;
+
+  subjects: Array<SubjectOption>;
+  guideOptions: Array<GuideOption>;
+
+  activeGuideId: string;
+
+  onSelectGuide: (id: string) => void;
+  onAddGuide: () => void;
+  onDeleteGuide: (id: string) => void;
+
+  body: string;
+  onBodyChange: (body: string) => void;
+
+  onUploadImage?: (file: File) => Promise<string>;
+
+  onSaveDraft: () => void;
+  submitting?: boolean;
+  hideBackBtn?: boolean;
+
+  title?: string;
+};
+
+export const GuideInfo = ({
+  Stepper,
+  type,
+  guideContData,
+  onGuideChange,
+  guides,
+  subjects,
+  guideOptions,
+  activeGuideId,
+  onSelectGuide,
+  onAddGuide,
+  onDeleteGuide,
+  body,
+  onBodyChange,
+  onUploadImage,
+  onSaveDraft,
+  submitting,
+  hideBackBtn,
+  title = "Guide Info",
+}: PropTypes) => {
+  const tabs = [
+    {
+      id: "details",
+      label: "Details",
+      content: (
+        <GuideDetails
+          type={type}
+          guideContData={guideContData}
+          onGuideChange={onGuideChange}
+          subjects={subjects}
+          guides={guideOptions}
+          hideBackBtn={hideBackBtn}
+          onSaveDraft={onSaveDraft}
+        />
+      ),
+    },
+    {
+      id: "content",
+      label: "Content",
+      content: (
+        <Content
+          body={body}
+          onBodyChange={onBodyChange}
+          onUploadImage={onUploadImage}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Stepper.Content step="guide-info">
+      <StepperActionHeader
+        title={title}
+        Stepper={Stepper}
+        type={type}
+        hideBackBtn={hideBackBtn}
+        onSaveDraft={onSaveDraft}
+        submitting={submitting}
+      />
+
+      <div className="flex min-h-0 flex-1">
+        <EditorSidebar
+          guides={guides}
+          activeGuideId={activeGuideId}
+          onSelectGuide={onSelectGuide}
+          onAddGuide={onAddGuide}
+          onDeleteGuide={onDeleteGuide}
+        />
+
+        <div className="min-h-[calc(100vh-65px)] min-w-0 flex-1 pt-4 md:border-l md:pl-5">
+          <CustomTabs tabs={tabs} />
+        </div>
+      </div>
+    </Stepper.Content>
+  );
+};
diff --git a/app/src/components/contribute/steps/guide/PreviewGuide.tsx b/app/src/components/contribute/steps/guide/PreviewGuide.tsx
new file mode 100644
index 00000000..610bf568
--- /dev/null
+++ b/app/src/components/contribute/steps/guide/PreviewGuide.tsx
@@ -0,0 +1,134 @@
+import "katex/dist/katex.min.css";
+
+import { useEffect, useState } from "react";
+
+import type {
+  ContributionType,
+  GuideContribution,
+} from "@/types/contributions";
+import type { GuideType } from "@/types/guides";
+import type { listSubjects } from "@/lib/api/subjects";
+
+import type { ReaderGuide } from "@/components/GuideReader";
+import { GuideReader } from "@/components/GuideReader";
+import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
+import { EditorSidebar } from "@/components/sidebar/EditorSidebar";
+import { getMyIdentity } from "@/lib/api/identity";
+
+export type GuideWithId = GuideContribution & {
+  type: GuideType;
+  localDraftId: string;
+  revisionId: string | null;
+};
+
+type PropTypes = {
+  Stepper: any;
+  type: ContributionType | null;
+
+  guides: Array<GuideWithId>;
+  subjects: Awaited<ReturnType<typeof listSubjects>>;
+
+  activeGuideId: string;
+
+  onSelectGuide: (localDraftId: string) => void;
+  onAddGuide: () => void;
+  onDeleteGuide: (localDraftId: string) => void;
+
+  onSaveDraft: () => void;
+  onPublish: () => void;
+  submitting: boolean;
+};
+
+export const PreviewGuide = ({
+  Stepper,
+  type,
+  guides,
+  subjects,
+  activeGuideId,
+  onSelectGuide,
+  onAddGuide,
+  onDeleteGuide,
+  onSaveDraft,
+  onPublish,
+  submitting,
+}: PropTypes) => {
+  const [username, setUsername] = useState<string | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const opts = { signal: controller.signal };
+
+    getMyIdentity(opts)
+      .then((data) => setUsername(data.profile.username))
+      .catch(() => {});
+
+    return () => controller.abort();
+  }, []);
+
+  const activeGuide = guides.find(
+    (guide) => guide.localDraftId === activeGuideId
+  );
+
+  const readerGuide: ReaderGuide | null = activeGuide
+    ? {
+        slug: activeGuide.localDraftId,
+        variant_slug: null,
+
+        title: activeGuide.title,
+        author: username ?? "You",
+        summary: activeGuide.summary || null,
+        body: activeGuide.body || null,
+
+        duration_minutes: 0,
+        created_at: new Date().toISOString(),
+
+        prerequisites: activeGuide.prereqs.map((slug) => ({
+          slug,
+          title: slug,
+        })),
+
+        tags: activeGuide.subjects.map((id) => {
+          const subject = subjects.filter((sub) => sub.id === id);
+
+          return {
+            slug: subject[0]?.slug,
+            name: subject[0]?.name,
+          };
+        }),
+      }
+    : null;
+
+  return (
+    <Stepper.Content step="preview-guide">
+      <StepperActionHeader
+        title="Preview"
+        Stepper={Stepper}
+        type={type}
+        onSaveDraft={onSaveDraft}
+        onPublish={onPublish}
+        submitting={submitting}
+      />
+
+      <div className="flex min-h-0 flex-1">
+        <EditorSidebar
+          guides={guides}
+          activeGuideId={activeGuideId}
+          onSelectGuide={onSelectGuide}
+          onAddGuide={onAddGuide}
+          onDeleteGuide={onDeleteGuide}
+          hideActionBtns={true}
+        />
+
+        <div className="min-h-[calc(100vh-65px)] min-w-0 flex-1 pt-4 pt-8 md:border-l md:pl-8">
+          {readerGuide ? (
+            <GuideReader guide={readerGuide} guideType={activeGuide?.type} />
+          ) : (
+            <div className="flex h-full items-center justify-center">
+              <p className="text-muted-foreground">No guide selected.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </Stepper.Content>
+  );
+};
diff --git a/app/src/components/contribute/steps/ObjectiveDetails.tsx b/app/src/components/contribute/steps/objective/ObjectiveDetails.tsx
similarity index 100%
rename from app/src/components/contribute/steps/ObjectiveDetails.tsx
rename to app/src/components/contribute/steps/objective/ObjectiveDetails.tsx
diff --git a/app/src/components/contribute/steps/OrderObjectiveGuides.tsx b/app/src/components/contribute/steps/objective/OrderObjectiveGuides.tsx
similarity index 100%
rename from app/src/components/contribute/steps/OrderObjectiveGuides.tsx
rename to app/src/components/contribute/steps/objective/OrderObjectiveGuides.tsx
diff --git a/app/src/components/contribute/steps/OrderTargetGuides.tsx b/app/src/components/contribute/steps/objective/OrderTargetGuides.tsx
similarity index 100%
rename from app/src/components/contribute/steps/OrderTargetGuides.tsx
rename to app/src/components/contribute/steps/objective/OrderTargetGuides.tsx
diff --git a/app/src/components/contribute/steps/PreviewObjective.tsx b/app/src/components/contribute/steps/objective/PreviewObjective.tsx
similarity index 98%
rename from app/src/components/contribute/steps/PreviewObjective.tsx
rename to app/src/components/contribute/steps/objective/PreviewObjective.tsx
index d950c6db..f268b2e5 100644
--- a/app/src/components/contribute/steps/PreviewObjective.tsx
+++ b/app/src/components/contribute/steps/objective/PreviewObjective.tsx
@@ -254,15 +254,17 @@ export const PreviewObjective = ({
         <PreviewObjectiveCard objective={previewData} />
 
         <div className="space-y-6">
-          <h3 className="px-1 text-lg font-semibold tracking-tight">
+          <h3 className="font-mono text-[12px] tracking-[0.08em] text-muted-foreground uppercase">
             Sub-Objectives
           </h3>
+          <Separator className="mb-4 bg-border" />
+
           {objectiveContData.targets.length === 0 ? (
             <p className="px-1 text-sm text-muted-foreground">
               No sub-objectives configured.
             </p>
           ) : (
-            <ol className="m-0 flex w-full list-none flex-col gap-10 p-0">
+            <ol className="m-0 flex w-full list-none flex-col gap-10 px-0 pb-8">
               {objectiveContData.targets.map((targetSlug, idx) => {
                 const sub = objectiveContData.subObjectives.find(
                   (s) => s.targetSlug === targetSlug
diff --git a/app/src/components/contribute/steps/variant/PreviewVariant.tsx b/app/src/components/contribute/steps/variant/PreviewVariant.tsx
new file mode 100644
index 00000000..a34c3570
--- /dev/null
+++ b/app/src/components/contribute/steps/variant/PreviewVariant.tsx
@@ -0,0 +1,95 @@
+import "katex/dist/katex.min.css";
+
+import { useEffect, useState } from "react";
+
+import type {
+  ContributionType,
+  VariantContribution,
+} from "@/types/contributions";
+import type { listSubjects } from "@/lib/api/subjects";
+import type { ReaderGuide } from "@/components/GuideReader";
+
+import { getMyIdentity } from "@/lib/api/identity";
+
+import { GuideReader } from "@/components/GuideReader";
+import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
+
+type PropTypes = {
+  Stepper: any;
+  type: ContributionType | null;
+
+  guide: VariantContribution;
+  subjects: Awaited<ReturnType<typeof listSubjects>>;
+
+  onSaveDraft: () => void;
+  onPublish: () => void;
+  submitting: boolean;
+};
+
+export const PreviewVariant = ({
+  Stepper,
+  type,
+  guide,
+  subjects,
+  onSaveDraft,
+  onPublish,
+  submitting,
+}: PropTypes) => {
+  const [username, setUsername] = useState<string | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const opts = { signal: controller.signal };
+
+    getMyIdentity(opts)
+      .then((data) => setUsername(data.profile.username))
+      .catch(() => {});
+
+    return () => controller.abort();
+  }, []);
+
+  const readerGuide: ReaderGuide = {
+    slug: "preview",
+
+    variant_slug: guide.baseGuide || null,
+
+    title: guide.title,
+    author: username ?? "You",
+    summary: guide.summary || null,
+    body: guide.body || null,
+
+    duration_minutes: 0,
+    created_at: new Date().toISOString(),
+
+    // variants don't have prerequisites
+    prerequisites: [],
+
+    tags: guide.subjects.map((id: string) => {
+      const subject = subjects.filter((sub) => sub.id === id);
+
+      return {
+        slug: subject[0]?.slug,
+        name: subject[0]?.name,
+      };
+    }),
+  };
+
+  return (
+    <Stepper.Content step="preview-variant">
+      <StepperActionHeader
+        title="Preview"
+        Stepper={Stepper}
+        type={type}
+        onSaveDraft={onSaveDraft}
+        onPublish={onPublish}
+        submitting={submitting}
+      />
+
+      <div className="flex min-h-0 flex-1">
+        <div className="min-h-[calc(100vh-65px)] min-w-0 flex-1 pt-8 md:pl-8">
+          <GuideReader guide={readerGuide} guideType={guide.type} />
+        </div>
+      </div>
+    </Stepper.Content>
+  );
+};
diff --git a/app/src/components/contribute/steps/variant/VariantDetails.tsx b/app/src/components/contribute/steps/variant/VariantDetails.tsx
new file mode 100644
index 00000000..ba49866b
--- /dev/null
+++ b/app/src/components/contribute/steps/variant/VariantDetails.tsx
@@ -0,0 +1,250 @@
+import { X } from "lucide-react";
+import { useState } from "react";
+import type { VariantContribution } from "@/types/contributions";
+import type { listGuides } from "@/lib/api/guides";
+import type { listSubjects } from "@/lib/api/subjects";
+
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Combobox } from "@/components/ui/combobox";
+import { Separator } from "@/components/ui/separator";
+
+type PropTypes = {
+  variantContData: VariantContribution;
+  onVariantChange: (update: Partial<VariantContribution>) => void;
+
+  guides: Awaited<ReturnType<typeof listGuides>>;
+  subjects: Awaited<ReturnType<typeof listSubjects>>;
+};
+
+export const VariantDetails = ({
+  variantContData,
+  onVariantChange,
+  guides,
+  subjects,
+}: PropTypes) => {
+  const [newSubject, setNewSubject] = useState<{
+    name: string;
+    summary: string;
+  }>({ name: "", summary: "" });
+
+  return (
+    <FieldGroup>
+      <Field className="space-y-2">
+        <div className="space-y-1">
+          <FieldLabel
+            required
+            className="font-mono text-[14px] tracking-[0.08em] uppercase"
+          >
+            Title
+          </FieldLabel>
+          <FieldDescription className="text-xs">
+            A clear, concise name for your variant.
+          </FieldDescription>
+        </div>
+
+        <Input
+          id="title"
+          type="text"
+          autoComplete="Title"
+          maxLength={50}
+          placeholder="Choose a title. (Maximum 50 characters)."
+          className="h-10 rounded-md"
+          required
+          value={variantContData.title}
+          onChange={(e) => onVariantChange({ title: e.target.value })}
+        />
+      </Field>
+
+      <Field className="space-y-2">
+        <div className="space-y-1">
+          <FieldLabel
+            required
+            className="font-mono text-[14px] tracking-[0.08em] uppercase"
+          >
+            Summary
+          </FieldLabel>
+          <FieldDescription className="text-xs">
+            Briefly describe what makes this take on the topic different.
+          </FieldDescription>
+        </div>
+
+        <textarea
+          className="h-32 w-full min-w-0 resize-none rounded-md border border-input bg-input/20 p-2 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+          rows={4}
+          maxLength={500}
+          placeholder="Write a summary for your guide variant."
+          required
+          value={variantContData.summary}
+          onChange={(e) => onVariantChange({ summary: e.target.value })}
+        />
+      </Field>
+
+      <Field className="space-y-2">
+        <div className="space-y-1">
+          <FieldLabel
+            required
+            className="font-mono text-[14px] tracking-[0.08em] uppercase"
+          >
+            Base Guide
+          </FieldLabel>
+          <FieldDescription className="text-xs">
+            The existing guide your variant offers a different approach to.
+          </FieldDescription>
+        </div>
+
+        <Combobox
+          items={guides
+            .filter(
+              (g): g is typeof g & { slug: string } =>
+                !!g.slug && !g.is_official
+            )
+            .map((g) => {
+              return {
+                value: g.slug,
+                label: g.title ?? g.slug,
+                description: g.summary ?? undefined,
+              };
+            })}
+          value={variantContData.baseGuide}
+          onValueChange={(baseGuide) => onVariantChange({ baseGuide })}
+        />
+      </Field>
+
+      <div className="py-2">
+        <div className="py-2">
+          <h2 className="flex font-mono text-[14px] tracking-[0.08em] text-muted-foreground uppercase">
+            Subjects
+            <span className="ml-1 self-start text-[0.9em] leading-none text-destructive">
+              *
+            </span>
+          </h2>
+
+          <p className="py-1 text-xs text-muted-foreground">
+            Subjects are flat tags for categorizing guide content. At least one
+            subject is required.
+          </p>
+          <Separator />
+        </div>
+
+        <Field className="py-2">
+          <div className="space-y-1">
+            <FieldLabel className="font-mono tracking-[0.08em] uppercase">
+              Existing Subjects
+            </FieldLabel>
+            <FieldDescription className="text-xs">
+              Select existing subjects or add a new subject below. At least one
+              is required.
+            </FieldDescription>
+          </div>
+
+          <Combobox
+            multiple
+            items={subjects.map((s) => {
+              return {
+                value: s.id,
+                label: s.name,
+                description: s.summary ?? "",
+              };
+            })}
+            value={variantContData.subjects}
+            onValueChange={(ids) => onVariantChange({ subjects: ids })}
+          />
+        </Field>
+
+        <Field className="py-2">
+          <div className="space-y-1">
+            <FieldLabel className="font-mono tracking-[0.08em] uppercase">
+              New Subjects
+            </FieldLabel>
+
+            <FieldDescription className="text-xs">
+              Create a subject if it doesn't exist yet.
+            </FieldDescription>
+          </div>
+
+          <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+            <Input
+              id="new-subject-name"
+              type="text"
+              maxLength={50}
+              placeholder="Enter subject name."
+              className="h-10 rounded-md"
+              value={newSubject.name}
+              onChange={(e) =>
+                setNewSubject((prev) => ({
+                  ...prev,
+                  name: e.target.value,
+                }))
+              }
+            />
+
+            <Input
+              id="new-subject-summary"
+              type="text"
+              maxLength={500}
+              placeholder="Enter summary of new subject."
+              className="h-10 rounded-md"
+              value={newSubject.summary}
+              onChange={(e) =>
+                setNewSubject((prev) => ({
+                  ...prev,
+                  summary: e.target.value,
+                }))
+              }
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="btn-sec h-10 w-full rounded-md sm:w-24"
+              onClick={() => {
+                if (
+                  newSubject.name.trim() !== "" &&
+                  newSubject.summary.trim() !== ""
+                ) {
+                  onVariantChange({
+                    newSubjects: [...variantContData.newSubjects, newSubject],
+                  });
+                  setNewSubject({ name: "", summary: "" });
+                }
+              }}
+            >
+              Add Subject
+            </Button>
+          </div>
+        </Field>
+
+        {variantContData.newSubjects.length > 0 && (
+          <div className="flex flex-wrap gap-2 px-1">
+            {variantContData.newSubjects.map((sub, index) => (
+              <Badge key={index} variant="outline" className="gap-1.5">
+                {sub.summary ? `${sub.name} - ${sub.summary}` : sub.name}
+                <button
+                  type="button"
+                  aria-label={`Remove ${sub.name}`}
+                  className="text-muted-foreground hover:text-foreground"
+                  onClick={() =>
+                    onVariantChange({
+                      newSubjects: variantContData.newSubjects.filter(
+                        (_, i) => i !== index
+                      ),
+                    })
+                  }
+                >
+                  <X className="size-2.5" />
+                </button>
+              </Badge>
+            ))}
+          </div>
+        )}
+      </div>
+    </FieldGroup>
+  );
+};
diff --git a/app/src/components/contribute/steps/variant/VariantInfo.tsx b/app/src/components/contribute/steps/variant/VariantInfo.tsx
new file mode 100644
index 00000000..340933c4
--- /dev/null
+++ b/app/src/components/contribute/steps/variant/VariantInfo.tsx
@@ -0,0 +1,93 @@
+import type {
+  ContributionType,
+  VariantContribution,
+} from "@/types/contributions";
+
+import type { listGuides } from "@/lib/api/guides";
+import type { listSubjects } from "@/lib/api/subjects";
+
+import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
+import { CustomTabs } from "@/components/Tabs";
+import { VariantDetails } from "@/components/contribute/steps/variant/VariantDetails";
+import { Content } from "@/components/contribute/steps/Content";
+
+type PropTypes = {
+  Stepper: any;
+  type: ContributionType | null;
+
+  variantContData: VariantContribution;
+  onVariantChange: (update: Partial<VariantContribution>) => void;
+
+  subjects: Awaited<ReturnType<typeof listSubjects>>;
+  guides: Awaited<ReturnType<typeof listGuides>>;
+
+  body: string;
+  onBodyChange: (body: string) => void;
+
+  onUploadImage?: (file: File) => Promise<string>;
+
+  onSaveDraft: () => void;
+  submitting?: boolean;
+  hideBackBtn?: boolean;
+
+  title?: string;
+};
+
+export const VariantInfo = ({
+  Stepper,
+  type,
+  variantContData,
+  onVariantChange,
+  subjects,
+  guides,
+  body,
+  onBodyChange,
+  onUploadImage,
+  onSaveDraft,
+  submitting,
+  hideBackBtn,
+  title = "Variant Info",
+}: PropTypes) => {
+  const tabs = [
+    {
+      id: "details",
+      label: "Details",
+      content: (
+        <VariantDetails
+          variantContData={variantContData}
+          onVariantChange={onVariantChange}
+          subjects={subjects}
+          guides={guides}
+        />
+      ),
+    },
+    {
+      id: "content",
+      label: "Content",
+      content: (
+        <Content
+          body={body}
+          onBodyChange={onBodyChange}
+          onUploadImage={onUploadImage}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Stepper.Content step="variant-info">
+      <StepperActionHeader
+        title={title}
+        Stepper={Stepper}
+        type={type}
+        hideBackBtn={hideBackBtn}
+        onSaveDraft={onSaveDraft}
+        submitting={submitting}
+      />
+
+      <div className="min-h-[calc(100vh-65px)] min-w-0 flex-1 pt-4 md:pl-5">
+        <CustomTabs tabs={tabs} />
+      </div>
+    </Stepper.Content>
+  );
+};
diff --git a/app/src/components/modals/SelectDraftModal.tsx b/app/src/components/modals/SelectDraftModal.tsx
new file mode 100644
index 00000000..6f907f1d
--- /dev/null
+++ b/app/src/components/modals/SelectDraftModal.tsx
@@ -0,0 +1,160 @@
+import { useEffect, useState } from "react";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Combobox } from "@/components/ui/combobox";
+
+import { getGuideDrafts } from "@/lib/api/identity";
+import { getStoredDraftsByType } from "@/lib/contributionStorage";
+import { Button } from "@/components/ui/button";
+
+type GuideDraft = {
+  revision_id: string;
+  guide_id: string;
+  title: string;
+  guide_slug: string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+type PropTypes = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedDrafts: Array<string>;
+  onDraftsChange: (draftIds: Array<string>) => void;
+};
+
+export const SelectDraftModal = ({
+  open,
+  onOpenChange,
+  selectedDrafts,
+  onDraftsChange,
+}: PropTypes) => {
+  const [drafts, setDrafts] = useState<Array<GuideDraft>>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    let cancelled = false;
+
+    async function fetchDrafts() {
+      setLoading(true);
+
+      try {
+        const serverDrafts = await getGuideDrafts();
+        const localDrafts = getStoredDraftsByType("guide");
+
+        const localRevisionIds = new Set(
+          localDrafts
+            .map((draft) => draft.revisionId)
+            .filter((revisionId): revisionId is string => revisionId !== null)
+        );
+
+        // Only show server drafts that aren't already in localStorage
+        const availableDrafts = serverDrafts.filter(
+          (draft) => !localRevisionIds.has(draft.revision_id)
+        );
+
+        if (!cancelled) {
+          setDrafts(availableDrafts);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          console.error("Failed to fetch guide drafts:", error);
+          setDrafts([]);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchDrafts();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
+  const handleAddDrafts = () => {
+    onDraftsChange(selectedDrafts);
+    onOpenChange(false);
+  };
+  const handleCancel = () => {
+    onDraftsChange([]);
+    onOpenChange(false);
+  };
+
+  const items = drafts.map((draft) => ({
+    value: draft.revision_id,
+    label: draft.title || "Untitled Draft",
+  }));
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[85vh] flex-col gap-0 p-0 sm:max-w-2xl">
+        <DialogHeader className="gap-2 border-b border-border px-6 py-5">
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <span className="mono-micro">Drafts</span>
+          </div>
+
+          <DialogTitle className="editorial-heading text-2xl">
+            Select Existing Drafts
+          </DialogTitle>
+
+          <DialogDescription className="text-xs text-muted-foreground">
+            Add existing drafts that you have already created to edit multiple
+            guides in one submission.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="p-6">
+          {!loading ? (
+            <Combobox
+              multiple
+              items={items}
+              value={selectedDrafts}
+              onValueChange={onDraftsChange}
+              placeholder="Select drafts..."
+            />
+          ) : (
+            <p>Loading Drafts</p>
+          )}
+        </div>
+
+        <DialogFooter className="p-5 pt-0">
+          <DialogClose asChild>
+            <Button
+              variant="outline"
+              size="lg"
+              className="btn-sec"
+              onClick={handleCancel}
+            >
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button
+            size="lg"
+            className="btn-pri"
+            onClick={handleAddDrafts}
+            disabled={selectedDrafts.length === 0 || loading}
+          >
+            Add {selectedDrafts.length > 0 ? `${selectedDrafts.length} ` : ""}{" "}
+            Draft{selectedDrafts.length === 1 ? "" : "s"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/app/src/components/sidebar/EditorSidebar.tsx b/app/src/components/sidebar/EditorSidebar.tsx
new file mode 100644
index 00000000..0823fb3c
--- /dev/null
+++ b/app/src/components/sidebar/EditorSidebar.tsx
@@ -0,0 +1,227 @@
+import { useState } from "react";
+import {
+  FilePlus,
+  FileSearch,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Plus,
+  Trash,
+} from "lucide-react";
+
+import type { GuideContribution } from "@/types/contributions";
+
+import { cn } from "@/lib/utils";
+
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { SelectDraftModal } from "@/components/modals/SelectDraftModal";
+
+type GuideOption = Pick<GuideContribution, "title"> & {
+  localDraftId: string;
+};
+
+type Props = {
+  guides: Array<GuideOption>;
+  activeGuideId: string;
+  hideActionBtns?: boolean;
+
+  onSelectGuide: (localDraftId: string) => void;
+  onAddGuide: () => void;
+  onDeleteGuide: (localDraftId: string) => void;
+};
+
+export const EditorSidebar = ({
+  guides,
+  activeGuideId,
+  hideActionBtns = false,
+  onSelectGuide,
+  onAddGuide,
+  onDeleteGuide,
+}: Props) => {
+  const [collapsed, setCollapsed] = useState(false);
+  const [selectDraftModalOpen, setSelectDraftModalOpen] = useState(false);
+  const [selectedDrafts, setSelectedDrafts] = useState<Array<string>>([]);
+
+  const handleSelectExistingDrafts = (draftIds: Array<string>) => {
+    setSelectedDrafts(draftIds);
+  };
+
+  return (
+    <aside
+      className={cn(
+        "sticky top-[65px] max-h-[calc(100vh-65px)] shrink-0 self-start overflow-y-auto transition-[width] duration-200",
+        collapsed ? "w-16" : "w-64"
+      )}
+    >
+      {/* Header */}
+      <div
+        className={cn(
+          "flex min-h-16 items-center",
+          collapsed
+            ? "justify-center px-2"
+            : hideActionBtns
+              ? "justify-end px-4"
+              : "justify-between px-4"
+        )}
+      >
+        {/* Action buttons */}
+        {!collapsed && !hideActionBtns && (
+          <div className="grid w-full grid-cols-2">
+            <DropdownMenu modal={false}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="default"
+                      size="icon-lg"
+                      className="btn-pri"
+                      aria-label="Add guide draft"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+
+                <TooltipContent>
+                  <p>Add Draft</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <DropdownMenuContent
+                align="start"
+                className="w-48 font-mono uppercase"
+              >
+                <DropdownMenuItem asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={() => setSelectDraftModalOpen(true)}
+                    className="w-full justify-start"
+                    aria-label="Select existing draft"
+                  >
+                    <FileSearch className="h-4 w-4" />
+                    Select Existing Draft
+                  </Button>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={onAddGuide}
+                    className="w-full justify-start"
+                    aria-label="Create blank draft"
+                  >
+                    <FilePlus className="h-4 w-4" />
+                    Create Blank Draft
+                  </Button>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  size="icon-lg"
+                  onClick={() => onDeleteGuide(activeGuideId)}
+                  className="btn-destructive"
+                  disabled={guides.length <= 1}
+                  aria-label="Delete guide"
+                >
+                  <Trash className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+
+              <TooltipContent>
+                <p>Remove Draft</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        )}
+
+        {/* Collapse & Expand button */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon-lg"
+              onClick={() => setCollapsed((prev) => !prev)}
+              className="btn-outline shrink-0"
+              aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            >
+              {collapsed ? (
+                <PanelLeftOpen className="h-4 w-4 transition-transform duration-200" />
+              ) : (
+                <PanelLeftClose className="h-4 w-4 transition-transform duration-200" />
+              )}
+            </Button>
+          </TooltipTrigger>
+
+          <TooltipContent>
+            <p>{collapsed ? "Show Sidebar" : "Hide Sidebar"}</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+
+      <Separator />
+
+      {/* Guide Drafts */}
+      <ul>
+        {guides.map((guide, index) => {
+          const active = guide.localDraftId === activeGuideId;
+
+          const displayTitle = guide.title.trim() || `Guide ${index + 1}`;
+
+          return (
+            <li key={guide.localDraftId}>
+              <button
+                type="button"
+                onClick={() => onSelectGuide(guide.localDraftId)}
+                className={cn(
+                  "data-label flex w-full items-center py-4 text-left transition-colors",
+                  collapsed ? "justify-center px-0" : "gap-4 px-2",
+                  "hover:font-bold hover:text-brand-bright-blue",
+                  active && "!font-bold !text-brand-bright-blue"
+                )}
+                title={collapsed ? displayTitle : undefined}
+                aria-current={active ? "step" : undefined}
+              >
+                <span className="shrink-0">{index + 1}</span>
+
+                {!collapsed && (
+                  <span className="min-w-0 truncate">{displayTitle}</span>
+                )}
+              </button>
+
+              <Separator />
+            </li>
+          );
+        })}
+      </ul>
+
+      {selectDraftModalOpen && (
+        <SelectDraftModal
+          open={selectDraftModalOpen}
+          onOpenChange={setSelectDraftModalOpen}
+          selectedDrafts={selectedDrafts}
+          onDraftsChange={handleSelectExistingDrafts}
+        />
+      )}
+    </aside>
+  );
+};
diff --git a/app/src/lib/api/identity.ts b/app/src/lib/api/identity.ts
index 2ea0a716..e8aad679 100644
--- a/app/src/lib/api/identity.ts
+++ b/app/src/lib/api/identity.ts
@@ -41,3 +41,13 @@ export async function getProfilePage(
 
   return await res.json();
 }
+
+export async function getGuideDrafts({ signal }: FetchOptions = {}) {
+  const res = await client.me.drafts.$get({}, { init: { signal } });
+
+  await assertOk(res);
+
+  const data = await res.json();
+
+  return data.guide_drafts;
+}
diff --git a/app/src/lib/contributionFlow.ts b/app/src/lib/contributionFlow.ts
index 5fc9bf35..c641a886 100644
--- a/app/src/lib/contributionFlow.ts
+++ b/app/src/lib/contributionFlow.ts
@@ -4,15 +4,13 @@ export const typeStep = [{ id: "type", title: "Contribution Type" }] as const;
 // flow definitions
 export const flows = {
   guide: [
-    { id: "guide-details", title: "Guide Details" },
-    { id: "content", title: "Content" },
+    { id: "guide-info", title: "Guide Info" },
     { id: "preview-guide", title: "Preview" },
   ],
 
   variant: [
-    { id: "variant-details", title: "Variant Details" },
-    { id: "content", title: "Content" },
-    { id: "preview-guide", title: "Preview" },
+    { id: "variant-info", title: "Variant Info" },
+    { id: "preview-variant", title: "Preview" },
   ],
 
   objective: [
diff --git a/app/src/lib/contributionStorage.ts b/app/src/lib/contributionStorage.ts
index 87a220d4..accfb469 100644
--- a/app/src/lib/contributionStorage.ts
+++ b/app/src/lib/contributionStorage.ts
@@ -8,16 +8,13 @@ import {
 } from "@/types/contributions";
 
 /**
- * All locally stored contribution drafts live under one localStorage key.
+ * all locally stored contribution drafts exist under one localStorage key
  */
 const STORAGE_KEY = "bluelearn:contrib:drafts";
 
 /**
- * localDraftId:
- *   Identifies the draft inside this browser.
- *
- * revisionId:
- *   Identifies the corresponding database revision, if one exists.
+ * localDraftId - identifies the draft inside this browser
+ * revisionId - identifies the corresponding database revision (if it exists)
  */
 export interface PersistedContributionDraft<T> {
   localDraftId: string;
@@ -29,17 +26,10 @@ export interface PersistedContributionDraft<T> {
 }
 
 /**
- * Raw localStorage structure.
- *
- * Values are unknown until they are validated against the
- * appropriate contribution schema.
+ * localStorage structure - values are unknown until they are validated against the contribution schema
  */
 type StoredDrafts = Record<string, unknown>;
 
-/**
- * Creates the complete validation schema for a particular
- * contribution type.
- */
 const persistedDraftSchema = <T extends z.ZodType>(
   type: ContributionType,
   dataSchema: T
@@ -56,46 +46,34 @@ const persistedDraftSchema = <T extends z.ZodType>(
     updatedAt: z.number(),
   });
 
-/**
- * Schema used to determine which contribution schema should
- * validate an individual draft.
- */
+// schema determine which contribution schema should validate an individual draft
 const draftEnvelopeSchema = z.object({
   localDraftId: z.string().min(1),
   type: z.enum(["guide", "variant", "objective"]),
 });
 
-/**
- * Schemas for each contribution type.
- *
- * The literal `type` on each schema creates the discriminated
- * relationship between `type` and `data`.
- */
+// schemas for each contribution type
 const DRAFT_SCHEMAS = {
   guide: persistedDraftSchema("guide", guideContributionSchema),
   variant: persistedDraftSchema("variant", variantContributionSchema),
   objective: persistedDraftSchema("objective", objectiveContributionSchema),
 };
 
-/**
- * Types generated directly from the Zod schemas.
- */
+// types generated directly from Zod schemas
 type StoredGuideDraft = z.infer<typeof DRAFT_SCHEMAS.guide>;
 
 type StoredVariantDraft = z.infer<typeof DRAFT_SCHEMAS.variant>;
 
 type StoredObjectiveDraft = z.infer<typeof DRAFT_SCHEMAS.objective>;
 
-type AnyStoredDraft =
+export type AnyStoredDraft =
   | StoredGuideDraft
   | StoredVariantDraft
   | StoredObjectiveDraft;
 
 /**
- * Safely reads the complete raw draft store from localStorage.
- *
- * Individual drafts are validated later - each contribution
- * type has a different data schema.
+ * reads the complete raw draft from localStorage
+ * individual drafts are validated later - each contribution type has a different data schema
  */
 function readStoredDrafts(): StoredDrafts {
   if (typeof window === "undefined") {
@@ -132,9 +110,7 @@ function readStoredDrafts(): StoredDrafts {
   }
 }
 
-/**
- * Writes the complete draft store to localStorage.
- */
+// writes the complete draft store to localStorage
 function writeStoredDrafts(drafts: StoredDrafts): void {
   if (typeof window === "undefined") {
     return;
@@ -147,9 +123,7 @@ function writeStoredDrafts(drafts: StoredDrafts): void {
   }
 }
 
-/**
- * Generates a unique ID for a new local draft.
- */
+// generates a unique ID for new local draft
 export function createLocalDraftId(): string {
   if (
     typeof crypto !== "undefined" &&
@@ -161,12 +135,7 @@ export function createLocalDraftId(): string {
   throw new Error("crypto.randomUUID() is not available in this environment.");
 }
 
-/**
- * Validates one raw localStorage entry.
- *
- * The switch preserves the relationship between
- * the contribution type and its corresponding data schema.
- */
+// validates one raw localStorage entry
 function parseStoredDraft(value: unknown): AnyStoredDraft | null {
   const envelopeResult = draftEnvelopeSchema.safeParse(value);
 
@@ -195,33 +164,20 @@ function parseStoredDraft(value: unknown): AnyStoredDraft | null {
   }
 }
 
-/**
- * Gets a single stored guide draft.
- */
+// get a single stored draft
 export function getStoredDraft(
   localDraftId: string,
   type: "guide"
 ): StoredGuideDraft | null;
-
-/**
- * Gets a single stored variant draft.
- */
 export function getStoredDraft(
   localDraftId: string,
   type: "variant"
 ): StoredVariantDraft | null;
-
-/**
- * Gets a single stored objective draft.
- */
 export function getStoredDraft(
   localDraftId: string,
   type: "objective"
 ): StoredObjectiveDraft | null;
 
-/**
- * Implementation for getStoredDraft.
- */
 export function getStoredDraft(
   localDraftId: string,
   type: ContributionType
@@ -232,39 +188,29 @@ export function getStoredDraft(
 
   const drafts = readStoredDrafts();
   const rawDraft = drafts[localDraftId];
-
   if (rawDraft === undefined) {
     return null;
   }
 
   const parsedDraft = parseStoredDraft(rawDraft);
-
   if (!parsedDraft) {
     console.warn(`Discarding malformed stored draft ${localDraftId}.`);
-
     delete drafts[localDraftId];
     writeStoredDrafts(drafts);
-
     return null;
   }
 
   if (parsedDraft.type !== type) {
     console.warn(
-      `Stored draft ${localDraftId} has type "${parsedDraft.type}" ` +
-        `but "${type}" was requested.`
+      `Stored draft ${localDraftId} has type "${parsedDraft.type}" but "${type}" was requested.`
     );
-
     return null;
   }
 
   return parsedDraft;
 }
 
-/**
- * Gets every valid stored draft.
- *
- * Malformed drafts are removed from localStorage.
- */
+// get all valid stored draft - malformed drafts are removed from localStorage
 export function getAllStoredDrafts(): Array<AnyStoredDraft> {
   if (typeof window === "undefined") {
     return [];
@@ -287,9 +233,7 @@ export function getAllStoredDrafts(): Array<AnyStoredDraft> {
       continue;
     }
 
-    /**
-     * The localStorage key and localDraftId should agree.
-     */
+    // localStorage key and localDraftId should be the same
     if (parsedDraft.localDraftId !== localDraftId) {
       console.warn(
         `Discarding stored draft with mismatched localDraftId: ${localDraftId}.`
@@ -310,28 +254,15 @@ export function getAllStoredDrafts(): Array<AnyStoredDraft> {
   return validDrafts.sort((a, b) => b.updatedAt - a.updatedAt);
 }
 
-/**
- * Gets all stored guide drafts.
- */
+// get all stored drafts
 export function getStoredDraftsByType(type: "guide"): Array<StoredGuideDraft>;
-
-/**
- * Gets all stored variant drafts.
- */
 export function getStoredDraftsByType(
   type: "variant"
 ): Array<StoredVariantDraft>;
-
-/**
- * Gets all stored objective drafts.
- */
 export function getStoredDraftsByType(
   type: "objective"
 ): Array<StoredObjectiveDraft>;
 
-/**
- * Implementation for getStoredDraftsByType.
- */
 export function getStoredDraftsByType(
   type: ContributionType
 ): Array<AnyStoredDraft> {
@@ -353,19 +284,9 @@ export function getStoredDraftsByType(
   }
 }
 
-/**
- * Saves or updates one stored guide draft.
- */
+// save or update one stored draft
 export function setStoredDraft(draft: StoredGuideDraft): void;
-
-/**
- * Saves or updates one stored variant draft.
- */
 export function setStoredDraft(draft: StoredVariantDraft): void;
-
-/**
- * Saves or updates one stored objective draft.
- */
 export function setStoredDraft(draft: StoredObjectiveDraft): void;
 
 export function setStoredDraft(draft: AnyStoredDraft): void {
@@ -377,20 +298,15 @@ export function setStoredDraft(draft: AnyStoredDraft): void {
 
   if (!parsedDraft) {
     console.warn(`Refusing to store malformed ${draft.type} draft.`);
-
     return;
   }
 
   const drafts = readStoredDrafts();
-
   drafts[draft.localDraftId] = parsedDraft;
-
   writeStoredDrafts(drafts);
 }
 
-/**
- * Deletes one local draft.
- */
+// deletes one local draft
 export function clearStoredDraft(localDraftId: string): void {
   if (typeof window === "undefined") {
     return;
@@ -407,23 +323,16 @@ export function clearStoredDraft(localDraftId: string): void {
   writeStoredDrafts(drafts);
 }
 
-/**
- * Checks whether a particular local draft exists.
- * Checks the presence of the ID only.
- */
+// checks whether a particular local draft exists - checks ID presence only
 export function hasStoredDraft(localDraftId: string): boolean {
   if (typeof window === "undefined") {
     return false;
   }
-
   const drafts = readStoredDrafts();
-
   return drafts[localDraftId] !== undefined;
 }
 
-/**
- * Deletes every locally stored contribution draft.
- */
+// deletes every locally stored contribution draft
 export function clearAllStoredDrafts(): void {
   if (typeof window === "undefined") {
     return;
@@ -436,17 +345,13 @@ export function clearAllStoredDrafts(): void {
   }
 }
 
-/**
- * Deletes all drafts belonging to a particular
- * contribution type.
- */
+// deletes all drafts belonging to a particular contribution type
 export function clearStoredDraftsByType(type: ContributionType): void {
   if (typeof window === "undefined") {
     return;
   }
 
   const drafts = readStoredDrafts();
-
   let changed = false;
 
   for (const [localDraftId, rawDraft] of Object.entries(drafts)) {
@@ -474,10 +379,8 @@ export interface ContributionSaveControls {
 }
 
 /**
- * Automatically and debouncingly saves one particular
- * contribution draft to localStorage.
- *
- * localDraftId identifies WHICH draft is being saved.
+ * automatically saves contribution drafts to localStorage
+ * localDraftId identifies WHICH draft is being saved
  */
 export function useDebouncedContributionSave(
   localDraftId: string | null,
@@ -506,9 +409,6 @@ export function useDebouncedContributionSave(
   delay?: number
 ): ContributionSaveControls;
 
-/**
- * Implementation for useDebouncedContributionSave.
- */
 export function useDebouncedContributionSave(
   localDraftId: string | null,
   type: ContributionType | null,
@@ -535,9 +435,7 @@ export function useDebouncedContributionSave(
 
   const isPendingRef = useRef(false);
 
-  /**
-   * Always keep the latest contribution data available.
-   */
+  // keep the latest contribution data available
   if (localDraftId && type) {
     pendingRef.current = {
       localDraftId,
@@ -555,9 +453,7 @@ export function useDebouncedContributionSave(
     }
   };
 
-  /**
-   * Immediately save the latest pending data.
-   */
+  // save the latest pending data
   const flush = () => {
     clearTimer();
 
@@ -609,11 +505,7 @@ export function useDebouncedContributionSave(
     }
   };
 
-  /**
-   * Cancel the pending autosave.
-   *
-   * This does NOT delete an existing localStorage draft.
-   */
+  // cancel pending autosave - this does NOT delete an existing localStorage draft
   const cancel = () => {
     clearTimer();
     isPendingRef.current = false;
@@ -625,9 +517,7 @@ export function useDebouncedContributionSave(
   const cancelRef = useRef(cancel);
   cancelRef.current = cancel;
 
-  /**
-   * Start/restart debounce timer whenever the contribution changes.
-   */
+  // start debounce timer whenever the contribution changes
   useEffect(() => {
     if (!localDraftId || !type) {
       flushRef.current();
@@ -646,9 +536,7 @@ export function useDebouncedContributionSave(
     return clearTimer;
   }, [localDraftId, type, data, revisionId, step, delay]);
 
-  /**
-   * Flush anything still waiting when the component unmounts.
-   */
+  // flush anything still waiting when the component unmounts.
   useEffect(() => {
     return () => {
       flushRef.current();
diff --git a/app/src/routes/contribute.tsx b/app/src/routes/contribute.tsx
index 197cb823..fd27eaaf 100644
--- a/app/src/routes/contribute.tsx
+++ b/app/src/routes/contribute.tsx
@@ -113,13 +113,13 @@ function RouteComponent() {
     navigate({ search: {}, replace: true });
   };
 
-  // A resumed draft already carries its claims in the database, so the todo page's
-  // params only apply to a fresh start.
+  // resumed drafts so the todo already carries claims in the database
+  // params only apply to a fresh start
   const todoIds = draft || !todos ? [] : todos.split(",");
 
   return (
     <div className="mx-auto flex min-h-[max(calc(100vh-65px),750px)] w-full max-w-[1280px] flex-col bg-background">
-      <section className="relative flex min-h-0 flex-1 gap-8 border-b px-4 py-8 sm:px-8 lg:px-16">
+      <section className="relative flex min-h-0 flex-1 gap-8 border-b px-4 pt-8">
         <div className="flex min-h-0 min-w-0 flex-1 flex-col">
           <ContributionFlow
             type={type}
diff --git a/app/src/routes/guides/$slug/$variantSlug/edit.tsx b/app/src/routes/guides/$slug/$variantSlug/edit.tsx
index f8db8758..91fb0c39 100644
--- a/app/src/routes/guides/$slug/$variantSlug/edit.tsx
+++ b/app/src/routes/guides/$slug/$variantSlug/edit.tsx
@@ -7,6 +7,7 @@ import { toast } from "sonner";
 import type { ReaderGuide } from "@/components/GuideReader";
 import type { GuideContribution } from "@/types/contributions";
 import type { GuideType } from "@/types/guides";
+
 import { listGuides } from "@/lib/api/guides";
 import { getMyIdentity } from "@/lib/api/identity";
 import { listSubjects } from "@/lib/api/subjects";
@@ -23,8 +24,7 @@ import {
 } from "@/lib/guideUtils";
 import { requireSession } from "@/lib/auth";
 
-import { GuideDetails } from "@/components/contribute/steps/GuideDetails";
-import { Content } from "@/components/contribute/steps/Content";
+import { EditGuideInfo } from "@/components/contribute/steps/guide/EditGuideInfo";
 import { Submit } from "@/components/contribute/steps/Submit";
 import { RejectionFeedback } from "@/components/review/RejectionFeedback";
 import { MobileStepProgress } from "@/components/contribute/MobileStepProgress";
@@ -32,17 +32,27 @@ import { MobileStepProgress } from "@/components/contribute/MobileStepProgress";
 export const Route = createFileRoute("/guides/$slug/$variantSlug/edit")({
   ssr: false,
   beforeLoad: requireSession,
+
   validateSearch: (search: Record<string, unknown>): { draft?: string } => ({
     draft: typeof search.draft === "string" ? search.draft : undefined,
   }),
-  loaderDeps: ({ search }) => ({ draft: search.draft }),
+
+  loaderDeps: ({ search }) => ({
+    draft: search.draft,
+  }),
+
   loader: async ({ params, deps }) => {
     const variant = await getVariantBySlug(params.slug, params.variantSlug);
-    // A variant with nothing published has no snapshot to revise.
-    if (!variant.current) throw notFound();
 
-    // Resuming picks up the open draft; otherwise seed from what's live.
+    // a variant with nothing published has no snapshot to revise
+    if (!variant.current) {
+      throw notFound();
+    }
+
+    // if a draft ID is provided, resume that draft
+    // otherwise - seed the editor from the currently published revision
     const snapshot = await getRevision(deps.draft ?? variant.current.id);
+
     return {
       variant,
       current: variant.current,
@@ -50,38 +60,57 @@ export const Route = createFileRoute("/guides/$slug/$variantSlug/edit")({
       draftId: deps.draft ?? null,
     };
   },
+
   component: RouteComponent,
 });
 
 const editSteps = [
-  { id: "guide-details", title: "Edit Details" },
-  { id: "content", title: "Edit Content" },
-  { id: "submit", title: "Preview" },
+  {
+    id: "guide-info",
+    title: "Edit Guide",
+  },
+  {
+    id: "submit",
+    title: "Preview",
+  },
 ] as const;
 
 const StepperInstance = defineStepper(editSteps);
 
 function RouteComponent() {
   const { variant, current, snapshot, draftId } = Route.useLoaderData();
+
   const { Stepper } = StepperInstance;
   const router = useRouter();
 
-  // A tag still awaiting approval is not pickable yet, so it resumes in the
-  // new-subject list rather than the picker.
-  const approved = snapshot.subjects.filter((s) => s.status === "published");
-  const pending = snapshot.subjects.filter((s) => s.status !== "published");
+  /*
+   * Subjects are split into:
+   * - approved subjects - can be selected normally
+   * - pending subjects - remain in newSubjects
+   */
+  const approved = snapshot.subjects.filter(
+    (subject) => subject.status === "published"
+  );
+
+  const pending = snapshot.subjects.filter(
+    (subject) => subject.status !== "published"
+  );
 
   const [guideContData, setGuideContData] = useState<GuideContribution>(() => ({
     type: snapshot.knowledge_type === "practical" ? "practical" : "theoretical",
+
     title: snapshot.revision.title ?? "",
     summary: snapshot.revision.summary ?? "",
     body: snapshot.revision.body ?? "",
-    subjects: approved.map((s) => s.id),
-    newSubjects: pending.map((s) => ({
-      id: s.id,
-      name: s.name,
-      summary: s.summary ?? "",
+
+    subjects: approved.map((subject) => subject.id),
+
+    newSubjects: pending.map((subject) => ({
+      id: subject.id,
+      name: subject.name,
+      summary: subject.summary ?? "",
     })),
+
     prereqs: snapshot.prerequisites,
     todoPrereqs: snapshot.todos,
   }));
@@ -91,12 +120,20 @@ function RouteComponent() {
   );
 
   const [revisionId, setRevisionId] = useState<string | null>(draftId);
+
   const [submitting, setSubmitting] = useState(false);
+
+  // must match one of the IDs
   const [activeStep, setActiveStep] = useState("guide-details");
 
   const [subjectOptions, setSubjectOptions] = useState<
     Array<{ id: string; name: string }>
-  >(() => approved.map((s) => ({ id: s.id, name: s.name })));
+  >(() =>
+    approved.map((subject) => ({
+      id: subject.id,
+      name: subject.name,
+    }))
+  );
 
   const [guideOptions, setGuideOptions] = useState<
     Awaited<ReturnType<typeof listGuides>>
@@ -104,58 +141,84 @@ function RouteComponent() {
 
   const [username, setUsername] = useState<string | null>(null);
 
+  // load subjects, guides and the user's identity
   useEffect(() => {
     const controller = new AbortController();
-    const opts = { signal: controller.signal };
+
+    const opts = {
+      signal: controller.signal,
+    };
 
     listSubjects(opts)
       .then((data) => {
-        setSubjectOptions((prev) => {
-          const listed = new Set(data.map((s) => s.id));
-          return [...data, ...prev.filter((s) => !listed.has(s.id))];
+        setSubjectOptions((previous) => {
+          const listed = new Set(data.map((subject) => subject.id));
+
+          return [
+            ...data,
+            ...previous.filter((subject) => !listed.has(subject.id)),
+          ];
         });
       })
       .catch(() => {});
+
     listGuides(opts)
       .then(setGuideOptions)
       .catch(() => {});
+
     getMyIdentity(opts)
-      .then((data) => setUsername(data.profile.username))
+      .then((data) => {
+        setUsername(data.profile.username);
+      })
       .catch(() => {});
 
     return () => controller.abort();
   }, []);
 
+  // build the guide shown in the preview step
   const previewGuide: ReaderGuide = useMemo(() => {
     const nameById = new Map(
-      subjectOptions.map((s) => [s.id, s.name] as const)
+      subjectOptions.map((subject) => [subject.id, subject.name])
     );
+
     const titleBySlug = new Map(
       guideOptions
-        .filter((g) => g.slug)
-        .map((g) => [g.slug as string, g.title ?? (g.slug as string)] as const)
+        .filter((guide) => guide.slug)
+        .map((guide) => [
+          guide.slug as string,
+          guide.title ?? (guide.slug as string),
+        ])
     );
 
     return {
       slug: snapshot.base_slug ?? "",
       variant_id: variant.id,
       variant_slug: variant.slug,
+
       title: guideContData.title || "Untitled guide",
+
       author: username ?? "",
+
       summary: guideContData.summary,
+
       body: guideContData.body,
+
       duration_minutes: estimateReadMinutes(guideContData.body),
+
       created_at: current.created_at,
+
       tags: [
         ...guideContData.subjects.map((id) => ({
           slug: id,
           name: nameById.get(id) ?? id,
         })),
-        ...guideContData.newSubjects.map((s) => ({
-          slug: s.name,
-          name: s.name,
+
+        ...guideContData.newSubjects.map((subject) => ({
+          slug: subject.name,
+          name: subject.name,
         })),
       ],
+
       prerequisites: guideContData.prereqs.map((slug) => ({
         slug,
         title: titleBySlug.get(slug) ?? slug,
@@ -171,38 +234,54 @@ function RouteComponent() {
     current,
   ]);
 
+  // knowledge type belongs to the guide base
   const guideType: GuideType | undefined =
     snapshot.knowledge_type === "practical" ||
     snapshot.knowledge_type === "theoretical"
       ? snapshot.knowledge_type
       : undefined;
 
-  // Type, prerequisites and todos belong to the guide base, so a revision
-  // can't carry them.
+  /*
+   * Only revision fields are persisted when editing
+   * Type, prerequisites and TODO prerequisites belong to
+   * guide base and not submitted as part of a revision
+   */
   const draftFields = () => ({
     title: guideContData.title || null,
+
     summary: guideContData.summary || null,
+
     body: guideContData.body || null,
+
     change_summary: changeSummary || null,
+
     tags: [
       ...guideContData.subjects,
+
       ...guideContData.newSubjects
-        .map((s) => s.id)
+        .map((subject) => subject.id)
         .filter((id): id is string => !!id),
     ],
+
     newSubjects: guideContData.newSubjects
-      .filter((s) => !s.id)
-      .map((s) => ({
-        name: s.name,
-        summary: s.summary || null,
+      .filter((subject) => !subject.id)
+      .map((subject) => ({
+        name: subject.name,
+        summary: subject.summary || null,
       })),
   });
 
+  // revent multiple simultaneous revision creations
   const creatingRef = useRef<Promise<string> | null>(null);
 
+  /*
+   * save the current revision
+   * if a revision already exists - update it, otherwise create a new revision first
+   */
   const persistDraft = async () => {
     if (revisionId) {
       await updateRevision(revisionId, draftFields());
+
       return revisionId;
     }
 
@@ -210,46 +289,69 @@ function RouteComponent() {
       creatingRef.current = createVariantRevision(variant.id)
         .then(async (id) => {
           setRevisionId(id);
+
           await updateRevision(id, draftFields());
+
           return id;
         })
         .finally(() => {
           creatingRef.current = null;
         });
     }
+
     return creatingRef.current;
   };
 
+  /*
+   * Upload an image against the current revision.
+   */
   const uploadGuideImage = async (file: File) => {
     try {
       const id = revisionId ?? (await persistDraft());
+
       const { url } = await uploadMedia(file, id);
+
       return url;
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Could not upload image");
-      throw e;
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Could not upload image"
+      );
+
+      throw error;
     }
   };
 
+  // save current draft without submitting
   const saveDraft = async () => {
     setSubmitting(true);
+
     try {
       await persistDraft();
-      // Refresh the cached snapshot so coming back here reseeds from the save.
+
       await router.invalidate();
+
       toast.success("Draft saved");
+
       return true;
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Could not save draft");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Could not save draft"
+      );
+
       return false;
     } finally {
       setSubmitting(false);
     }
   };
 
+  // submit revision for review
   const publish = async () => {
     setSubmitting(true);
+
     try {
+      const fields = draftFields();
+
+      // Prevent submitting a revision that contains no actual changes
       if (
         isRevisionDraftUnchanged(
           {
@@ -257,30 +359,36 @@ function RouteComponent() {
             summary: snapshot.revision.summary,
             body: snapshot.revision.body,
             change_summary: snapshot.revision.change_summary,
-            subjectIds: snapshot.subjects.map((s) => s.id),
+            subjectIds: snapshot.subjects.map((subject) => subject.id),
           },
-          draftFields()
+          fields
         )
       ) {
         toast.error(
           "No changes made to the guide, make a change and try again."
         );
+
         return;
-      } else if (
-        draftFields().change_summary === null ||
-        draftFields().change_summary === ""
-      ) {
+      }
+
+      // a change summary is required for revisions
+      if (fields.change_summary === null || fields.change_summary === "") {
         toast.error(
           "No changes summary provided, add a change summary and try again."
         );
+
         return;
       }
+
       const id = await persistDraft();
+
       await submitRevision(id);
+
       await router.invalidate();
+
       toast.success("Submitted for review");
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Could not submit");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Could not submit");
     } finally {
       setSubmitting(false);
     }
@@ -288,12 +396,12 @@ function RouteComponent() {
 
   return (
     <div className="mx-auto flex min-h-[max(calc(100vh-65px),750px)] w-full max-w-[1280px] flex-col bg-background">
-      <section className="relative flex min-h-0 flex-1 gap-8 border-b px-8 py-8 lg:px-16">
+      <section className="relative flex min-h-0 flex-1 border-b px-8 py-8 lg:px-16">
         <Stepper.Root
           linear
           step={activeStep}
           onStepChange={setActiveStep}
-          className="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-8 pb-20 sm:pb-0"
+          className="mx-auto flex min-h-0 w-full max-w-5xl min-w-0 flex-1 flex-col gap-8 pb-20 sm:pb-0"
         >
           {() => (
             <>
@@ -320,47 +428,43 @@ function RouteComponent() {
                 </Stepper.Items>
               </Stepper.List>
 
-              <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-                <GuideDetails
-                  Stepper={Stepper}
-                  type="variant"
-                  guideContData={guideContData}
-                  setGuideContData={setGuideContData}
-                  subjects={subjectOptions}
-                  guides={guideOptions}
-                  onSaveDraft={saveDraft}
-                  submitting={submitting}
-                  showBaseFields={false}
-                  hideBackBtn
-                  title="Edit Details"
-                  changeSummary={changeSummary}
-                  onChangeSummaryChange={setChangeSummary}
-                />
-
-                <Content
-                  Stepper={Stepper}
-                  type="variant"
-                  body={guideContData.body}
-                  onBodyChange={(body) =>
-                    setGuideContData((prev) => ({ ...prev, body }))
-                  }
-                  onUploadImage={uploadGuideImage}
-                  onSaveDraft={saveDraft}
-                  submitting={submitting}
-                  title="Edit Content"
-                />
-
-                <Submit
-                  Stepper={Stepper}
-                  guide={previewGuide}
-                  guideType={guideType}
-                  onSaveDraft={saveDraft}
-                  onPublish={publish}
-                  submitting={submitting}
-                  title="Preview"
-                  publishLabel="Submit Guide Revision"
-                />
-              </div>
+              <EditGuideInfo
+                Stepper={Stepper}
+                type="variant"
+                guideContData={guideContData}
+                onGuideChange={(update) =>
+                  setGuideContData((previous) => ({
+                    ...previous,
+                    ...update,
+                  }))
+                }
+                subjects={subjectOptions}
+                guides={guideOptions}
+                body={guideContData.body}
+                onBodyChange={(body) =>
+                  setGuideContData((previous) => ({
+                    ...previous,
+                    body,
+                  }))
+                }
+                onUploadImage={uploadGuideImage}
+                onSaveDraft={saveDraft}
+                submitting={submitting}
+                hideBackBtn
+                changeSummary={changeSummary}
+                onChangeSummaryChange={setChangeSummary}
+              />
+
+              <Submit
+                Stepper={Stepper}
+                guide={previewGuide}
+                guideType={guideType}
+                onSaveDraft={saveDraft}
+                onPublish={publish}
+                submitting={submitting}
+                title="Preview"
+                publishLabel="Submit Guide Revision"
+              />
             </>
           )}
         </Stepper.Root>
diff --git a/app/src/routes/guides/$slug/$variantSlug/index.tsx b/app/src/routes/guides/$slug/$variantSlug/index.tsx
index b19b14e8..5d4c5045 100644
--- a/app/src/routes/guides/$slug/$variantSlug/index.tsx
+++ b/app/src/routes/guides/$slug/$variantSlug/index.tsx
@@ -208,7 +208,7 @@ function RouteComponent() {
                 isOfficial={variant.is_official}
               />
 
-              <DropdownMenu>
+              <DropdownMenu modal={false}>
                 <DropdownMenuTrigger asChild>
                   <Button
                     variant="ghost"
diff --git a/app/src/routes/guides/$slug/index.tsx b/app/src/routes/guides/$slug/index.tsx
index 449bcb3e..bc9ba277 100644
--- a/app/src/routes/guides/$slug/index.tsx
+++ b/app/src/routes/guides/$slug/index.tsx
@@ -201,7 +201,7 @@ function RouteComponent() {
                 isOfficial={guide.is_official}
               />
 
-              <DropdownMenu>
+              <DropdownMenu modal={false}>
                 <DropdownMenuTrigger asChild>
                   <Button
                     variant="ghost"
@@ -228,8 +228,6 @@ function RouteComponent() {
 
           <Separator className="mb-8" />
 
-          {/* Header */}
-
           <GuideReader
             guide={guide}
             guideType={guide.knowledge_type}
diff --git a/app/src/routes/objectives/$slug/index.tsx b/app/src/routes/objectives/$slug/index.tsx
index fed54373..f7d37460 100644
--- a/app/src/routes/objectives/$slug/index.tsx
+++ b/app/src/routes/objectives/$slug/index.tsx
@@ -119,7 +119,7 @@ function ObjectiveMenu({
   sourceRevisionId: string;
 }) {
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon" className="h-9 w-9 rounded-md">
           <Ellipsis className="h-4 w-4" />
diff --git a/app/src/routes/settings.account.tsx b/app/src/routes/settings.account.tsx
index fc334991..5fb23677 100644
--- a/app/src/routes/settings.account.tsx
+++ b/app/src/routes/settings.account.tsx
@@ -153,7 +153,9 @@ function RouteComponent() {
       </header>
 
       <section className="space-y-3">
-        <h2 className="mono-micro text-muted-foreground">Authentication</h2>
+        <h2 className="font-mono text-[12px] tracking-[0.08em] text-muted-foreground uppercase">
+          Authentication
+        </h2>
 
         <div className="border-t border-border">
           <form className="space-y-3 py-3" onSubmit={handleSave}>
@@ -368,9 +370,11 @@ function RouteComponent() {
       </section>
 
       <section className="space-y-3">
-        <h2 className="mono-micro text-muted-foreground">Delete account</h2>
+        <h2 className="font-mono text-[12px] tracking-[0.08em] text-muted-foreground uppercase">
+          Delete account
+        </h2>
 
-        <div className="space-y-4 border-t border-destructive/30 py-5">
+        <div className="space-y-4 border-t py-5">
           <p className="text-xs text-muted-foreground">
             Deleting your account is permanent and cannot be undone.
             Contributions you authored stay published but are no longer
diff --git a/app/src/types/contributions.ts b/app/src/types/contributions.ts
index 2dc5af05..271c6c38 100644
--- a/app/src/types/contributions.ts
+++ b/app/src/types/contributions.ts
@@ -3,6 +3,7 @@ import { z } from "zod";
 // Schemas are only used to check drafts restored from localStorage. Doesn't use shared
 // schemas because an empty field here is "" not null.
 export const contributionTypeSchema = z.enum(["guide", "variant", "objective"]);
+export const guideTypeSchema = z.enum(["theoretical", "practical"]);
 
 const newSubjectSchema = z.object({
   id: z.string().optional(),
@@ -11,7 +12,7 @@ const newSubjectSchema = z.object({
 });
 
 export const guideContributionSchema = z.object({
-  type: z.string(),
+  type: guideTypeSchema,
   title: z.string(),
   summary: z.string(),
   body: z.string(),
@@ -22,7 +23,7 @@ export const guideContributionSchema = z.object({
 });
 
 export const variantContributionSchema = z.object({
-  type: z.string(),
+  type: guideTypeSchema,
   title: z.string(),
   summary: z.string(),
   baseGuide: z.string(),
@@ -48,6 +49,7 @@ export const objectiveContributionSchema = z.object({
 });
 
 export type ContributionType = z.infer<typeof contributionTypeSchema>;
+export type GuideType = z.infer<typeof guideTypeSchema>;
 export type GuideContribution = z.infer<typeof guideContributionSchema>;
 export type VariantContribution = z.infer<typeof variantContributionSchema>;
 export type SubObjective = z.infer<typeof subObjectiveSchema>;

From 8c52efc9f939e5ef4ec85b24b2334067da2c1294 Mon Sep 17 00:00:00 2001
From: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
Date: Thu, 3 Sep 2026 03:57:02 +0100
Subject: [PATCH 3/5] chore: remove unused type

Signed-off-by: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
---
 app/src/components/contribute/ContributionFlow.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/components/contribute/ContributionFlow.tsx b/app/src/components/contribute/ContributionFlow.tsx
index 3fe3f4c1..bbb13307 100644
--- a/app/src/components/contribute/ContributionFlow.tsx
+++ b/app/src/components/contribute/ContributionFlow.tsx
@@ -10,7 +10,6 @@ import type {
   ObjectiveContribution,
   VariantContribution,
 } from "@/types/contributions";
-import type { GuideType } from "@/types/guides";
 
 import { MobileStepProgress } from "@/components/contribute/MobileStepProgress";
 

From fd81ed27beefd1d383806336fb2dd09afe0a83b7 Mon Sep 17 00:00:00 2001
From: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
Date: Thu, 3 Sep 2026 03:57:48 +0100
Subject: [PATCH 4/5] chore: remove unused function import

Signed-off-by: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
---
 app/src/components/contribute/ContributionFlow.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/components/contribute/ContributionFlow.tsx b/app/src/components/contribute/ContributionFlow.tsx
index bbb13307..ede85a43 100644
--- a/app/src/components/contribute/ContributionFlow.tsx
+++ b/app/src/components/contribute/ContributionFlow.tsx
@@ -26,7 +26,6 @@ import { OrderTargetGuides } from "@/components/contribute/steps/objective/Order
 import { PreviewObjective } from "@/components/contribute/steps/objective/PreviewObjective";
 
 import { addGuideVariant, createGuide, listGuides } from "@/lib/api/guides";
-import { getMyIdentity } from "@/lib/api/identity";
 import { listSubjects } from "@/lib/api/subjects";
 import { flows, typeStep } from "@/lib/contributionFlow";
 import { uploadMedia } from "@/lib/api/media";

From 5399a0c32d690d2d8f39ac20a2b6d04af9317081 Mon Sep 17 00:00:00 2001
From: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
Date: Thu, 3 Sep 2026 04:04:13 +0100
Subject: [PATCH 5/5] fix: content editor body change when sidebar guide
 clicked

Signed-off-by: andyrodrigues30 <andrea.melissa.rodrigues@gmail.com>
---
 app/src/components/contribute/steps/guide/GuideInfo.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/components/contribute/steps/guide/GuideInfo.tsx b/app/src/components/contribute/steps/guide/GuideInfo.tsx
index e7745289..fdd24fd3 100644
--- a/app/src/components/contribute/steps/guide/GuideInfo.tsx
+++ b/app/src/components/contribute/steps/guide/GuideInfo.tsx
@@ -102,6 +102,7 @@ export const GuideInfo = ({
       label: "Content",
       content: (
         <Content
+          key={activeGuideId}
           body={body}
           onBodyChange={onBodyChange}
           onUploadImage={onUploadImage}