diff --git a/src/modules/rendicontazione/pages/RendicontazioniMie.js b/src/modules/rendicontazione/pages/RendicontazioniMie.js
index 804cf49..25475fb 100644
--- a/src/modules/rendicontazione/pages/RendicontazioniMie.js
+++ b/src/modules/rendicontazione/pages/RendicontazioniMie.js
@@ -31,7 +31,7 @@ const RendicontazioniMie = () => {
     const toast = useRef(null);
     const [apps, setApps] = useState([]);
     const [loading, setLoading] = useState(true);
-    const [startDialog, setStartDialog] = useState(null); // { application_id, max_tranches, next_seq, show_copy_ula }
+    const [startDialog, setStartDialog] = useState(null);
     const [startForm, setStartForm] = useState({ period_label: '', copy_ula: true });
     const [starting, setStarting] = useState(false);
 
@@ -58,30 +58,39 @@ const RendicontazioniMie = () => {
             call_name: app.call_name,
             max_tranches: app.max_tranches,
             next_seq: nextSeq,
-            show_copy_ula: nextSeq > 1,
             max_remission_next: app.max_remission_next_tranche,
+            show_copy_ula: nextSeq > 1,
         });
-        setStartForm({ period_label: '', copy_ula: nextSeq > 1 });
+        setStartForm({ period_label: '', copy_ula: true });
     };
 
     const confirmStart = () => {
         if (!startDialog) return;
         setStarting(true);
-        RendicontazioneService.startPractice(
-            startDialog.application_id,
+        RendicontazioneService.startPractice(startDialog.application_id,
             (resp) => {
                 setStarting(false);
                 setStartDialog(null);
-                toast.current?.show({ severity: 'success', summary: resp?.message || __('Tranche avviata', 'gepafin') });
-                navigate(`/rendicontazioni/${resp.data.id}`);
+                toast.current?.show({
+                    severity: 'success',
+                    summary: __('Tranche avviata', 'gepafin'),
+                    detail: resp?.message
+                });
+                const newId = resp?.data?.id;
+                if (newId) navigate(`/rendicontazioni/${newId}`);
+                else load();
             },
             (err) => {
                 setStarting(false);
-                toast.current?.show({ severity: 'error', summary: __('Avvio fallito', 'gepafin'), detail: err?.detail });
+                toast.current?.show({
+                    severity: 'error',
+                    summary: __('Avvio fallito', 'gepafin'),
+                    detail: err?.detail || err?.message
+                });
             },
             {
-                period_label: startForm.period_label?.trim() || null,
-                copy_ula_from_previous: startForm.copy_ula,
+                period_label: startForm.period_label || null,
+                copy_ula_from_previous: startDialog.show_copy_ula ? startForm.copy_ula : false,
             }
         );
     };
@@ -93,79 +102,92 @@ const RendicontazioniMie = () => {
         const blockReason = app.start_blocked_reason;
 
         return (
-            <div key={app.application_id}
-                 className="appPageSection"
-                 style={{ marginBottom: '1.5rem', padding: '1.25rem', border: '1px solid var(--surface-border)', borderRadius: '8px', background: 'white' }}>
-                {/* HEADER CARD */}
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem', marginBottom: '0.75rem' }}>
-                    <div>
-                        <h3 style={{ margin: 0, color: 'var(--primary-color)' }}>
+            <div key={app.application_id} className="appPageSection__withBorder" style={{ marginBottom: 24 }}>
+                {/* HEADER: bando + erogato */}
+                <div className="row">
+                    <div style={{ flex: 1 }}>
+                        <h2 style={{ color: 'var(--primary-color)' }}>
                             {app.call_name || `Bando #${app.call_id}`}
-                        </h3>
-                        <div style={{ color: 'var(--text-color-secondary)', fontSize: '0.9em', marginTop: '2pt' }}>
+                        </h2>
+                        <p style={{ margin: '4px 0 0', color: 'var(--text-color-secondary)', fontSize: 14 }}>
                             {app.company_name || ''} · {__('Domanda', 'gepafin')} #{app.application_id}
-                        </div>
+                        </p>
                     </div>
                     <div style={{ textAlign: 'right' }}>
-                        <div style={{ fontSize: '0.8em', color: 'var(--text-color-secondary)' }}>{__('Finanziamento erogato','gepafin')}</div>
-                        <div style={{ fontSize: '1.3em', fontWeight: 700 }}>{fmtEur(app.amount_erogato)}</div>
+                        <div style={{ fontSize: 13, color: 'var(--text-color-secondary)' }}>
+                            {__('Finanziamento erogato','gepafin')}
+                        </div>
+                        <div style={{ fontSize: 20, fontWeight: 700 }}>{fmtEur(app.amount_erogato)}</div>
                     </div>
                 </div>
 
-                {/* CAP INFO */}
-                <div style={{ display: 'flex', gap: '1.5rem', padding: '0.75rem 1rem', background: 'var(--surface-50)', borderRadius: '6px', fontSize: '0.9em', flexWrap: 'wrap' }}>
-                    <div>
-                        <div style={{ fontSize: '0.8em', color: 'var(--text-color-secondary)' }}>{__('Cap remissione totale', 'gepafin')}</div>
-                        <strong>{fmtEur(app.max_remission_global)}</strong>
-                    </div>
-                    <div>
-                        <div style={{ fontSize: '0.8em', color: 'var(--text-color-secondary)' }}>{__('Già approvato', 'gepafin')}</div>
-                        <strong style={{ color: app.already_approved_sum > 0 ? '#22543d' : 'inherit' }}>{fmtEur(app.already_approved_sum)}</strong>
-                    </div>
-                    <div>
-                        <div style={{ fontSize: '0.8em', color: 'var(--text-color-secondary)' }}>{__('Disponibile prossima tranche', 'gepafin')}</div>
-                        <strong style={{ color: 'var(--primary-color)' }}>{fmtEur(app.max_remission_next_tranche)}</strong>
-                    </div>
-                    <div>
-                        <div style={{ fontSize: '0.8em', color: 'var(--text-color-secondary)' }}>{__('Tranches', 'gepafin')}</div>
-                        <strong>{app.tranches?.length || 0} / {app.max_tranches}</strong>
-                    </div>
+                {/* METRICHE cap/approvato/disponibile/tranches in griglia 4 colonne */}
+                <div className="appPageSection__row autoFlow" style={{ gap: '2rem', padding: '4px 0' }}>
+                    <p className="appPageSection__pMeta" style={{ flex: '1 1 auto', minWidth: 140 }}>
+                        <span>{__('Cap remissione totale', 'gepafin')}</span>
+                        <span>{fmtEur(app.max_remission_global)}</span>
+                    </p>
+                    <p className="appPageSection__pMeta" style={{ flex: '1 1 auto', minWidth: 140 }}>
+                        <span>{__('Già approvato', 'gepafin')}</span>
+                        <span style={{ color: app.already_approved_sum > 0 ? 'var(--green-700)' : 'inherit' }}>
+                            {fmtEur(app.already_approved_sum)}
+                        </span>
+                    </p>
+                    <p className="appPageSection__pMeta" style={{ flex: '1 1 auto', minWidth: 170 }}>
+                        <span>{__('Disponibile prossima tranche', 'gepafin')}</span>
+                        <span style={{ color: 'var(--primary-color)' }}>
+                            {fmtEur(app.max_remission_next_tranche)}
+                        </span>
+                    </p>
+                    <p className="appPageSection__pMeta" style={{ flex: '0 0 auto', minWidth: 90 }}>
+                        <span>{__('Tranches', 'gepafin')}</span>
+                        <span>{app.tranches?.length || 0} / {app.max_tranches}</span>
+                    </p>
                 </div>
 
-                {/* TRANCHES LIST */}
+                {/* LISTA TRANCHES */}
                 {hasTranches && (
-                    <div style={{ marginTop: '1rem' }}>
+                    <ul className="appPageSection__list" style={{ borderTop: '1px solid var(--button-secondary-borderColor)' }}>
                         {app.tranches.map((t) => {
                             const tag = STATUS_TAGS[t.status] || { severity: 'secondary', label: t.status };
                             const isEditable = t.status === 'DRAFT';
                             return (
-                                <div key={t.id}
-                                     style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.6rem 0.75rem', borderBottom: '1px solid var(--surface-border)' }}>
-                                    <div style={{ width: '3rem', fontWeight: 700, color: 'var(--primary-color)' }}>
-                                        T{t.sequence_number}
+                                <li key={t.id} className="appPageSection__listItem row">
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flex: 1 }}>
+                                        <div style={{ width: 36, fontWeight: 700, color: 'var(--primary-color)', fontSize: 16 }}>
+                                            T{t.sequence_number}
+                                        </div>
+                                        <div style={{ flex: 1 }}>
+                                            <div style={{ fontWeight: 500 }}>
+                                                {t.period_label || (
+                                                    <span style={{ color: 'var(--text-color-secondary)', fontStyle: 'italic' }}>
+                                                        {__('nessun periodo indicato','gepafin')}
+                                                    </span>
+                                                )}
+                                            </div>
+                                            <div style={{ fontSize: 13, color: 'var(--text-color-secondary)', marginTop: 2 }}>
+                                                {t.invoice_count || 0} {__('fatture','gepafin')} · {t.ula_count || 0} {__('dipendenti','gepafin')} · {t.document_count || 0} {__('doc','gepafin')}
+                                            </div>
+                                        </div>
                                     </div>
-                                    <div style={{ flex: 1 }}>
-                                        <div>{t.period_label || <span className="text-color-secondary">{__('nessun periodo indicato','gepafin')}</span>}</div>
-                                        <small className="text-color-secondary">
-                                            {t.invoice_count || 0} {__('fatture','gepafin')} · {t.ula_count || 0} {__('dipendenti','gepafin')} · {t.document_count || 0} {__('doc','gepafin')}
-                                        </small>
+                                    <div className="appPageSection__iconActions">
+                                        <Tag value={tag.label} severity={tag.severity} />
+                                        <Button icon={isEditable ? 'pi pi-pencil' : 'pi pi-eye'}
+                                                size="small" outlined={!isEditable}
+                                                label={isEditable ? __('Continua','gepafin') : __('Apri','gepafin')}
+                                                onClick={() => navigate(`/rendicontazioni/${t.id}`)} />
                                     </div>
-                                    <Tag value={tag.label} severity={tag.severity} />
-                                    <Button icon={isEditable ? 'pi pi-pencil' : 'pi pi-eye'}
-                                            size="small" outlined={!isEditable}
-                                            label={isEditable ? __('Continua','gepafin') : __('Apri','gepafin')}
-                                            onClick={() => navigate(`/rendicontazioni/${t.id}`)} />
-                                </div>
+                                </li>
                             );
                         })}
-                    </div>
+                    </ul>
                 )}
 
-                {/* BOTTONE NUOVA TRANCHE */}
-                <div style={{ marginTop: '1rem', display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: '0.75rem' }}>
+                {/* AZIONI: nuova tranche */}
+                <div className="appPageSection__actions" style={{ justifyContent: 'flex-end', alignItems: 'center', padding: '12px 0 0' }}>
                     {!canStart && blockReason && (
-                        <small className="text-color-secondary" style={{ fontStyle: 'italic' }}>
-                            <i className="pi pi-info-circle" style={{ marginRight: '4pt' }} />
+                        <small style={{ color: 'var(--text-color-secondary)', fontStyle: 'italic' }}>
+                            <i className="pi pi-info-circle" style={{ marginRight: 4 }} />
                             {blockReason}
                         </small>
                     )}
@@ -190,26 +212,33 @@ const RendicontazioniMie = () => {
 
             <div className="appPage__pageHeader">
                 <h1>{__('Le mie rendicontazioni', 'gepafin')}</h1>
-                <p>{__('Per ogni pratica finanziata puoi avviare la rendicontazione delle spese e il calcolo della remissione del debito. I bandi che prevedono piu tranches permettono rendicontazioni multi-fase.', 'gepafin')}</p>
+                <p>{__('Per ogni pratica finanziata puoi avviare la rendicontazione delle spese e il calcolo della remissione del debito. I bandi che prevedono più tranches permettono rendicontazioni multi-fase.', 'gepafin')}</p>
             </div>
 
             <div className="appPage__spacer"></div>
 
-            {loading && <Skeleton width="100%" height="10rem" />}
+            {loading && (
+                <div className="appPageSection">
+                    <Skeleton width="100%" height="10rem" />
+                </div>
+            )}
 
             {!loading && apps.length === 0 && (
-                <div className="appPageSection" style={{ alignItems: 'center', padding: '3rem 2rem' }}>
+                <div className="appPageSection__withBorder" style={{ alignItems: 'center', textAlign: 'center', padding: '3rem 2rem' }}>
                     <i className="pi pi-inbox" style={{ fontSize: '2.5rem', color: 'var(--text-color-secondary)', marginBottom: '0.75rem' }} />
                     <p>{__('Non ci sono rendicontazioni disponibili al momento.', 'gepafin')}</p>
-                    <small className="text-color-secondary">
+                    <small style={{ color: 'var(--text-color-secondary)' }}>
                         {__('Le rendicontazioni diventano disponibili dopo la firma del contratto e quando l\'ente ha pubblicato lo schema di rendicontazione per il bando.', 'gepafin')}
                     </small>
                 </div>
             )}
 
-            {!loading && apps.length > 0 && apps.map(renderApplicationCard)}
+            {!loading && apps.length > 0 && (
+                <div className="appPageSection">
+                    {apps.map(renderApplicationCard)}
+                </div>
+            )}
 
-            {/* START DIALOG */}
             <Dialog header={__('Avvia nuova tranche di rendicontazione', 'gepafin')}
                     visible={!!startDialog} style={{ width: '32rem' }}
                     onHide={() => !starting && setStartDialog(null)}
@@ -240,7 +269,7 @@ const RendicontazioniMie = () => {
                                        onChange={(e) => setStartForm(f => ({ ...f, period_label: e.target.value }))}
                                        placeholder={__('es. "I trimestre 2021", "Stato avanzamento II"', 'gepafin')}
                                        disabled={starting} />
-                            <small className="text-color-secondary">
+                            <small style={{ color: 'var(--text-color-secondary)' }}>
                                 {__('Descrizione libera per identificare la tranche. Apparirà sul verbale.', 'gepafin')}
                             </small>
                         </div>
@@ -255,7 +284,7 @@ const RendicontazioniMie = () => {
                                         {__('Copia i dipendenti ULA dalla tranche precedente', 'gepafin')}
                                     </label>
                                 </div>
-                                <small className="text-color-secondary">
+                                <small style={{ color: 'var(--text-color-secondary)' }}>
                                     {__('Se attivo, i dipendenti censiti nella tranche precedente saranno precaricati. Potrai modificarli o rimuoverli prima di inviare.', 'gepafin')}
                                 </small>
                             </div>