diff --git a/src/components/public/quote/QuoteMultistep.tsx b/src/components/public/quote/QuoteMultistep.tsx
new file mode 100644
index 0000000..ec61b9a
--- /dev/null
+++ b/src/components/public/quote/QuoteMultistep.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import type { PublicQuoteView } from "@/lib/quote-service";
+import { QuoteStep1Overview } from "./QuoteStep1Overview";
+import { QuoteStep2Selection } from "./QuoteStep2Selection";
+import { QuoteStep3Summary } from "./QuoteStep3Summary";
+
+interface QuoteMultistepProps {
+  quote: PublicQuoteView;
+}
+
+export function QuoteMultistep({ quote }: QuoteMultistepProps) {
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const handleNextStep = () => {
+    if (currentStep < 3) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handlePrevStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  // Step progress indicator
+  const stepIndicator = (
+    <div className="flex items-center justify-center gap-2 mb-6">
+      {[1, 2, 3].map((step) => (
+        <div key={step} className="flex items-center">
+          <div
+            className={`w-8 h-8 rounded-full flex items-center justify-center font-semibold text-sm ${
+              step <= currentStep
+                ? "bg-blue-600 text-white"
+                : "bg-slate-200 text-slate-600"
+            }`}
+          >
+            {step}
+          </div>
+          {step < 3 && (
+            <div
+              className={`w-8 h-0.5 ${
+                step < currentStep ? "bg-blue-600" : "bg-slate-200"
+              }`}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <div>
+      {stepIndicator}
+
+      {currentStep === 1 && (
+        <QuoteStep1Overview
+          quote={quote}
+          onNext={handleNextStep}
+        />
+      )}
+
+      {currentStep === 2 && (
+        <QuoteStep2Selection
+          quote={quote}
+          onNext={handleNextStep}
+          onPrev={handlePrevStep}
+        />
+      )}
+
+      {currentStep === 3 && (
+        <QuoteStep3Summary
+          quote={quote}
+          onPrev={handlePrevStep}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/public/quote/QuoteStep1Overview.tsx b/src/components/public/quote/QuoteStep1Overview.tsx
new file mode 100644
index 0000000..6860ff1
--- /dev/null
+++ b/src/components/public/quote/QuoteStep1Overview.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import type { PublicQuoteView } from "@/lib/quote-service";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { ArrowRight } from "lucide-react";
+
+interface QuoteStep1OverviewProps {
+  quote: PublicQuoteView;
+  onNext: () => void;
+}
+
+export function QuoteStep1Overview({ quote, onNext }: QuoteStep1OverviewProps) {
+  // Format total as currency
+  const totalInCents = Math.round(parseFloat(quote.accepted_total) * 100);
+  const totalFormatted = (totalInCents / 100).toLocaleString("it-IT", {
+    style: "currency",
+    currency: "EUR",
+  });
+
+  return (
+    <div className="space-y-8 p-8">
+      {/* Offer Name */}
+      <div className="text-center space-y-2">
+        <h2 className="text-2xl font-semibold text-slate-900">{quote.offerName}</h2>
+      </div>
+
+      {/* Total Price (Large & Prominent) */}
+      <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-8 text-center border border-blue-200">
+        <p className="text-sm font-medium text-slate-600 mb-2">Investimento totale</p>
+        <p className="text-5xl font-bold text-blue-600">{totalFormatted}</p>
+        <p className="text-sm text-slate-600 mt-4">
+          Tutto ciò che serve per il tuo progetto di personal branding
+        </p>
+      </div>
+
+      {/* Phase Summary */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">
+          Cosa è incluso
+        </h3>
+        <div className="space-y-2">
+          {quote.phaseSummary.length > 0 ? (
+            quote.phaseSummary.map((phase) => (
+              <Card key={phase.id} className="p-4 border-l-4 border-l-blue-500">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <p className="font-medium text-slate-900">{phase.title}</p>
+                  </div>
+                  <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full font-medium">
+                    {phase.serviceCount} servizio{phase.serviceCount !== 1 ? "i" : ""}
+                  </span>
+                </div>
+              </Card>
+            ))
+          ) : (
+            <p className="text-slate-600 text-sm">
+              Nessuna fase configurata per questo preventivo
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* CTA */}
+      <div className="pt-4">
+        <Button
+          onClick={onNext}
+          size="lg"
+          className="w-full bg-blue-600 hover:bg-blue-700 text-white h-12"
+        >
+          Continua <ArrowRight className="ml-2 h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Info text */}
+      <p className="text-xs text-slate-500 text-center">
+        Passo 1 di 3 • Panoramica preventivo
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/public/quote/QuoteStep2Selection.tsx b/src/components/public/quote/QuoteStep2Selection.tsx
new file mode 100644
index 0000000..998ce7e
--- /dev/null
+++ b/src/components/public/quote/QuoteStep2Selection.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import type { PublicQuoteView } from "@/lib/quote-service";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { ArrowLeft, ArrowRight, CheckCircle } from "lucide-react";
+
+interface QuoteStep2SelectionProps {
+  quote: PublicQuoteView;
+  onNext: () => void;
+  onPrev: () => void;
+}
+
+export function QuoteStep2Selection({ quote, onNext, onPrev }: QuoteStep2SelectionProps) {
+  // Format total as currency
+  const totalInCents = Math.round(parseFloat(quote.accepted_total) * 100);
+  const totalFormatted = (totalInCents / 100).toLocaleString("it-IT", {
+    style: "currency",
+    currency: "EUR",
+  });
+
+  return (
+    <div className="space-y-8 p-8">
+      {/* Phase Listing */}
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold text-slate-900">Fasi incluse nel preventivo</h2>
+
+        {quote.phaseSummary.length > 0 ? (
+          <div className="space-y-3">
+            {quote.phaseSummary.map((phase) => (
+              <Card key={phase.id} className="p-4 border-l-4 border-l-green-500 hover:shadow-md transition-shadow">
+                <div className="flex items-start gap-3">
+                  <CheckCircle className="h-5 w-5 text-green-600 mt-1 flex-shrink-0" />
+                  <div className="flex-1">
+                    <h3 className="font-semibold text-slate-900">{phase.title}</h3>
+                    <p className="text-sm text-slate-600 mt-1">
+                      {phase.serviceCount} servizio{phase.serviceCount !== 1 ? "i" : ""}
+                    </p>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <p className="text-slate-600 text-sm">
+            Nessuna fase configurata per questo preventivo
+          </p>
+        )}
+      </div>
+
+      {/* Divider */}
+      <div className="border-t border-slate-200"></div>
+
+      {/* Total Summary */}
+      <div className="bg-slate-50 rounded-lg p-6 space-y-2">
+        <div className="flex justify-between items-center">
+          <span className="text-slate-700 font-medium">Totale preventivo:</span>
+          <span className="text-3xl font-bold text-blue-600">{totalFormatted}</span>
+        </div>
+        <p className="text-xs text-slate-500">
+          Questo totale è immutabile e comprende tutti i servizi sopra elencati
+        </p>
+      </div>
+
+      {/* Info */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <p className="text-sm text-slate-700">
+          <span className="font-semibold">Nota:</span> Nel passo successivo potrai confermare l'accettazione fornendo
+          il tuo indirizzo email e eventuali note.
+        </p>
+      </div>
+
+      {/* Navigation */}
+      <div className="flex gap-3 pt-4">
+        <Button
+          onClick={onPrev}
+          variant="outline"
+          className="flex-1 h-12"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Indietro
+        </Button>
+        <Button
+          onClick={onNext}
+          className="flex-1 bg-blue-600 hover:bg-blue-700 text-white h-12"
+        >
+          Continua <ArrowRight className="ml-2 h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Info text */}
+      <p className="text-xs text-slate-500 text-center">
+        Passo 2 di 3 • Dettagli fasi
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/public/quote/QuoteStep3Summary.tsx b/src/components/public/quote/QuoteStep3Summary.tsx
new file mode 100644
index 0000000..b8453b3
--- /dev/null
+++ b/src/components/public/quote/QuoteStep3Summary.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import { useState } from "react";
+import type { PublicQuoteView } from "@/lib/quote-service";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { ArrowLeft, CheckCircle, X } from "lucide-react";
+import { acceptQuote, rejectQuote } from "@/app/quote/[token]/actions";
+
+interface QuoteStep3SummaryProps {
+  quote: PublicQuoteView;
+  onPrev: () => void;
+}
+
+export function QuoteStep3Summary({ quote, onPrev }: QuoteStep3SummaryProps) {
+  const [email, setEmail] = useState("");
+  const [notes, setNotes] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  // Format total as currency
+  const totalInCents = Math.round(parseFloat(quote.accepted_total) * 100);
+  const totalFormatted = (totalInCents / 100).toLocaleString("it-IT", {
+    style: "currency",
+    currency: "EUR",
+  });
+
+  const handleAccept = async () => {
+    setIsSubmitting(true);
+    setErrorMessage(null);
+    try {
+      const result = await acceptQuote(quote.token, email || undefined, notes || undefined);
+      if (result.success) {
+        setSuccessMessage(result.message || "Preventivo accettato con successo!");
+      } else {
+        setErrorMessage(result.error || "Errore sconosciuto");
+      }
+    } catch (error) {
+      setErrorMessage("Errore durante l'invio");
+      console.error(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleReject = async () => {
+    if (!window.confirm("Sei sicuro di rifiutare questo preventivo?")) return;
+
+    setIsSubmitting(true);
+    setErrorMessage(null);
+    try {
+      const result = await rejectQuote(quote.token, notes || undefined);
+      if (result.success) {
+        setSuccessMessage("Preventivo rifiutato");
+      } else {
+        setErrorMessage(result.error || "Errore sconosciuto");
+      }
+    } catch (error) {
+      setErrorMessage("Errore durante l'invio");
+      console.error(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Success state
+  if (successMessage) {
+    return (
+      <div className="space-y-8 p-8">
+        <div className="flex justify-center">
+          <div className="rounded-full bg-green-100 p-3">
+            <CheckCircle className="h-12 w-12 text-green-600" />
+          </div>
+        </div>
+        <div className="text-center space-y-2">
+          <h2 className="text-2xl font-bold text-slate-900">Perfetto!</h2>
+          <p className="text-slate-600">{successMessage}</p>
+        </div>
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4 space-y-2">
+          <p className="text-sm font-medium text-slate-900">Cosa succede ora?</p>
+          <ul className="text-sm text-slate-600 space-y-1 ml-4">
+            <li>✓ Abbiamo registrato l'accettazione del preventivo</li>
+            <li>✓ Ti contatteremo entro 24 ore per concordare i prossimi passi</li>
+            <li>✓ Inizieremo la pianificazione del tuo progetto di personal branding</li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8 p-8">
+      {/* Summary Card */}
+      <Card className="p-6 border-l-4 border-l-blue-500 bg-blue-50">
+        <h2 className="text-lg font-semibold text-slate-900 mb-4">Riepilogo</h2>
+        <div className="space-y-2 text-sm">
+          <div className="flex justify-between">
+            <span className="text-slate-600">Offerta:</span>
+            <span className="font-medium text-slate-900">{quote.offerName}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-slate-600">Investimento totale:</span>
+            <span className="font-bold text-blue-600">{totalFormatted}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-slate-600">Fasi incluse:</span>
+            <span className="font-medium text-slate-900">{quote.phaseSummary.length}</span>
+          </div>
+        </div>
+      </Card>
+
+      {/* Form Fields */}
+      <div className="space-y-4">
+        <div>
+          <Label htmlFor="email" className="block mb-2 font-medium text-slate-700">
+            Email (facoltativo)
+          </Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="il-tuo@email.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={isSubmitting}
+            className="h-10"
+          />
+          <p className="text-xs text-slate-500 mt-1">
+            Useremo questa email per contattarti riguardo al tuo preventivo
+          </p>
+        </div>
+
+        <div>
+          <Label htmlFor="notes" className="block mb-2 font-medium text-slate-700">
+            Note (facoltativo, max 500 caratteri)
+          </Label>
+          <Textarea
+            id="notes"
+            placeholder="Es. Preferisco iniziare nel mese di settembre..."
+            value={notes}
+            onChange={(e) => setNotes(e.target.value.slice(0, 500))}
+            disabled={isSubmitting}
+            rows={4}
+            className="resize-none"
+          />
+          <p className="text-xs text-slate-500 mt-1">
+            {notes.length}/500 caratteri
+          </p>
+        </div>
+      </div>
+
+      {/* Error message */}
+      {errorMessage && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex gap-3">
+          <X className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
+          <p className="text-sm text-red-800">{errorMessage}</p>
+        </div>
+      )}
+
+      {/* CTA Buttons */}
+      <div className="space-y-3 pt-4">
+        <Button
+          onClick={handleAccept}
+          disabled={isSubmitting}
+          size="lg"
+          className="w-full bg-green-600 hover:bg-green-700 text-white h-12"
+        >
+          {isSubmitting ? "Invio in corso..." : "Accetta Preventivo"}
+        </Button>
+
+        <div className="flex gap-2">
+          <Button
+            onClick={onPrev}
+            variant="outline"
+            disabled={isSubmitting}
+            className="flex-1 h-10"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Indietro
+          </Button>
+          <Button
+            onClick={handleReject}
+            disabled={isSubmitting}
+            variant="ghost"
+            className="flex-1 h-10 text-red-600 hover:text-red-700 hover:bg-red-50"
+          >
+            Rifiuta
+          </Button>
+        </div>
+      </div>
+
+      {/* Info text */}
+      <p className="text-xs text-slate-500 text-center">
+        Passo 3 di 3 • Conferma e accettazione
+      </p>
+    </div>
+  );
+}