diff --git a/frontend/src/components/CreateProposalModal.test.tsx b/frontend/src/components/CreateProposalModal.test.tsx
index 62f2f60..ee71729 100644
--- a/frontend/src/components/CreateProposalModal.test.tsx
+++ b/frontend/src/components/CreateProposalModal.test.tsx
@@ -116,12 +116,69 @@ describe("CreateProposalModal", () => {
     const submitBtn = screen.getByText("Submit Proposal");
     fireEvent.click(submitBtn);
 
+    expect(screen.getByText("Preview Proposal")).toBeDefined();
+    expect(createProposal).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByText("Confirm & Submit"));
+
     await waitFor(() => {
       expect(createProposal).toHaveBeenCalled();
       expect(defaultProps.onSubmitted).toHaveBeenCalled();
     });
   });
 
+  it("shows a preview with entered values before submitting", () => {
+    render(<CreateProposalModal {...defaultProps} />);
+    fillRequiredFields();
+
+    const deadlineInput = document.querySelector(
+      'input[type="date"]'
+    ) as HTMLInputElement;
+    const expectedDeadline = new Date(
+      `${deadlineInput.value}T00:00:00`
+    ).toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+
+    fireEvent.click(screen.getByText("Submit Proposal"));
+
+    expect(screen.getByText("Preview Proposal")).toBeDefined();
+    expect(screen.getByText("GDHU6WRG4IEQXM5NZ4BMPKOXHW76MZM4Y2IEMFDVXBSDP6SJY4IQDNC")).toBeDefined();
+    expect(screen.getByText("10 XLM")).toBeDefined();
+    expect(screen.getByText("Test payment")).toBeDefined();
+    expect(screen.getByText(expectedDeadline)).toBeDefined();
+    expect(createProposal).not.toHaveBeenCalled();
+  });
+
+  it("Back returns to the form with entered values preserved", () => {
+    render(<CreateProposalModal {...defaultProps} />);
+    fillRequiredFields();
+
+    fireEvent.click(screen.getByText("Submit Proposal"));
+    fireEvent.click(screen.getByText("Back"));
+
+    expect(screen.queryByText("Preview Proposal")).toBeNull();
+    expect(screen.getByPlaceholderText("G...")).toHaveValue(
+      "GDHU6WRG4IEQXM5NZ4BMPKOXHW76MZM4Y2IEMFDVXBSDP6SJY4IQDNC"
+    );
+    expect(screen.getByPlaceholderText("0.00")).toHaveValue(10);
+    expect(screen.getByPlaceholderText("What is this payment for?")).toHaveValue(
+      "Test payment"
+    );
+  });
+
+  it("Close button works from the preview step", () => {
+    render(<CreateProposalModal {...defaultProps} />);
+    fillRequiredFields();
+
+    fireEvent.click(screen.getByText("Submit Proposal"));
+    fireEvent.click(screen.getByText("✕"));
+
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
   it("Connected wallet opens modal and shows Proposer field", () => {
     render(<CreateProposalModal {...defaultProps} />);
     expect(screen.getByText("Proposer")).toBeDefined();
diff --git a/frontend/src/components/CreateProposalModal.tsx b/frontend/src/components/CreateProposalModal.tsx
index ea87a75..dba134b 100644
--- a/frontend/src/components/CreateProposalModal.tsx
+++ b/frontend/src/components/CreateProposalModal.tsx
@@ -18,11 +18,22 @@ type Props = {
   triggerRef?: RefObject<HTMLButtonElement | null>;
 };
 
+type ProposalStep = "form" | "preview";
+
 function truncateAddress(address: string | null) {
   if (!address) return "Not connected";
   return `${address.slice(0, 6)}…${address.slice(-4)}`;
 }
 
+function formatDeadline(deadline: string) {
+  return new Date(`${deadline}T00:00:00`).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+export function CreateProposalModal({ walletAddress, onClose, onSubmitted }: Props) {
 export function CreateProposalModal({ walletAddress, onClose, onSubmitted, triggerRef }: Props) {
   const defaultDeadline = () => {
     const d = new Date();
@@ -36,6 +47,7 @@ export function CreateProposalModal({ walletAddress, onClose, onSubmitted, trigg
   const [token, setToken] = useState("XLM");
   const [description, setDescription] = useState("");
   const [deadline, setDeadline] = useState(defaultDeadline);
+  const [step, setStep] = useState<ProposalStep>("form");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   
@@ -151,63 +163,78 @@ export function CreateProposalModal({ walletAddress, onClose, onSubmitted, trigg
     }
   }
 
-  async function handleSubmit() {
+  function getValidatedProposal() {
     if (!walletAddress) {
       setError("Connect your wallet first.");
-      return;
+      return null;
     }
     if (!to.trim() || !amount.trim() || !description.trim()) {
       setError("Recipient, amount, and description are required.");
-      return;
+      return null;
     }
 
     if (!StrKey.isValidEd25519PublicKey(to.trim())) {
       setError("Enter a valid Stellar address");
-      return;
+      return null;
     }
 
     const amountNum = parseFloat(amount);
     if (isNaN(amountNum) || amountNum <= 0) {
       setError("Enter a valid amount.");
-      return;
+      return null;
     }
 
     const tokenAddr = TOKEN_ADDRESSES[token];
     if (!tokenAddr) {
       setError("Unknown token.");
-      return;
+      return null;
     }
 
-    const amountStroops = displayToStroops(amountNum);
-
-    // Deadline validation
     const deadlineMs = new Date(deadline).getTime();
     const nowMs = Date.now();
     const todayMidnight = new Date();
     todayMidnight.setHours(0, 0, 0, 0);
     if (deadlineMs <= todayMidnight.getTime()) {
       setError("Deadline must be in the future.");
-      return;
+      return null;
     }
     const maxMs = nowMs + 90 * 24 * 3600 * 1000;
     if (deadlineMs > maxMs) {
       setError("Deadline cannot be more than 90 days away.");
-      return;
+      return null;
     }
 
-    // Deadline: Unix seconds
-    const deadlineUnix = BigInt(Math.floor(deadlineMs / 1000));
+    return {
+      recipient: to.trim(),
+      tokenAddr,
+      amountStroops: displayToStroops(amountNum),
+      description: description.trim(),
+      deadlineUnix: BigInt(Math.floor(deadlineMs / 1000)),
+    };
+  }
+
+  function handleSubmit() {
+    const proposal = getValidatedProposal();
+    if (!proposal) return;
+
+    setError(null);
+    setStep("preview");
+  }
+
+  async function handleConfirmSubmit() {
+    const proposal = getValidatedProposal();
+    if (!proposal) return;
 
     setError(null);
     setSubmitting(true);
     try {
       await createProposal(
-        walletAddress,
-        to.trim(),
-        tokenAddr,
-        amountStroops,
-        description.trim(),
-        deadlineUnix
+        walletAddress as string,
+        proposal.recipient,
+        proposal.tokenAddr,
+        proposal.amountStroops,
+        proposal.description,
+        proposal.deadlineUnix
       );
       onSubmitted();
       onClose();
@@ -242,77 +269,40 @@ export function CreateProposalModal({ walletAddress, onClose, onSubmitted, trigg
         </div>
 
         <div className="space-y-4">
-          <div>
-            <label className="text-xs text-zinc-400 block mb-1.5">
-              Proposer
-            </label>
-            <div
-              className={`w-full border rounded-lg px-3 py-2.5 text-sm ${
-                walletAddress
-                  ? "bg-zinc-800/60 border-zinc-700/60 text-zinc-300 font-mono"
-                  : "bg-zinc-800/30 border-zinc-700/30 text-zinc-500"
-              } truncate`}
-            >
-              {truncateAddress(walletAddress)}
-            </div>
-          </div>
-
-          <div>
-            <label className="text-xs text-zinc-400 block mb-1.5">
-              Recipient Address
-            </label>
-            <input
-              ref={recipientInputRef}
-              value={to}
-              onChange={(e) => {
-                setTo(e.target.value);
-                setRecipientTouched(true);
-              }}
-              onBlur={() => setRecipientTouched(true)}
-              placeholder="G..."
-              className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2.5 text-white text-sm font-mono placeholder-zinc-600 focus:ring-2 focus:ring-zinc-400 focus:outline-none focus:border-zinc-500"
-            />
-            {recipientTouched && !StrKey.isValidEd25519PublicKey(to.trim()) && (
-              <p className="text-xs text-red-400 mt-1">Enter a valid Stellar address</p>
-            )}
-          </div>
-
-          <div className="flex gap-3">
-            <div className="flex-1">
-              <label className="text-xs text-zinc-400 block mb-1.5">Amount</label>
-              <input
-                value={amount}
-                onChange={(e) => setAmount(e.target.value)}
-                placeholder="0.00"
-                type="number"
-                min="0"
-                step="any"
-                className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2.5 text-white text-sm placeholder-zinc-600 focus:ring-2 focus:ring-zinc-400 focus:outline-none focus:border-zinc-500"
-              />
-            </div>
-            <div className="w-28">
-              <label className="text-xs text-zinc-400 block mb-1.5">Token</label>
-              <div className="grid grid-cols-3 gap-1">
-                {(["XLM", "USDC", "EURC"] as const).map((symbol) => {
-                  const active = token === symbol;
-
-                  return (
-                    <button
-                      key={symbol}
-                      type="button"
-                      onClick={() => setToken(symbol)}
-                      aria-pressed={active}
-                      className={`rounded-lg border px-1.5 py-2 text-xs font-medium transition-colors focus:ring-2 focus:ring-zinc-400 focus:outline-none ${
-                        active
-                          ? "border-emerald-500 bg-emerald-500/20 text-emerald-300"
-                          : "border-zinc-700 bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200"
-                      }`}
-                    >
-                      {symbol}
-                    </button>
-                  );
-                })}
+          {step === "form" ? (
+            <>
+              <div>
+                <label className="text-xs text-zinc-400 block mb-1.5">
+                  Proposer
+                </label>
+                <div
+                  className={`w-full border rounded-lg px-3 py-2.5 text-sm ${
+                    walletAddress
+                      ? "bg-zinc-800/60 border-zinc-700/60 text-zinc-300 font-mono"
+                      : "bg-zinc-800/30 border-zinc-700/30 text-zinc-500"
+                  } truncate`}
+                >
+                  {truncateAddress(walletAddress)}
+                </div>
               </div>
+
+              <div>
+                <label className="text-xs text-zinc-400 block mb-1.5">
+                  Recipient Address
+                </label>
+                <input
+                  ref={recipientInputRef}
+                  value={to}
+                  onChange={(e) => {
+                    setTo(e.target.value);
+                    setRecipientTouched(true);
+                  }}
+                  onBlur={() => setRecipientTouched(true)}
+                  placeholder="G..."
+                  className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2.5 text-white text-sm font-mono placeholder-zinc-600 focus:ring-2 focus:ring-zinc-400 focus:outline-none focus:border-zinc-500"
+                />
+                {recipientTouched && !StrKey.isValidEd25519PublicKey(to.trim()) && (
+                  <p className="text-xs text-red-400 mt-1">Enter a valid Stellar address</p>
             </div>
           </div>
 
@@ -365,36 +355,177 @@ export function CreateProposalModal({ walletAddress, onClose, onSubmitted, trigg
                   <span className="text-zinc-500">No estimate yet</span>
                 )}
               </div>
-              <button
-                type="button"
-                onClick={handleCalculateFee}
-                disabled={feeLoading}
-                className="text-xs bg-zinc-700 hover:bg-zinc-600 disabled:opacity-50 text-white px-3 py-1.5 rounded-md transition-colors focus:ring-2 focus:ring-zinc-400 focus:outline-none"
-              >
-                Calculate fee
-              </button>
-            </div>
-          )}
 
-          {error && (
-            <p className="text-xs text-red-400 bg-red-500/10 rounded-lg px-3 py-2">
-              {error}
-            </p>
-          )}
+              <div className="flex gap-3">
+                <div className="flex-1">
+                  <label className="text-xs text-zinc-400 block mb-1.5">Amount</label>
+                  <input
+                    value={amount}
+                    onChange={(e) => setAmount(e.target.value)}
+                    placeholder="0.00"
+                    type="number"
+                    min="0"
+                    step="any"
+                    className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2.5 text-white text-sm placeholder-zinc-600 focus:ring-2 focus:ring-zinc-400 focus:outline-none focus:border-zinc-500"
+                  />
+                </div>
+                <div className="w-28">
+                  <label className="text-xs text-zinc-400 block mb-1.5">Token</label>
+                  <div className="grid grid-cols-3 gap-1">
+                    {(["XLM", "USDC", "EURC"] as const).map((symbol) => {
+                      const active = token === symbol;
+
+                      return (
+                        <button
+                          key={symbol}
+                          type="button"
+                          onClick={() => setToken(symbol)}
+                          aria-pressed={active}
+                          className={`rounded-lg border px-1.5 py-2 text-xs font-medium transition-colors focus:ring-2 focus:ring-zinc-400 focus:outline-none ${
+                            active
+                              ? "border-emerald-500 bg-emerald-500/20 text-emerald-300"
+                              : "border-zinc-700 bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200"
+                          }`}
+                        >
+                          {symbol}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
 
-          <div className="pt-2">
-            <button
-              type="button"
-              onClick={handleSubmit}
-              disabled={submitting || !walletAddress}
-              title={
-                walletAddress ? undefined : "Connect your Freighter wallet to submit"
-              }
-              className="w-full bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2.5 rounded-lg font-medium transition-colors focus:ring-2 focus:ring-zinc-400 focus:outline-none"
-            >
-              {submitting ? "Submitting…" : "Submit Proposal"}
-            </button>
-          </div>
+              <div>
+                <label className="text-xs text-zinc-400 block mb-1.5">
+                  Description
+                </label>
+                <input
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="What is this payment for?"
+                  className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2.5 text-white text-sm placeholder-zinc-600 focus:ring-2 focus:ring-zinc-400 focus:outline-none focus:border-zinc-500"
+                />
+              </div>
+
+              <div>
+                <label className="text-xs text-zinc-400 block mb-1.5">
+                  Deadline
+                </label>
+                <input
+                  type="date"
+                  value={deadline}
+                  onChange={(e) => setDeadline(e.target.value)}
+                  className="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2.5 text-white text-sm focus:ring-2 focus:ring-zinc-400 focus:outline-none focus:border-zinc-500"
+                />
+              </div>
+
+              {canCalculateFee && (
+                <div className="flex items-center justify-between bg-zinc-800/50 p-3 rounded-lg border border-zinc-700/50">
+                  <div className="text-sm">
+                    {feeLoading ? (
+                      <span className="text-zinc-400">Estimating fee…</span>
+                    ) : feeError ? (
+                      <span className="text-red-400">Could not estimate fee</span>
+                    ) : feeEstimate !== null ? (
+                      <span className="text-zinc-300">
+                        Estimated fee: <span className="text-white font-mono">~{feeEstimate.toFixed(7)} XLM</span>
+                      </span>
+                    ) : (
+                      <span className="text-zinc-500">No estimate yet</span>
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={handleCalculateFee}
+                    disabled={feeLoading}
+                    className="text-xs bg-zinc-700 hover:bg-zinc-600 disabled:opacity-50 text-white px-3 py-1.5 rounded-md transition-colors focus:ring-2 focus:ring-zinc-400 focus:outline-none"
+                  >
+                    Calculate fee
+                  </button>
+                </div>
+              )}
+
+              {error && (
+                <p className="text-xs text-red-400 bg-red-500/10 rounded-lg px-3 py-2">
+                  {error}
+                </p>
+              )}
+
+              <div className="pt-2">
+                <button
+                  type="button"
+                  onClick={handleSubmit}
+                  disabled={submitting || !walletAddress}
+                  title={
+                    walletAddress ? undefined : "Connect your Freighter wallet to submit"
+                  }
+                  className="w-full bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2.5 rounded-lg font-medium transition-colors focus:ring-2 focus:ring-zinc-400 focus:outline-none"
+                >
+                  Submit Proposal
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-zinc-200">Preview Proposal</h3>
+                <dl className="space-y-3 rounded-lg border border-zinc-700 bg-zinc-800/50 p-3">
+                  <div>
+                    <dt className="text-xs text-zinc-500">Recipient Address</dt>
+                    <dd className="mt-1 break-all font-mono text-sm text-zinc-200">
+                      {to.trim()}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-xs text-zinc-500">Amount</dt>
+                    <dd className="mt-1 text-sm text-zinc-200">
+                      {amount.trim()} {token}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-xs text-zinc-500">Description</dt>
+                    <dd className="mt-1 whitespace-pre-wrap break-words text-sm text-zinc-200">
+                      {description.trim()}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-xs text-zinc-500">Deadline</dt>
+                    <dd className="mt-1 text-sm text-zinc-200">
+                      {formatDeadline(deadline)}
+                    </dd>
+                  </div>
+                </dl>
+              </div>
+
+              {error && (
+                <p className="text-xs text-red-400 bg-red-500/10 rounded-lg px-3 py-2">
+                  {error}
+                </p>
+              )}
+
+              <div className="flex gap-3 pt-2">
+                <button
+                  type="button"
+                  onClick={() => setStep("form")}
+                  disabled={submitting}
+                  className="flex-1 bg-zinc-800 hover:bg-zinc-700 disabled:opacity-50 text-white py-2.5 rounded-lg font-medium transition-colors focus:ring-2 focus:ring-zinc-400 focus:outline-none"
+                >
+                  Back
+                </button>
+                <button
+                  type="button"
+                  onClick={handleConfirmSubmit}
+                  disabled={submitting || !walletAddress}
+                  title={
+                    walletAddress ? undefined : "Connect your Freighter wallet to submit"
+                  }
+                  className="flex-1 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2.5 rounded-lg font-medium transition-colors focus:ring-2 focus:ring-zinc-400 focus:outline-none"
+                >
+                  {submitting ? "Submitting…" : "Confirm & Submit"}
+                </button>
+              </div>
+            </>
+          )}
         </div>
       </div>
     </div>